Quick notes on BEM (Block Element Modifier) syntax in CSS
What is it?
- What it’s not:
- A CSS framework (like Bulma, Bootstrap)
- Library
- It’s a naming convention for classes in HTML and CSS
- Alternatives of naming conventions include
- Object Oriented CSS (OOCSS)
- Scalable and Modular Architecture for CSS (SMACSS)
- Atomic CSS
How to use it
- Block: higher level component
- Element: descendent of block, relies on block
- Modifier: represents different state or version of block/element
.block {
}
.block__element {
}
.block--modifier {
}For example, in JSX:
<div
className={`block ${isSelected ? "block--selected" : ""} ${
warning ? "block--warning" : ""
}`}
>
<div className="block__element"></div>
</div>A ‘real world’ example:
.person {
}
.person__hand {
}
.person--male {
}
.person--male__hand {
}
.person__hand--left {
}A real world example
Before BEM
.site-search {
}
.site-search.full {
}
.site-search .field {
}<form class="site-search full">
<input type="text" class="field" />
<input type="Submit" value="Search" class="button" />
</form>- Problem with above is that the
fullclass and thefieldclass might clash with class styles defined elsewhere
With BEM
.site-search {
} /* Block */
.site-search__field {
} /* Element */
.site-search--full {
} /* Modifier */or
.site-search {
/* Block */
&__field {
} /* Element */
&--full {
} /* Modifier */
}<!-- Notice that a modified element gets both the base block class and the modifier class -->
<form class="site-search site-search--full">
<input type="text" class="site-search__field" />
<input type="Submit" value="Search" class="site-search__button" />
</form>Pros and cons
- 👍 Avoids name clashing against global scope
- 👍 Clear what to name a new class
- 👍 Clear understanding of how CSS matches up with HTML - clear what modifier should go with what block
- 👍 Follows components
- 👍 Maintains flexibility in a CSS world - so we are still open to mix in personal preferences - but this is still open to lack of consistency across a team
When mixed with global styles like the below, it’s flexible, but a new developer would need to know these helpers existed to use them.
.noBreakText {
white-space: nowrap;
}
.upperCase {
text-transform: uppercase;
}- 👎 Other tools out there which solve the global scope problem (CSS modules, SvelteJS, Styled Components (React specific))
- 👎 Lack of clarity on what should be an ‘atomic’ modifier
- 👎 Is open to unnecessary nesting - when is something a new block? When does something need a new modifier?
e.g.
<div class="header">
<div class="logo"></div>
</div>or
<div class="header">
<div class="header__logo"></div>
</div>