At Adaptive Lab we’re constantly on the lookout for new and different ways of doing things. Recently we have been having a look at our front end tools and methods. This has led us to experiment with new and different ways of architecting our CSS. One of the options we have been exploring is BEM.
BEM stands for Block, Element and Modifier. It can be used for creating and organising scalable CSS for large projects.
I am sure everyone has some understanding or awareness of CSS, but it is important to recognise it’s different forms, uses, strengths and weaknesses.
CSS stands for Cascading Style Sheet and is a simple language that can be used for styling and formatting a HTML document. If you’re unaware of the effectiveness of CSS, then take a look at Css Zen Garden which has some beautiful examples and can give you an idea of the power of the stylesheet.
CSS is a very basic language, and in an attempt to make it more powerful CSS preprocessors such as SASS and LESS have been created. These preprocessors bring CSS many notable add-ons, such as mixins, nesting and variables. These preprocessors have the potential to greatly increase the maintainability of the code we write.
Despite these dynamic and significant new tools, CSS in its purest and newest forms still has weaknesses. Unlike object-oriented programming, CSS has very few rules. To an extent you can order things as you please and you’re able to name things whatever you like, which normally results in contextual naming. However In addition to these benefits, as a result of preprocessors a new problem has arisen from the ability to nest.
By deeply nesting our CSS, especially our contextually named CSS we are inadvertently tightly coupling our stylesheets with the DOM. This means that as soon as the structure of the HTML is changed, the CSS is going to break. Anyone who has worked on large and long life projects will recognise that this lack of maintainability is potentially an extremely time consuming problem.
Luckily there is now lots of new thinking and methods around how to solve this problem. As mentioned above, one that I have been exploring recently is BEM — Block, Element and Modifier.
BEM is essentially a stylesheet naming methodology. A simple set of rules that will bring more transparency and meaning to your CSS classes.
This has many advantages, such as making your CSS more maintainable, readable and more modular. Modular code will help avoid the tight coupling with the DOM.
So what are some of the basic principles of BEM?
BEM naming is made up of Blocks, Elements and Modifiers.
I will use the Adaptive Lab website to demonstrate these individual parts.
A Block is an independent entity on your page.
An example of a block is a sign-up form.
This block could be represented in code as:
<div class=“form”> … </div>
An Element is a component within a block that performs a certain function.
Examples of elements within our sign-up form are the input field and the button.
These elements can be represented in code as:
<div class=“form”> <input class=“form__text-field”> <button class=“form__button”></button> </div>
A Modifier is a variation in style of Blocks or Elements.
An example of this could be the hover state on the button field.
The newly styled button could now be represented in code as:
<div class=“form”> <input class=“form__text-field”> <button class=“form__button—white”></button> </div>
It is equally correct to apply modifiers to Blocks, meaning if a white form was required, the Modifier would be applied directly to the block.
<div class=“form—white”> <input class=“form__text-field”> <button class=“form__button”></button> </div>
To summarise, Blocks and Elements make up the content of the page and Modifiers are used to provide slight variations in style to these parts.
There are of course arguments against BEM, the most common of which is something called class bloat. By putting all of this extra information in your CSS names, you are of course making your HTML more bulky and some may argue, complicated.
I won’t lie to you, I can understand this concern, especially if you’re using templates alongside BEM flavoured CSS, it can all get a little cumbersome. However, I personally think that the pros heavily outweigh this con. In fact I would argue that the ability to understand the CSS, purely from reading the HTML is very valuable, especially when working with multiple developers.
There are of course other options out there and I am only skimming the surface with BEM. SUIT has been flagged as a strong contender, as are, I am sure many of the other naming methodologies and frameworks available. We will continue to explore and learn, but for now BEM is a great asset to us.
I am not stating that BEM is the only way of achieving uniform and maintainable CSS, but it is a tool that has proven itself to be very effective in achieving exactly this for the Adaptive Lab development team.
It has started us on a journey that has ultimately made all of our developers more considered in how they write their CSS, and take more joy in the architecture of this seeming simple language. It points out that when there are no rules, there is normally more space for methods.
We at Adaptive Lab will continue to experiment with BEM and other tools on the table. Take a look at what we think about SUIT.