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 ❤️
Top comments (0)