We are using the BEM pattern ("Block, Element, Modifier") to structure our CSS in all new projects. We try to migrate legacy projects to BEM, block-by-block.
Read the chapter "Taming Stylesheets" from our book Growing Rails Applications in Practice Show archive.org snapshot (in our library).
Talk with a colleague about the reasons for the naming conventions we use:
.block
.block--element
.block.-modifier
-
?Look at some examples of a good BEM structure in the DOM tree of these websites:
Note
- You don't need a Rails project for this. Just make a new folder with static HTML and CSS files. You can push it into a new repository in GitLab.
- Don't peak too much into the actual HTML and CSS of makandracards.com.
- You are likely to have trouble deciding where to draw the line between the blocks. E.g. a structure could either be two independent blocks or a block that contains two elements. There is not always a right answer to that. Discuss the pros and cons of each approach with your mentor.
Change the views and CSS of MovieDB so you have a small set of reusable BEM blocks that you can use everywhere.
Tip
Spreewald can be used with an auto-mapper for BEM classes. You can set it up Show archive.org snapshot for the movieDB and profit from well-named BEM classes in your Cucumber steps.