Skip to content

Latest commit

 

History

History
47 lines (21 loc) · 2.29 KB

activity-1.md

File metadata and controls

47 lines (21 loc) · 2.29 KB
Raw

BEM and OOCSS in Practice 👩‍🎨

Now you understand what BEM and OOCSS are, it's time to put these sweet new learnings into practice!

After forking this repository you will need to clone the repo locally and open up your index.html file in the browser.

Type 'open index.html' in your terminal and press enter (make sure you're in the right directory!). Alternatively, right click on your index.html file and select 'open with..' then select the browser of your choice.

Your Star / BEM / OOCSS Wars page should open in your browser. You should now see pictures of Darth Vader and Yoda on your screen. 🪐

The Challenge 🤺

The internet is being destroyed by unscalable, unmanageable CSS! Specificity wars are everywhere, elements are lost in the deep dark depths of nesting and fleets of developers are fleeing in their droves!

But! Rebellions are built on hope, Skywalker... and a little more knowledge around CSS methodologies lights our way. 🕊

In your index.html file you must work with Yoda BEM/OOCSS to create a more manageable, more zen web page.

The Rulez 😒

Your project should have:

  • One light coloured card for Yoda, The Force and BEM/OOCSS.

  • One dark coloured card for Darth Vader and his CSS hell!

  • Card styling like borders, padding, shadows etc

  • BEM notation to clearly name and structure your CSS to target block, elements and modifiers on the page

  • OOCSS to avoid duplication in your code. Remember, "block" styles will affect all cards whereas your modifier styles will change specific, or individual things, like the colour of your cards.

  • No Ids. This is because BEM/OOCSS recommend avoiding Ids because Ids are unique which means they cannot be reused. Using classes avoids specificity wars (if everything is a class, everything has a specificity of 10 which is easy to remember and easy to override 😉).

  • Try not to select elements using their tag names. On large projects, targetting p when there are lots of ps can get dangerous! 🙈 So again, give classes to everything.

  • Comments to clearly separate your CSS content i.e. structure vs skins

If you've created harmony amongst your CSS, and your cards are looking 'out of this world' 😉 you're ready for an extension! 🙌 🌎 🚀

Activity 2 Extension