DEV Community

Stefany Repetcki
Stefany Repetcki

Posted on

METODOLOGIA BEM - BLOCO ELEMENTO MODIFICADOR

#writing #discuss

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)