BEM Naming Cheat Sheet by 9elements When it comes to finding the right class name, it can quickly drive you to despair. Even the most experienced CSS developers don't always find the right class name right away. Create a cheat sheet. The key to learning how to layout a laminate floor is making a cheat sheet. This is a list that shows you how many inches your laminate planks equal when they are put together. For example you will be able to look at this sheet and see how many inches it is when 10 planks are put together, or 15 planks, or 20 planks and so on.
If you’re writing your HTML and CSS code in OOCSS-style, Yandex’s BEM style specifically, you will like this filter. It provides some aliases and automatic insertions of common block and element names in classes.
In short, BEM introduces three concept types for CSS classes: Block, Element and Modifier. Block is a some sort of a namespace for a semantic sections of HTML page, for example, search-form. Element is a part of section, for example, search-form__query-string. Modifiers define variations of block and elements: search-form_wide or search-form_narrow. Elements in class names are separated with __ (double underscore) and modifiers are separated with _ (single underscore).
While BEM/OOCSS is a great way to maintain and re-use CSS, it may be very tedious to write these class names in plain HTML, even with help of Emmet abbreviations. You have to write the same block or element name in every element of abbreviation:
The bem filter allows you to make abbreviation a bit sorter:
How it works
BEM filter introduces a few class name prefixes for concept types: __ or - as element prefix and _ as modifier prefix. Whenever you begin the class name with one of these prefixes, filter will resolve the rest parts for you:
- if you start class name element prefix, filter will resolve block name from parent node;
- if you start class name with modifier prefix, filter will resolve block name and/or element name from current or parent nodes;
- if you use both element and modifier prefixes, filter will resolve block name from parent node and output both “unmodified” and “modified” classes on element;
- if you use multiple element prefixes, filter with resolve block name from nth parent node.
Here are a few examples:
| Abbreviation | Output |
|---|---|
.b_m | |
.b_m1._m2 | |
.b>._m | |
.b1>.b2_m1>.-e1+.--e2_m2 |
Remember that you can always make bem filter a default one for HTML syntax.
Bem Css Cheat Sheet
DisqusJanuary 14, 2020
This is a quick start guide to learning BEM, the component-driven CSS methodology. Cleverscope driver.
If you want to start practicing and applying BEM to your projects, this guide will help you get started.
Bonus:Download a free cheat sheet that will show you how to quickly get started with BEM.
Ready? Let’s dive in:
BEM Overview
BEM (Block-Element-Modifier) is a CSS naming convention developed by the team at Yandex to improve scalability and maintainability in web development.
Put simply, the idea of BEM is to “divide the user interface into independent blocks” by naming CSS classes in the following methodology:
- Block: an independent component that can be reused (e.g. with class name
.nav) - Element: a child within a block that cannot be used separately from that block (e.g. with class name
.nav__item) - Modifier: a variation in the style of either a block or modifier (e.g. with class name
.nav--dark)
Let’s dive into some real CSS examples to get a hang of this thing.
Blocks
Blocks are reusable components. Like buttons, cards or form fields.
When naming your blocks, focus on describing its purpose (i.e. what it is) rather than its state (i.e. what it looks like).
For example, .btn or .nav follows the correct naming convention for a block.
.big or .bright-pink describes how it looks, so doesn’t scale well when you want to change the design later on.
If you’re wondering how to place blocks within blocks (for example, a button inside a nav), here’s a short article to help you with that.
Elements
Inside blocks are where elements live. Elements are dependent on their parent block, and so cannot be used without them.
Elements also have a unique CSS class naming convention which works like this:
.block__element
For example, using the .card component, an element inside the card component (like an image) would have a class name like .card__img.
The element name always appends the block name, separated by a double underscore __.
It’s important to note that the second code snippet avoids using more than 1 selector to target the styles (e.g. like .card img {}).
It’s considered best practice to use a BEM element class and use that directly instead (like .card__img {}).
Following this approach reduces the chance of cascade issues down the line.
If you’re wondering on how to handle BEM elements that are nested 3 or 4 layers deep, check out this article on the topic.
Modifiers
When you have varying styles in blocks (or elements), that’s where modifiers come in.
For example, your ‘card’ block might have a light and dark version. Or you might have primary and secondary buttons.
Modifiers have a unique CSS naming convention which works like this:
block--modifier or block__element--modifier.
That’s right- BEM modifiers can be applied to both blocks and elements.
Bem Cheat Sheet 2019
Let’s dive into some bad and good practices:
Bem Cheat Sheet Pdf
It’s considered bad practice to use a modifier class in isolation (i.e. without the block or element class).
That’s because the modifier is meant to add incremental style changes to the block.
Therefore, whenever using a modifier, ensure it’s used with the base class:
And that’s it!
Those are the fundamentals to get you off and running with BEM.
If you’re interested to learn more about the ‘why’ behind BEM, I recommend checking out this CSS Tricks article.
Bem Cheat Sheet 2020
Like learning anything new, practicing is key. Give BEM a shot in your next project and see where it takes you!
Download The Free BEM Cheat Sheet
Want to start practicing BEM and looking for a no-nonsense, quick start action guide? Download a free cheat sheet covering BEM basics so you can dive in and become a BEM pro.
By Tom Ray, a front-end developer who lives in London with his fiancée and cat Arnold.