DEV Community

Stefany Repetcki
Stefany Repetcki

Posted on

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

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

Como isto fica em nosso SASS:

.bloco {
      &__elemento {}
      &__elemento2 {}
      &__elemento3 {
           &--disabled {}
      }
}
Enter fullscreen mode Exit fullscreen mode

ou CSS

.bloco {}

.bloco__elemento {}

.bloco__elemento2 {}

.bloco__elemento3 {}

.bloco__elemento3--disabled {}
Enter fullscreen mode Exit fullscreen mode

metodologia bem

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

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

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

Top comments (0)