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!

Billboard image

Imagine monitoring that's actually built for developers

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

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

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay