For many years CSS code has been written in very much an opinionated way, this caused lack of structure for large codebase and the accompanying headache that comes with trying to fix things that breaks. The introduction of BEM helps a software developer in understanding whatever they're trying to do/did in a codebase. BEM is important because apart from it becoming readable it also introduces modularity to your project. You do this by naming your CSS classes according to the components they represent along with its nested elements and or children.
This article aims to give a high level overview of the BEM methodology. The article only contains examples of situations that'll enable you see the full benefits of using this methodology. To get an introductory understanding of BEM, Preprocessors and component driven design check the end of this article to get a curated list.
Ideally this was written with the mindset that you understand the in's and out's of CSS, using preprocessors such as SCSS and also working with the 4 -1 pattern folder structure(read about it in Jonathan snook book.) At the end of this article you'll be able to recognise the pattern formed by using BEM methodology.
Why is BEM methodology important?
BEM is important for a number of reasons but are not limited to:
- It has a well defined and understandable structure
- Reusability: Ability to reuse components that have been designed.
- It is modular in nature. Blocks are not dependent on the nature of the element in the page.
Table of content
- What is BEM.
- When to use BEM.
- Example of BEM in an SCSS codebase.
What is BEM
As stated earlier BEM is an acronym of Block Element Modifier. It's a CSS style guide developed by Yandex to make writing CSS easier and less complicated. Since its birth BEM has been adopted by teams and organisation worldwide.
BEM really explains how CSS code should be structured:
- The Block represents a standalone entity. The block is mostly found in the top layer of your component. Example of a block is your
button,navigationorheadersection of your code. Blocks are always unique during naming.
The Element part is an entity that depends on a block, same way a child node depends on a parent node. An Element can't be found outside a Block. Examples of an Element would include
button__text,navigation__listandheader__logo. An Element is usually distinguishable from a block through the__that is suffixed after the Block name.Modifier defines the style, appearance or behaviour of a Block, Element or both. A 'double hyphen'
--denotes a Modifier and is quickly recognisable in code. The basic work of a Modifier is to add functionality and styles to a Block or an Element.
When to use BEM
If you really want to spend less time debugging in the future, it is recommended to start using the methodology right away. Early adoption of BEM would save you some precious time in the future when going through the same codebase to make insertions or deletions.
There are times during projects that you'll need to reuse blocks of code across multiple pages. During such times it's essential to consider how modular your code is for easier maintainability and scalability. BEM offers you the opportunity to create scalable and maintaInable code.
Example of BEM in an SCSS codebase
When you combine preprocessors like SCSS with BEM it really brings out the beauty in your code structure and also shows how clean your code can be. Take a look at the example below and see how aligned your code becomes:
//This represents the Block
.feature {
font-size: 1.5rem;
padding: 2.5rem;
text-align: center;
border-radius: 3px;
transition: transform .3s;
//This is an example of an element
&__icon{
font-size: 6rem;
margin-bottom: .5rem;
background-image: linear-gradient(to right, $color-primary-light);
display: inline-block;
}
//This represents the modifier
&--1{
background-image: linear-gradient(to right bottom,
rgba($color-secondary-light, .85),
rgba( $color-secondary-dark, .85));
}
}
With this kind of structure in place it becomes easy for you to scale and also reuse components found in the project.
In conclusion:
BEM provides a structured way for you to write your codes. Structured code cuts down debugging time and makes it more saner for whoever picks up the project.
To get more reading on this subject checkout the following articles: