What is BEM?
BEM stands for Block, Element, Modifier.It is a popular naming convention for classes in HTML and CSS. Its goal is to help developers better understand the relationship between the HTML and CSS in a given project.
Why should you use BEM?
CSS is a language that’s easy to learn but very hard to maintain. As the project grows larger, without proper structure, maintaining CSS is unbearable, hence we use the BEM methodology to make CSS maintainable.
Benefits of using BEM
BEM provides a modular structure to your CSS project. Because of its unique naming scheme, we won’t run into conflicts with other CSS names. BEM also provides a relationship between CSS and HTML. Ambiguous names are hard to maintain in the future.
Overall, BEM is my favourite CSS naming scheme, and I strongly suggest you try using it too!
It will save you SOOO much debugging time in the future.
Example
/ * Block Component * /
.btn{}
/ * Element that depends upon the block * /
.btn__price{}
/ * Modifier that changes the style of the block * /
.btn--orange {}
.btn--big {}
In this CSS methodology, a block is a top-level abstraction of a new component. This block can be thought of as a parent.
Elements, or child items are placed inside the block and can be denoted by two underscores following the name of the block.
Modifiers can modify the block so that we can style that particular component without infliction changes on a completely unrelated module. This is done by appending two hyphens to the block.
Another smart part of BEM is that everything is a class and nothing is nested. That makes CSS specificity very flat and low, which is a good idea.
BEM is extraordinarily useful for constructing scalable and maintainable interfaces where everyone on the team should have a clear idea of how things can be improved. This is because a great deal of front end development is not just about the nice tricks that solve one little problem in the short term; we need agreements, promises and binding social contracts between developers so that our codebase can adapt over time.
Thank You!
Top comments (14)
Subscribe
"Taking on the world, one challenge at a time" Loves CSS, React, JS and Nodejs. Junior Computer Engineer Undergrad.
-
Location
India
-
Joined
How do you apply this in a large project with many nested divs?
Eg :
container container__form container__form__input container__form__input__label
`
You get what I'm saying, right? How do I go about this problem of eventually class name containing many words?
-
Work
Frontend Developer
-
Joined
There is no such thing as nesting elements. Ideally there can be only a block, 1st level elements of this block and a modifiers of a block and/or those elements.
I was involved in numerous enterprise projects as frontend developer and we didn't encounter any problems while using BEM. For me it's introduce a very clear and logic structure, which can be easily read (well in my case at least).
"Taking on the world, one challenge at a time" Loves CSS, React, JS and Nodejs. Junior Computer Engineer Undergrad.
-
Location
India
-
Joined
Can you explain a bit more using the example I gave in the original post?
-
Work
Frontend Developer
-
Joined
BEM avoids nested structures, so in your example the right visualization of all elements looks rather like this:
.container .container__form .container__input .container__label
And using SASS you can write this one so:
.container { &__form {} &__input {} &__label {}}
"Taking on the world, one challenge at a time" Loves CSS, React, JS and Nodejs. Junior Computer Engineer Undergrad.
-
Location
India
-
Joined
what if I have more divs inside form, say form_wrapper, form_inputfield etc ?
It's up to you what you decide but as long as nested elements are part of your block element, you should use block__element pattern.
If you start to have problems with this flat structure, it is a good sign that you should start a new block - you can use block inside another block:
form.form label.form__label input.form__input button.button span.button__label
For clarity in this example I omitted most of the markup, so you can see the HTML structure and BEM structure.
"Taking on the world, one challenge at a time" Loves CSS, React, JS and Nodejs. Junior Computer Engineer Undergrad.
-
Location
India
-
Joined
Oh okay I got it now! I one block isn't enough, you create another block inside it. Thanks man.✨
A Computer Science Student
-
Location
India
-
Education
Bachelor of Technology in Computer Science Engineering
-
Joined
In BEM, everything is a class and nothing is nested.
I would like to share a different opinion. IMO, BEM is one of the WORST ways to implement a maintainable code. Here's something I wrote a while ago about it.
eavichay.svbtle.com/never-bem-again
A Computer Science Student
-
Location
India
-
Education
Bachelor of Technology in Computer Science Engineering
-
Joined
Thanks!
Creative Developer / Frontend Architect / UX Enthusiast
-
Location
Wismar
-
Work
Web Development at click solutions
-
Joined
No, it is pure component based naming. But it represents the small to complex style components of the design system. You should appreciate reusability and atomic design before starting to apply BEM.
You should also check the new "Cube CSS" methodology.
For further actions, you may consider blocking this person and/or reporting abuse
