'BEM' do CSS - Boas Práticas

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!