CSS para o BEM – Block Element Modifier

No mundo do desenvolvimento web, a organização e a manutenção do código CSS podem ser importantes para garantir a eficiência e a escalabilidade dos projetos. Assim, com o crescimento dos sites e aplicações, torna-se cada vez mais difícil manter o estilo de maneira coesa e compreensível. Então, é nesse cenário que surgem padrões como o BEM (Block Element Modifier), criado pelo Yandex em 2009. O artigo CSS para o BEM – Block Element Modifier propõe explicar essa metodologia de nomenclatura que facilita a leitura e a reutilização do código, tornando a colaboração entre desenvolvedores mais eficaz e reduzindo a possibilidade de conflitos de estilo.

Desse modo o BEM se destaca por sua abordagem modular e flexível, dividindo o CSS em blocos independentes, elementos internos e modificadores de comportamento. Portanto, essa estrutura permite construir componentes de front-end de forma organizada e consistente, melhorando a manutenção e a evolução do código ao longo do tempo. Note, também, que aqui no blog temos diversos artigos sobre temas ligados a arquitetura, engenharia, boas práticas, e afins. No contexto desse temos: As 10 leis da usabilidade e Acessibilidade Web, que podem ser complementares.

O Padrão BEM

Como introduzimos, o padrão BEM oferece uma forma de escrita de CSS que torna mais fácil o entendimento do que está construído e as intenções envolvidas. Inventado pelo buscador russo Yandex em 2009 , ele é, para alguns, verboso e cansativo, mas entendo que pode ser muito útil se utilizado corretamente.

Esse são os 3 valores fundamentais do BEM:

• Facilidade: Trata-se apenas de uma convenção de nomes. Em muito pouco tempo alguém que saiba CSS o aprende.
• Modularização: Encaixe com diferentes componentes de front-end, algo tão popular nos dias atuais.
• Flexibilidade: Fácil construção, modificação e manutenção de estilos em sites.

Bloco, Elemento e Modificador (Block, Element and Modifier)

Mas além disso, ele também se estrutura em 3 grandes partes, sendo a primeira o Bloco. O bloco é uma entidade autônoma que é significativa por si só. Ela deve ser independente e pode ser ou se comportar como um componente de front. O exemplo a seguir exibe outras características além do Bloco, mas serve para um primeiro contato para entende-lo.

<div class="card card--featured">
    <div class="card__image">
        <img src="imagem.jpg" alt="Imagem do card">
    </div>
    <div class="card__content">
        <h3 class="card__title">Título do Card</h3>
        <p class="card__text">Texto do Card</p>
        <a href="#" class="card__link">Link do Card</a>
    </div>
</div>

A segunda grande estrutura é o Elemento. Trata-se de uma parte interna de um determinado bloco. Ela pode ser um texto, um conteúdo específico, um label, etc. Os elementos tem uma escrita padronizada desse modo:

bloco__elemento

Observe o código do bloco que possui o card__image, card__content, etc. Esses são exemplos práticos de elementos desse mesmo bloco card.

Por fim temos o Modificador, que é uma variante de comportamento de um bloco ou elemento. Esse por sua vez tem uma sintaxe diferente. No mesmo código acima veja, por exemplo, a imagem em destaque do cartão com card–featured. O padrão dessa sintaxe é:

bloco--modificador
bloco__elemento--modificador

Isso está BEM verboso

É simples notar que o padrão é fácil e poderoso. Mas um ponto importante é perceber que o padrão pode ser muito verboso. Se um determinado bloco tiver sub-blocos com sub-blocos é possível encontrar códigos assim, como o que segue abaixo. Ele possui card como nível 1, card__body no nível 2 e card__body__characteristic no nível 3. Isso é algo muito verboso e desnecessário, podendo ser substituído por card__characteristic apenas, mas isso vai no cuidado do desenvolvedor.

<div class="card">
    <div class="card__header">
        Personagem: Guerreiro
    </div>
    <div class="card__body">
        <div class="card__body__characteristic">
            Força: 10
        </div>
        <div class="card__body__characteristic">
            Agilidade: 8
        </div>
        <div class="card__body__characteristic">
            Inteligência: 6
        </div>
        <div class="card__body__characteristic">
            Carisma: 5
        </div>
        <div class="card__body__characteristic">
            Constituição: 7
        </div>
    </div>
    <div class="card__footer">
        Status: Vivo
    </div>
</div>

BEM tem classes demais

Outra questão é que pode ser necessário criar muitas classes apenas para indicar o modificador, quando em alguns casos os modificadores fazem a mesma coisa. Veja um exemplo

<div class="card">
    <div class="card__content--disabled">
        Conteúdo do Card
    </div>
</div>

<ul class="list">
    <li class="list__item list__item--disabled">
        Item da Lista
    </li>
</ul>

Entretanto essa estrutura pode ser substituida por um namespace, dando maior organização e reuso. Porém isso não faz parte da literatura do BEM mas pode ser confortavelmente utilizada nesse cenário.

<div class="card">
    <div class="card__content is-disabled">
        Conteúdo do Card
    </div>
</div>

<ul class="list">
    <li class="list__item is-disabled">
        Item da Lista
    </li>
</ul>

Conclusão de CSS para o BEM – Block Element Modifier

Adotar padrões de escrita de CSS, como o BEM, pode transformar significativamente a forma como desenvolvemos e mantemos nossos projetos de front-end. No artigo CSS para o BEM – Block Element Modifier, exploramos os fundamentos do BEM, incluindo seus três componentes principais: Blocos, Elementos e Modificadores, que formam a base para uma estrutura CSS bem organizada. Discutimos como o BEM prioriza facilidade, modularização e flexibilidade, permitindo que desenvolvedores construam e modifiquem sites de maneira eficiente. Exemplos práticos ilustraram a aplicação da nomenclatura BEM para criar componentes de front-end reutilizáveis e escaláveis, além de abordarmos críticas como a verbosidade e o excesso de classes, e sugerimos alternativas para melhorar a organização do código.

Ao integrar o BEM com outras boas práticas de desenvolvimento web, como usabilidade e acessibilidade, que discutimos em outros artigos do blog, é possível construir aplicações robustas e acessíveis para todos os usuários. A adoção do BEM pode ser um passo importante para aprimorar a qualidade e a eficiência do desenvolvimento front-end, tornando o código mais fácil de entender, manter e escalar. Considerar essas práticas em seus projetos contribuirá para um desenvolvimento mais sustentável e colaborativo, beneficiando toda a equipe envolvida.