Padrão BEM de escrita de CSS
O Padrão BEM de escrita de CSS é uma metodologia de nomenclatura de classes CSS que visa tornar o código mais legível, escalável e fácil de manter.
BEM significa Block, Element, Modifier, que se refere a três tipos de entidades que compõem uma classe CSS:
- Bloco (block)
- Elemento (element)
- Modificador (modifier)
A nomenclatura de classes BEM segue uma convenção de nomeação específica, que inclui o nome do bloco, o nome do elemento e o nome do modificador, separados por hífens.
Bloco (block)
O bloco é a entidade principal e representa um componente independente da página, como um menu ou um formulário.
Elemento (element)
O elemento é uma parte do bloco e representa um elemento específico dentro do bloco, como um item de menu ou um campo de formulário.
Modificador (modifier)
O modificador é uma variação do bloco ou do elemento e representa uma mudança no estilo ou comportamento do componente, como um botão ativo ou um campo de formulário inválido.
Exemplo
Por exemplo, uma classe BEM para um botão de formulário pode ser .form-button para o bloco, .form-button__label para o elemento e .form-button--primary para o modificador.
O Padrão BEM de escrita de CSS é uma abordagem popular para o desenvolvimento de CSS escalável e fácil de manter, e é amplamente utilizado em frameworks como o Bootstrap 5 e o Tailwind CSS.