BEM: A Class Naming Convention
Why do we need a naming convention?
When working on projects and developing extensive web applications, the codebase can become massive in no time. It then becomes daunting to look for an error or a helpful function/class. Soon enough, it feels like we are looking for a needle in a haystack. To avoid this, we need to stick to strict naming conventions.
Naming conventions make our code more readable, organized, and searchable. BEM is a protocol that exists for naming CSS classes.
What Is BEM Methodology?
When you are building smaller websites, how you organize your styles is usually not a big problem. You create your usual files, write all the needed CSS, and that’s all. However, when it comes to larger, more complex projects, how you organize your code becomes crucial. How the code is structured is even more important if you are working in a team consisting of multiple front-end and back-end developers.
The primary purpose of BEM methodology is to make names of CSS selectors as informative and transparent as possible.
About BEM
BEM stands for Block, Element, and Modifier. It’s a CSS naming convention for writing cleaner and more readable CSS classes.
BEM also aims to write independent CSS blocks in order to reuse them later in your project.
Why BEM
BEM naming provides three specific benefits:
1. Modularity
Block styles are never dependent on other elements on a page, so you will never experience problems from cascading.
You also get the ability to transfer blocks from your finished projects to new ones.
2. Reusability
Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain.
With a set of style guidelines in place, you can build a library of blocks, making your CSS super effective.
3. Structure
BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.
How It Works
The BEM protocol is divided into three components:
- Block: The outermost parent element of the component is defined as the block.
- Element: Inside of the component may be one or more children called elements.
- Modifier: Either a block or element may have a variation signified by a modifier.
If all three are used in a name it would look something like this:
[block]__[element]--[modifier]Block
Blocks is an independent entity, a “building block” of an application. A block can be either simple or compound (containing other blocks).
Blocks are named with a hyphen in between. This maintains consistency with general CSS property names.
Take a look at a few block examples:
- a content
- a menu
- a search form
{block name}Element
An element is a part of a block that performs a certain function. Elements are context-dependent: they only make sense in the context of the block that they belong to.
Take a look at a few element examples:
- a content article
- a menu item
- a search input field
{block name} + __ + {element name}Modifier
A modifier is how we represent the variations of a block. If you’ve ever used Bootstrap, then the best example would be the button sizes. Button sizes are just size variations of the button itself, which makes it the modifier:
Take a look at a few modifier examples:
- a content featured article
- a menu link
- a search field with or without icon
{block name} + __ + {element name} + -- + {modifier name}Reference
Thanks for reading.
