Escrever CSS limpo e organizado é importante, especialmente para projetos maiores. Uma das melhores maneiras de estruturar seu CSS é usando a convenção de nomenclatura BEM. Neste artigo explicaremos o que é BEM, por que é importante, seus prós e contras, e mostraremos como usá-lo com dois exemplos.

O que é BEM?

BEM significa Bloco, Elemento e Modificador. É um sistema de nomenclatura para escrever nomes de classes CSS que torna seu código mais fácil de entender e manter. O principal objetivo do BEM é ajudar os desenvolvedores a escrever CSS reutilizável, modular e escalável.

1. Bloco: Um componente independente que faz sentido por si só (por exemplo, um botão ou um formulário).
2. Elemento: Uma parte do bloco que não tem significado por si só e depende do bloco (por exemplo, um ícone de botão).
3. Modificador: Uma versão diferente de um bloco ou elemento (por exemplo, um botão com uma cor diferente).

.block {}
.block__element {}
.block--modifier {}

Por que usar o BEM?

Usar BEM ajuda a evitar CSS confuso e confuso. Traz vários benefícios:

• Consistência: Todos os nomes de classes seguem o mesmo padrão, tornando seu código mais previsível e fácil de entender.
• Reutilização: Blocos e elementos podem ser reutilizados em diferentes partes de um projeto.
• Fácil manutenção: Outros desenvolvedores podem ler e modificar seu código facilmente.
• Evita conflitos: O BEM ajuda a evitar conflitos de CSS entre diferentes componentes.

Como usar o BEM: exemplos

Exemplo 1: um botão simples

Vamos começar com um bloco de botões básico e ver como o BEM funciona.

HTML:

  Submit

CSS:

.button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
}

.button--primary {
  background-color: blue;
}

Explicação:

• button é um bloco, representando o estilo do botão principal.
• button--primary é um modificador, aplicando um fundo azul a esta versão específica do botão.

Exemplo 2: um componente de cartão

Agora vamos criar um bloco de cartão com título e descrição (elementos) e uma versão em tamanho pequeno (modificador).

HTML:

  
Title
  
This is a description.

CSS:

.card {
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

.card__description {
  font-size: 14px;
  color: #666;
}

.card--small {
  padding: 10px;
}

Explicação:

• card é um bloco que representa o componente do cartão.
• card__title e card__description são elementos, partes específicas do cartão.
• card--small é um modificador, reduzindo o preenchimento para a versão menor do cartão.

Prós e contras do BEM

Prós:

1. Organizado e consistente: Ajuda a manter seu CSS limpo e bem estruturado.
2. Evita conflitos de CSS: Reduz o risco de estilos de um componente afetarem outro.
3. Reutilização: Blocos e elementos podem ser usados ​​em vários locais em um projeto.
4. Fácil de manter: Torna mais fácil atualizar e gerenciar CSS, mesmo à medida que seu projeto cresce.

Contras:

1. Nomes de classes longos: Os nomes de classes BEM podem ser bastante longos, o que pode parecer complicado no início.
2. Curva de aprendizado: Leva algum tempo para se acostumar com a estrutura BEM, especialmente se você for novo em CSS.

Por que o BEM é importante?

BEM é uma metodologia CSS popular porque promove código limpo e escalonável. Em grandes projetos, o CSS pode rapidamente se tornar difícil de gerenciar. Com o BEM, cada nome de classe é único e descritivo, o que facilita a compreensão do propósito de cada classe. Também evita problemas como conflitos de estilo e facilita a colaboração entre desenvolvedores.

Se você deseja uma maneira consistente e modular de escrever CSS, BEM é uma excelente escolha. Pode levar algum tempo para aprender, mas a longo prazo, você economizará tempo e tornará seu CSS mais sustentável.

Conclusão

A convenção de nomenclatura BEM é uma ótima maneira de manter seu CSS organizado e escalonável. Ajuda a evitar conflitos, torna seu código mais fácil de manter e promove componentes reutilizáveis. Embora possa parecer desafiador no início devido aos nomes longos das turmas e à curva de aprendizado, os benefícios superam em muito as desvantagens. Se você deseja escrever CSS mais limpo e melhorar a colaboração em seus projetos, experimente o BEM!

Siga-me para mais atualizações!

Espero que você tenha achado este artigo útil para entender as convenções de nomenclatura CSS BEM. Se você quiser se manter atualizado sobre mais artigos como este, dicas e insights de desenvolvimento web, siga-me. Sinta-se à vontade para entrar em contato se tiver alguma dúvida ou sugestão. Eu adoraria ouvir de você!