DEV Community

Discussion on: Why BEM?

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