CHAPTER 1 Modern CSS Architecture and Front-End Development
beM: bloCK, eleMenT, MoDifieR
Taking explicit naming even further, let’s take a look at BEM.
BEM — meaning block, element, modifier — is a front-end naming
methodology thought up by the guys at Yandex, based in Russia. It is a
smart way of naming your CSS classes to give them more transparency
and meaning to other developers. They are far more strict and informative,
which makes the BEM naming convention ideal for teams of developers on
larger projects that might last a while.
The flavor of BEM that I use is actually a modification thought up by
Nicolas Gallagher, and follows this pattern:.block {}
.block__element {}
.block--modifier {}- .block represents the higher level of an abstraction or component.
- .block__element represents a descendent of .block that helps form
.block as a whole. - .block--modifier represents a different state or version of .block.
Let’s rewrite the previous example with BEM:<div class="widget widget--foobar">
<h2 class="widget__title"></h2>
<div class="widget__body">
<img src="" alt="" class="widget__thumbnail">
</div>
</div>Here we can see that block is .widget; .widget--foobar is a modifi-
cation of that widget; and .widget__title, .widget__body and .widget__
thumbnail are all elements of the widget.
The advantages here might not be immediately apparent, but now take
this similar example: