METODOLOGIA BEM - BLOCO ELEMENTO MODIFICADOR

Boas práticas
A convenção de nomeclatura usada no mundo todo. CSS BEM Bloco, Elemento e Modificador

Em um projeto componentizado o:

BLOCO - Pode ser um componente
ELEMENTO - São os filhos do bloco
MODIFICADOR - Utilizados para descrever estados, como por exemplo "disabled" "dark"

Como montamos a classe:

.bloco__elemento--modificador

Como isto fica em nosso HTML:

<div class="bloco">
   <div class="bloco__elemento"></div>
   <div class="bloco__elemento2"></div>
   <div class="bloco__elemento3">
       <button class="bloco__elemento3--disabled"></button>
   </div>
</div>

Como isto fica em nosso SASS:

.bloco {
      &__elemento {}
      &__elemento2 {}
      &__elemento3 {
           &--disabled {}
      }
}

ou CSS

.bloco {}

.bloco__elemento {}

.bloco__elemento2 {}

.bloco__elemento3 {}

.bloco__elemento3--disabled {}

Regras e melhores práticas:

• Não replique hierarquia. Ex:

<div class="bloco">
   <div class="bloco__elemento">
       <div class="bloco__descricao"></div>
   </div>
   <div class="bloco__elemento2"></div>
   <div class="bloco__elemento3">
       <button class="bloco__elemento3--disabled"></button>
   </div>
</div>

Explicação: na classe bloco_descricao perceba que ela não recebeu a classe pai bloco_elemento, esta é uma forma de não tornar classes enormes com filhos e mais filhos. Sempre que criamos um elemento filho podemos deixar ele somente com a classe do pai.

• Você pode utilizar nome composto para classes que precisam de uma descrição melhor, como por exemplo:

.bloco-a__descricao-image

Espero que tenha ajudado!:) Deixo aqui meu linkedin e github ❤️