195 Structuring CSS with the BEM pattern [4d]

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.

Important

Work on this lesson in teacher mode.

Learning goals

• You can explain why unstructured CSS becomes hard to maintain — global scope, cascading side effects, selectors coupled to markup — and what a naming convention like BEM does about it.
• You can explain the three BEM concepts — block, element, modifier — and our naming convention for each, including why elements are written with a double dash and modifiers start with a single dash.
• You can decide where to draw the line between blocks: when something is a reusable block of its own and when it is an element of a larger block.
• You can build a screen from a small set of reusable blocks, with few elements and no wrappers that exist only for styling.
• You keep a block's own styling separate from its positioning on a particular screen.
• You can recognize BEM-structured markup (and its absence) by inspecting a page.
• You can migrate existing CSS to BEM step by step, block by block.

Resources

Read what's new to you, skim what's familiar, skip what you already master. Stop when you can meet the learning goals.

Your agent can also generate an overview, a tutorial or an explanation for anything here, tailored to what you already know. Just ask.

• 📘 The chapter "Taming Stylesheets" from our book Growing Rails Applications in Practice Show archive.org snapshot (in our library) — why CSS rots and how blocks fix it
• 📄 Our BEM naming conventions — .block, .block--element, .block.-modifier
• 📄 BEM 101 Show archive.org snapshot — the general pattern as the rest of the world writes it (__element, --modifier), so you recognize it in other projects
• 🎮 Inspect the DOM of https://makandra.de/, https://railslts.com/ and https://www.aitiraum.de/ Show archive.org snapshot — examples of a good BEM structure

Discuss with your mentor

Talk about the reasons for our naming conventions:

.block
.block--element
.block.-modifier

• Why are elements preceded by a double dash?
• Why is it important modifiers start with -?

Exercises

Cards

• In a new project, try to layout the style of https://makandracards.com/makandra as close as possible.
  • You only need to re-implement the index view.
  • Implement the view in a state where the user is signed in.
• You can use static files, Middleman or Rails for the implementation.
• Use a number of fake cards so you can layout the grid of cards with real data.
• Make sure that your implementation uses a clear set of BEM blocks. Blocks like the cards should be reusable for other screens.

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.

MovieDB

Change the views and CSS of MovieDB so you have a small set of reusable BEM blocks that you can use everywhere.