Introdução

Ao trabalhar em um projeto de desenvolvimento web em larga escala, é essencial ter uma abordagem consistente e organizada para a estilização. A convenção de nomenclatura BEM (Block-Element-Modifier) é uma maneira bem aceita de alcançar isso. O termo BEM significa Bloco-Elemento-Modificador, que é uma convenção de nomenclatura para nomes de classes CSS que ajuda a manter uma estrutura clara e consistente na estilização de um projeto. Neste artigo, vamos dar uma olhada mais de perto no BEM.

A Convenção BEM

O BEM usa nomes de bloco, elemento e modificador para construir nomes de classes CSS, separados por duplos sublinhados (__) e hífens (-). É baseado na ideia de decompor uma página da web em blocos menores e reutilizáveis de código. Cada bloco é composto por elementos e modificadores que podem ser usados para criar variações desse bloco. Essa abordagem facilita a compreensão do objetivo de cada classe e como elas se relacionam umas com as outras. Permite que os desenvolvedores entendam rapidamente a estrutura da estilização de um projeto e façam mudanças de forma eficaz.

Sintaxe:

block__element--modifier

Vamos entender os componentes do BEM em detalhes:

Componentes do BEM:

• Blocos: Um bloco representa a abstração de mais alto nível do componente. É representado por uma única palavra e representa uma entidade autônoma que é significativa por si só. Por exemplo, um botão, um formulário, um cabeçalho, etc. O bloco segue a convenção de nomenclatura em CSS como:

.block {
    ...
}

• Elementos: Um elemento representa uma parte do bloco. É representado pelo nome do bloco seguido por dois sublinhados (__) e o nome do elemento. Por exemplo, se o nome do bloco for 'button', o nome do elemento pode ser 'label' ou 'icon'

Usando a convenção BEM, podemos adicionar uma classe a um elemento como:

.block__element {
    ...
}

Modificadores: Um modificador representa uma variação do bloco ou elemento. É representado pelo nome do bloco ou elemento seguido de um único hífen (-) e o nome do modificador. Um modificador pode ser usado para alterar a aparência ou comportamento de um bloco ou elemento. Por exemplo, um botão pode ter diferentes variações como 'primary', 'secondary', 'disabled', etc.

Os modificadores seguem a convenção de nomenclatura em CSS como:

.block__element--modifier {
    ...
}

<!-- OR -->
.block--modifier {
    ...
}

Por que BEM é útil?

• Clareza: BEM torna claro quais estilos CSS se aplicam a quais partes do código HTML, tornando fácil de entender e manter.
• Reutilização: BEM incentiva o uso de blocos de código reutilizáveis, que podem ser facilmente reutilizados em diferentes partes de um site ou aplicativo.
• Escalabilidade: BEM ajuda a manter a consistência em uma grande base de código, tornando mais fácil escalar e manter projetos grandes.
• Modularidade: BEM permite separar a apresentação e o comportamento de um componente, tornando fácil alterar a aparência e o estilo de um componente sem afetar sua funcionalidade.
• Namespaces: BEM fornece um namespace claro para cada elemento e modificador, evitando colisões de nomes e facilitando o rastreamento de suas classes.
• Amigável ao desenvolvedor: A nomenclatura da classe é intuitiva e fácil de seguir e torna claro como as diferentes partes do formulário estão relacionadas entre si. Isso torna amigável ao desenvolvedor e fácil de codificar.
• Ao usar BEM, os desenvolvedores podem escrever código modular, reutilizável e fácil de manter, o que pode ajudar a aumentar a produtividade e reduzir o tempo de desenvolvimento.

Passos para implementar BEM

• Comece definindo o bloco: Um bloco deve ser representado por uma única classe CSS e deve ser prefixado com o nome do bloco, como "header", "button" ou "form".
• Identifique os elementos dentro do bloco: Os elementos são as partes do bloco que o compõem. Os elementos devem ser representados por uma única classe CSS e devem ser prefixados com o nome do bloco, seguido de dois sublinhados e, em seguida, o nome do elemento, como "header_logo".
• Defina os modificadores: Os modificadores devem ser representados por uma única classe CSS e devem ser prefixados com o nome do bloco ou elemento, seguido de dois traços e, em seguida, o nome do modificador, como "button--primary".
• Aplique a convenção de nomenclatura BEM às suas classes CSS: Depois de definir seus blocos, elementos e modificadores, você deve aplicar a convenção de nomenclatura BEM às suas classes CSS.
• Use as classes BEM em seu HTML: Depois de definir suas classes BEM, você deve usá-las em seu HTML para aplicar os estilos apropriados aos seus elementos. Você deve usar a classe do bloco no elemento de nível superior, a classe do elemento nos elementos filhos e a classe do modificador em quaisquer elementos que precisem ser modificados.
• Mantenha a estrutura consistente: Seja consistente com a estrutura e convenções que você escolheu em todo o seu projeto, isso tornará mais fácil para outros desenvolvedores entender e trabalhar com a base de código.
• Reutilize as classes: Reutilize as classes sempre que possível para manter a consistência no design e reduzir a quantidade de código.