Using BEM (if You Truly Must)
What is BEM?
BEM is a methodology for creating CSS architecture that allows for cleaner, organized, and easier to understand code.
Why use BEM in 2019?
Nowadays, with frameworks such as React and Angular taking the center stage when it comes to web application creation, there has been a shift in focus from traditional global CSS methodologies to local more local and encapsulated forms of CSS — where CSS is applied on to a single component at a time instead of in some huge file shared amongst all elements of an application. I’m talking about CSS-in-JS solutions such as CSS Modules, frameworks such as Styled Components, Emotion, Radium, Glamorous. If constructing an application on your own or joining a company where the use of cutting-edge tech is paramount, there are very few cases where I would advise you NOT to use these alternative CSS solutions. But traditional CSS is still out there. It is omnipresent. Joining on a project that is already in motion, or getting a job with an established tech company, chances are there is an element of global CSS in use. If you are creating additions to existing CSS code, it is better to follow an organized principle than to have no principle at all. And there is no better principle to follow than BEM.
Where can I get BEM?
BEM doesn’t require you to download or install anything. It is simply a naming convention that, if followed, allows you to create code in an organized fashion. You can find in-depth information how you can follow this methodology here:
https://en.bem.info/methodology/quick-start/
Why should I use BEM?
The reasons are numerous. It doesn’t require you to download any libraries or frameworks — all it requires you to do is write CSS code you were already going to write anyway… but to name your CSS classes in a way that makes things much easier to adapt to and use.
BEM stands for Block, Element, and Modifier. It encapsulates everything there is to know about the methodology, as everything that can be created in CSS is split up and sorted into one of those 3 categories:
BLOCKS are standalone entities that are meaningful on their own. These entities are often times able to be re-used in many different areas on a site. They are typically comprised of one or more smaller parts, but it isn’t required. If your app has a navbar, for example, that would be considered a block. A form, or menu, sometimes an input field or logo or button, these could all fall under the category of a block.
ELEMENTS are smaller items that exist within a block that are not meaningful on their own. They cannot be seen or used outside of the context of their block. An example of this a Shopping Cart comprised of multiple items. The Shopping Cart is a block, as it is an entity that carries meaning on its own. The items within the shopping cart only carry value within that cart, therefore, these are elements.
A MODIFIER changes the way a block or element appears. If you have a black logo, for instance, that appears both on your front page and on your Contact page. You would like to keep the logo on the front page black, but on your Contact page, you’d like it to be blue. You can add a ‘logo — blue’ modifier to the block as it appears on your Contact page to change its color there.
Here’s an example of a single, un-styled page of an app:
Being that there are no CSS elements anywhere, the items on the page are unstructured and all over the place.
As you can see, this page is nothing more than a title, a form, and a div. How would the BEM methodology have you go about styling this page?
First thing’s first, add a class name to each block item on the page. Falling under the category of block here are the title, the form, and the div containing the beekeeper statistical information. The block names can contain letters, digits, or dashes. No underscores. Here is our result:
Not the most elegant looking website, but it’s a great deal better than it was. Now we move on to the elements associated with each block item:
- Underneath the title block is a subtitle
- Within the form block are 2 labels, 2 input fields, and a submit button
- Within the info-container block are two paragraph nodes (which now that I think about it, should probably be an unordered list) and a refresh button
Notice that a few of these elements are repeated in some places. Notably the button on the form and the button on the info-container. The idea of an element is that is particular to a block and does not take well to being reused. But we could reuse buttons in a million different places throughout the site. So should these remain elements? My answer is no. Since they would take well to reuse, I chose to make them blocks instead.
Elements are named with the title of the block they belong to, followed by two underscores, then the name of the element. For instance, an input in the form would be given the class name ‘form__input’.
Note that elements don’t have to be enclosed within a block in order to be a part of said block.
Finally, let’s look into how modifiers are implemented. Let’s say we want the title text for this particular page to be blue. Also, let’s say that our email system is down so the submit button on the form is to be disabled. Finally, let’s say that the second item in our info-container’s list should be red.
To add a modifier to an element or block, simply use the name of the block or element, followed by two dashes, and the descriptive term for the modification taking place. For example, a class for making the title block blue would be named ‘title — blue’.
Implementing BEM isn’t difficult at all. In the situation where you have no choice but to work with traditional CSS code directly, this would maximize your ability to make your styling modular and iterative.
