code-challenges

BEMify me

BEM is a CSS methology that helps you “create reusable components and code sharing”. It’s great when you get the grip of it, but it can be quite tricky in the beginning. It concerns naming, which is one of the two hard things in programming. You also have a lot of freedome in BEM. Therefore let’s pratice it and compare results with each other! A note here: there is no “correct” way of solving this challenge. Instead, see this as a training where we can compare each other’s solutions and try to find best practices regarding BEM for the common stuff that we all agree upon.

There’s a starter with a nice poor little website that has lost all of its class names! Copy the starter into a directory named after you and start cleaning up this mess!

Task:

• The class names are all lost! Please rename them to something BEMy :)
• Some of the CSS is not following the BEM methology. Please do something about that.

Some rules to make it easy to compare the results and to focus this task on BEM:

• Keep the order of selectors in the CSS. If you need to move some code, try to keep it as close as it’s original position as possible.
• You are not allowed to change the actual CSS attributes.
• You are not allowed to change anything in the HTML document besides CSS classes.
• You are allowed to add new classes if you would like to. Add them as far down in the CSS document as you can, but keep the media queries at the end.
• Try not to break the page by forgetting to rename some of the CSS or renaming the wrong classes :) Work your way through the file in your own pase. The important thing is not that you fix all of the naming but instead find names that you like and find useful and expressive.

Remember that the page is responsive and also has some JavaScript!