DEV Community

Discussion on: Why BEM?

View 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
 
hebashakeel profile image
hebaShakeel •

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

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