Modelo CSS BEM – Um guia para escrever CSS escalonável e sustentável

Neste artigo, vamos nos aprofundar na metodologia BEM (Block, Element, Modifier), uma convenção de nomenclatura CSS popular que ajuda você a escrever CSS limpo, estruturado e de fácil manutenção para grandes projetos. O BEM garante que seu código permaneça escalonável à medida que o projeto cresce e reduz as chances de conflitos de estilo.

1. O que é BEM?

BEM significa:

• Bloco: uma entidade autônoma que é significativa por si só, como um botão, menu ou formulário.
• Elemento: Uma parte do bloco que executa uma função específica, como um rótulo de botão ou um item de menu.
• Modificador: uma variação ou estado de um bloco ou elemento, como um botão desativado ou um item de menu destacado.

A metodologia BEM enfatiza a criação de código CSS reutilizável, previsível e sustentável.

Convenção de Nomenclatura BEM:

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

• Bloco: Representa o contêiner principal.
• Elemento: Segue o nome do bloco, separado por um sublinhado duplo (__).
• Modificador: Segue o nome do bloco ou elemento, separado por um hífen duplo (--).

2. Definindo a Estrutura

Vamos detalhar a estrutura do BEM com um exemplo.

Exemplo:

    

        
Home
        
About
        
Contact
    

Neste exemplo:

• Bloco: .menu é o bloco principal que representa o menu de navegação.
• Elemento: .menu__list e .menu__item são elementos dentro do bloco.
• Modificador: .menu__item--active é um modificador que indica o estado ativo do item de menu.

3. Blocos no BEM

Um bloco é um componente independente e reutilizável. Pense nisso como uma entidade independente que pode ser colocada em qualquer lugar do seu código sem se preocupar com o fato de seu estilo ser afetado por outros elementos.

Exemplo:

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

Aqui, .button é um bloco que define os estilos de um componente de botão. Você pode reutilizar esse bloco em várias partes do seu site.

4. Elementos em BEM

Um elemento é uma parte de um bloco que não tem significado independente. Está vinculado ao bloco e existe para executar uma função relacionada ao bloco.

Exemplo:

.button__icon {
    margin-right: 10px;
}
.button__label {
    font-size: 14px;
}

Aqui:

• .button__icon é um elemento dentro do bloco .button, representando um ícone no botão.
• .button__label é outro elemento, representando o rótulo de texto do botão.

5. Modificadores em BEM

Um modificador representa uma variação de um bloco ou elemento. Modificadores são usados ​​para alterar a aparência ou comportamento de um componente, como alterar a cor de um botão ou aumentar um elemento.

Exemplo:

.button--primary {
    background-color: #2ecc71;
}
.button--large {
    padding: 15px 30px;
}

Aqui:

• .button--primary é um modificador que altera a cor de fundo do botão.
• .button--large é outro modificador que aumenta o tamanho do botão.

Modificadores também podem ser aplicados a elementos:

.button__icon--small {
    width: 10px;
    height: 10px;
}

6. Benefícios de usar BEM

• Escalabilidade: O BEM foi projetado para ser escalável, tornando-o ideal para projetos maiores com muitos componentes.
• Reutilização: os blocos são independentes e podem ser reutilizados em diferentes partes de um projeto.
• Manutenção: BEM incentiva nomes claros e consistentes, facilitando a manutenção do CSS à medida que o projeto cresce.
• Previsibilidade: você pode facilmente saber quais elementos pertencem a quais blocos e entender suas variações com base no modificador.

7. BEM em ação

Vejamos um exemplo mais completo que inclui blocos, elementos e modificadores:

HTML:

    

        
Card Title
    
    

        
This is a simple card component.
    
    

        Read More
    

CSS:

/* Block */
.card {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

/* Elements */
.card__header {
    margin-bottom: 15px;
}
.card__title {
    font-size: 18px;
    color: #333;
}
.card__body {
    margin-bottom: 15px;
}
.card__text {
    color: #666;
}
.card__footer {
    text-align: right;
}

/* Modifier */
.card__button--primary {
    background-color: #3498db;
    color: white;
}

Neste exemplo:

• .card é o bloco que representa todo o componente do cartão.
• .card__header, .card__title, .card__body e .card__footer são elementos dentro do bloco de cartão.
• .card__button--primary é um modificador que aplica um estilo primário ao botão dentro do cartão.

8. Erros comuns a serem evitados no BEM

• Muitos elementos aninhados: Evite elementos profundamente aninhados, pois isso pode levar a nomes de classes desnecessariamente longos.
• Modificadores desnecessários: use modificadores apenas quando precisar alterar a aparência ou o estado de um bloco ou elemento.
• Combinando BEM com outras convenções de nomenclatura: Atenha-se ao BEM em todo o seu projeto para obter consistência.

Conclusão

A metodologia BEM é uma maneira poderosa de manter seu CSS organizado, previsível e escalonável. Ao dividir seus componentes em blocos, elementos e modificadores, você pode manter um código mais limpo e evitar conflitos de estilo, tornando o desenvolvimento mais rápido e eficiente conforme seu projeto cresce.

Siga-me no LinkedIn

Ridoy Hasan