DEV Community

Cover image for 'BEM' do CSS - Boas Práticas
Douglas Toledo
Douglas Toledo

Posted on

6 2

'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)

Alt Text

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:

Alt Text

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!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (3)

Collapse
 
italocanturil profile image
Italo Canturil

Bom demais o post DW

Collapse
 
dwtoledo profile image
Douglas Toledo

Obrigado Cant. #TamoJunto

Collapse
 
marcythany profile image
Marcy Sobral

Muito obrigade pela explicação, vou começar a usar nos meu projetos!

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video