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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

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!

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay