DEV Community

Cover image for Why BEM?

Why BEM?

hebaShakeel on October 21, 2020

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 ...
Read full post
Collapse
 
bonstine profile image
Bonnie Simon •

How do you apply this in a large project with many nested divs?

Eg :

container
    container__form
        container__form__input
            container__form__input__label
Enter fullscreen mode Exit fullscreen mode


`

You get what I'm saying, right? How do I go about this problem of eventually class name containing many words?

Collapse
 
kwiat1990 profile image
Mateusz Kwiatkowski • • Edited

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).

Collapse
 
bonstine profile image
Bonnie Simon •

Can you explain a bit more using the example I gave in the original post?

Thread Thread
 
kwiat1990 profile image
Mateusz Kwiatkowski • • Edited

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
Enter fullscreen mode Exit fullscreen mode

And using SASS you can write this one so:

.container {
  &__form {}
  &__input {}
  &__label {}
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
bonstine profile image
Bonnie Simon •

what if I have more divs inside form, say form_wrapper, form_inputfield etc ?

Thread Thread
 
kwiat1990 profile image
Mateusz Kwiatkowski •

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
Enter fullscreen mode Exit fullscreen mode

For clarity in this example I omitted most of the markup, so you can see the HTML structure and BEM structure.

Thread Thread
 
bonstine profile image
Bonnie Simon •

Oh okay I got it now! I one block isn't enough, you create another block inside it. Thanks man.✨

Collapse
 
hebashakeel profile image
hebaShakeel •

In BEM, everything is a class and nothing is nested.

Collapse
 
eavichay profile image
Avichay Eyal •

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

Collapse
 
traplocz profile image
Julian •

Great article about BEM

Collapse
 
hebashakeel profile image
hebaShakeel •

Thanks!

Collapse
 
meatboy profile image
Meat Boy •

BEM is for masochists. It's anti-component naming convention.

Collapse
 
bassohr profile image
Michael •

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.

Collapse
 
ramiyushuvaev profile image
Rami Yushuvaev •

You should also check the new "Cube CSS" methodology.