Table of Contents
You have OOCSS, SMACSS and many more standards for writing and maintaining CSS syntax. Today, block, element and modifier is what we’ll be focusing on and also what BEM abbreviation stands for. You’ve already heard about it from me in one of the previous posts about how to modularize your CSS. Because of your interest in this methodology I am going to give you more real-life examples of how you can implement BEM right away. So without farther ado, let’s begin.
BEM – Block, element and modifier
Before going any deeper, we should take a quick look at the individual parts of BEM standard and its terms. All you need to remember, and understand, are three terms and two symbols. That’s it. Those terms are block, element and modifier. The symbols are two underscores and two hyphens. First, let’s talk about the terms.
Block
First of the BEM big three is block. This is the container or context where other element are laid out. You can imagine blocks as a bigger structural chunks in your code. These can be, for example, a section, header, footer, sidebar or main of your website with some content. Important to understand is that block is an independent entity. It can exist or stand on its own. One block can also be a part of another block, there is no restriction for this. This block contains all the subsequent elements (children elements).
CSS:
.block { … } /* basic syntax */
.header { … } /* header block */
.sidebar { … } /* sidebar block */
.about { … } /* about block */
.content { … } /* content block */
.copy { … } /* copy block */
Element
As said above, element is a part of a block that is here to perform some function. Elements cannot exist on their own in the way to keep their function or meaning. So, they can only appear inside the blocks. However, they are not necessary. You can have one or more elements nested inside the block or not. It is just the matter of the situation you are in. One example of element can be an input field or a navigation link.
Now, we have to talk the first of the symbols duo presented above. This symbol is underscore (_), but always doubled (__). Whenever you will want to add an element into some block, the class naming notation will follow this fashion: name of block, two underscores and name of the element – block__element. Maybe a bit strange, but it is still very simple. Let’s use a few examples to better imagine it.
CSS:
.header { … } /* Header block */
.header__logo { … } /* Logo element inside header block */
.header__navigation { … } /* Navigation element inside header block */
.main__content { … } /* Navigation element inside header block */
.footer__icons { … } /* Icons element inside footer block */
Remember to keep the class names simple, clear, and precise. You don’t need to spend hours over your stylesheets coming up with “cool” names. The best to do is to follow the DRY principle – don’t repeat yourself. You want the classes to be both, semantic (descriptive) and also universal so they can be used repeatedly. This approach will help you keep your stylesheet short and without re-writing rules.
Modifier
The last part of BEM to introduce you are modifiers. These are the properties of blocks and elements. Remember, you want to keep your classes repeatable so you don’t have to create new classes in other parts of the site (project) when the element’s styles are the same. Modifiers are here to do exactly that. So, in any situation you will want to change the style of some specific element, you will use a modifier to do it while keeping the block and element class untouched. This includes changing the visual style, behavior, etc.
Now its time for the second symbol, the hyphen. In case of blocks and elements, you added two underscores. When you want to create or use modifier you will use two hyphens. The naming style is block or element name, two hyphens and the name of the modifier – block—modifier or element—modifier. To better illustrate this, let’s again use some examples.
CSS:
/* Basic syntax */
.block--modifier { … }
.block__element--modifier { … }
.header__navigation--primary { … }
.site__logo--big { … }
.icon--alert { … }
.icon--info { … }
.text--red { … }
.text--body { … } /* main size */
In contrast of blocks and elements, modifiers are not restricted in the sense of how many of them you can use on one element. Simply use as many as you want / need or as project recommend. In BEM, modifiers exist to help you modify the elements by creating reusable “styling” classes applicable across the whole website or project, not just one section. Let’s create few simple examples, now in a HTML markup.
HTML:
<!-- Website navigation --> <header role=”banner”> <nav role=”navigation”> <ul class=”header__nav—primary header__nav--right”> <li><a class=”link--default text--medium” href=”...”>Home</a></li> <li><a class=”link--default text--medium” href=”...”>About</a></li> <li><a class=”link--default text--medium” href=”...”>Services</a></li> <li><a class=”link--default link--disabled text--medium” href=”...”>Showcase</a></li> <li><a class=”link--red text--medium” href=”...”>Contact</a></li> </ul> </nav> </header>
Another example can be obligatory blog post where, from BEM perspective, single post will be a block and content inside will be elements.
HTML:
<!-- blog post --> <article class=”blog-post”> <div class=”post__header”> <h1 class=”post__title”>Post heading</h1> <h2 class=”post__sub-title”>Some sub-heading</h2> <div class=”post__meta”> <span class=”post__author”><a class=”post__author-link” href=”...”>Rick Doe</a></span> <time class=”post__date text--small text--muted” datetime=”2015-03-11T10:57:55” title=”12 Mar 2015”>12 Mar 2015</time> <span class=”post__comments”><a class=”post__comment-link text--small text--muted” href=”...”>3 Comments</a></span> </div> </div> <div class=”post__content”> <p>Lorem ipsum</p> <p>Lorem ipsum</p> </div> </article>
BEM and markup
One reason why some people don’t like BEM or, I would say, approaches to BEM is the possibility of cluttering the HTML markup with sh*t tone of classes. In the HTML examples above, I deliberately used more classes for “styling” the content of the website to show you this argument can be, and often is, right. You can find yourself in situation when you have, say, button with classes like “btn btn–medium btn–pink btn—shadow”.
HTML:
<button class=”btn btn--medium btn--pink btn--shadow” type=”button” role=”button”>Contact</button>
I have to admit it. As you can see in the example above, the markup for the button element can look somewhat cluttered. However, before making any other judgments, let’s take a look under the hood – on the CSS.
CSS:
/* basic button */
.btn {
display: inline-block;
text-align: center;
border: 0;
border-radius: 3px;
cursor: pointer;
outline: 0;
transition: .2s;
vertical-align: middle;
}
/* size modifier */
.btn--medium { padding: 10px 22px; }
/* style modifier */
.btn--pink { background-color: #ed145b; }
.btn--pink:focus,
.btn--pink:hover { background: #f1437c; }
.btn--pink:active { background: #d71051; }
All the styles required for that button take about fifteen lines of code in your stylesheet. Does it sound as too much? Well, remember that the main btn class will be used on every button in the project so you don’t have to re-write the code again. Next, you will probably have two more classes for size like btn–small and btn–big, both with different padding. The last, you will also have few more style variations where you will change the background or color of the text. That’s all for the buttons in the whole project.
Conclusion
Can you see the benefit of BEM methodology now? No more re-writing the rules. No more additional lines of CSS to “maximize” your stylesheet. Everything defined only once and ready to use no matter what part of project you are working on. This is what modularity and portability is all about. Just remember to avoid going to the extremes. So, are you willing to “suffer” more “classy” markup with shorter, cleaner and faster loading stylesheet? Are you ready to BEM your CSS?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
