O que é BEM?
É uma metodologia de escrita de classes no CSS que ajuda na criação de componentes reutilizáveis e boas práticas no desenvolvimento front-end.
É fácil!
Apenas uma convenção de nomes.
É modular!
Código independente e reutilizável.
É flexível!
Use da maneira que preferir.
É internacional!
Entenda rapidamente o CSS do mundo todo.
'B' vem de Bloco (block)
'E' vem de Elemento (element)
'M' vem de Modificador (modifier)
Blocos > São entidades autônomas que são significativas por si só. Exemplos: Menu, Rodapé, Cabeçalho, Newsletter, etc.
Elementos > São partes de um bloco (elementos filhos, netos, etc), Exemplos: Items de um Menu, texto Copyright de um Rodapé, Logo de um Cabeçalho, Formulário de um Newsletter, etc.
Modificadores > Uma variante de um bloco ou elemento padrão. Exemplos: um Botão Verde (padrão é branco), um Item de Menu com Link Desabilitado (o padrão é habilitado), etc.
Nomeando classes conforme o 'BEM’:
Para os blocos não há diferenças dos nomes que hoje você já escolhe no CSS (exemplo: "bloco"), ou seja:
- Se temos uma divisória para a newsletter podemos nomeá-la como "newsletter";
- Se temos um menu de navegação, podemos nomeá-lo como "menu" e assim por diante.
Para o(s) elemento(s) de um bloco usamos por convenção 'BEM' o nome do bloco seguido de 2 underlines e o nome do elemento (exemplo: "bloco__elemento"), ou seja:
- Se temos um bloco de menu com vários elementos que são links de navegação, podemos nomeá-los como "menu__links";
- Se temos um bloco de sessão newsletter com um elemento formulário de cadastro, podemos nomeá-lo como "newsletter__formulario" e assim por diante.
Para o(s) modificador(es) de um elemento usamos por convenção 'BEM' o nome do elemento seguido de 2 hífens e o nome do modificador (exemplo: "bloco__elemento--modificador"), ou seja:
- Se temos um botão de formulário que já possui uma formatação padrão, mas queremos que ele seja verde, podemos nomeá-lo como "formulario__bttn--red";
- Se temos um menu de links, mas um deles está desabilitado, podemos nomeá-lo como "menu__links--disabled" e assim por diante.
‘BEM’ na prática:
Observe a página abaixo:
Para os blocos (em verde), elementos (em azul) e modificadores (em vermelho) os nomes práticos seriam:
Parabéns!!!
Fico muito feliz que chegou até o final dessa publicação.
Espero que você tenha aprendido muito!
Quer aprender mais?
Te convido a ver a Live sobre 'BEM - Boas Práticas em CSS' que fiz lá no meu canal da Twitch. O link da live é esse: https://www.twitch.tv/videos/906196998?t=0h2m48s
Segue também a apresentação que foi preparada.
Um grande abraço!
Top comments (3)
Bom demais o post DW
Obrigado Cant. #TamoJunto
Muito obrigade pela explicação, vou começar a usar nos meu projetos!