8 minutos de leitura
Autor(a)
Vivo no 220v, sempre atrás de um filme/rolê novo e codando desafios aleatórios em JavaScript. Adoro fazer sites e falar/dar aulas sobre isso no @nubank, meu canal no YouTube DevSoutinho e na @alura
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Se você está buscando entender o que é BEM CSS e como aplicar o padrão BEM para organizar, modularizar e evitar conflitos no seu CSS, este artigo traz conceitos, exemplos práticos e as melhores práticas para criar componentes CSS reutilizáveis.
Vamos responder à intenção mais comum sobre o tema: como utilizar a nomenclatura BEM (Block Element Modifier) para garantir uma arquitetura CSS escalável e consistente.
Mais um dia típico na rotina de desenvolvimento: ao chegar ao trabalho, encontramos no mural de tarefas a solicitação de criação de uma nova funcionalidade.
Nesta tela, temos diversas coisas: o menu, o logo, a busca… Mas o nosso foco é a área de informação do usuário logado.
Nosso objetivo ao criar essa área é garantir que ela contenha:
Mas como podemos fazer isso?
O primeiro passo é entender como separar os elementos HTML que irão compor essa estrutura. Para isso, pode-se fazer um esboço do layout em uma ferramenta digital ou mesmo no papel.
Agora, com tudo separado, fica mais claro que precisamos de pelo menos três tags:
Para facilitar o agrupamento desses elementos, adicionaremos uma tag `<div>` que engloba todos eles.
<div class="infousuario">
<img loading="lazy" class="avatar" src="https://placehold.it/200x200" alt="" />
<h2 class="nome">
Nome do Usuário
</h2>
<img loading="lazy"
class="label"
src="https://cursos.alura.com.br/images/gnarus/profile/label-Moderador.svg"
alt=""
/>
</div>Agora que sabemos as tags, onde vamos estilizar isso tudo?
Com o HTML pronto, precisamos estilizar os elementos. Para isso, vamos abrir o arquivo principal de CSS, o main.css:
"Opa, acho que o arquivo main.css, que controla todo o nosso css, está meio cheio/bagunçado :("
Para evitar que nossa funcionalidade fique perdida nesse meio, vamos fazer nosso estilo em um lugar mais limpo, criando um novo arquivo chamado infousuario.css e nele adicionar todos os estilos que precisamos.
Observe que, nesse arquivo, adicionamos apenas classes para estilizar esta parte da página.
Como nossas tags html já foram criadas com classes baseadas no que cada elemento seria, fica mais fácil de estilizar no CSS só chamando a classe usando o ponto (`.`) antes do seu nome.
Embora tenha ficado fácil estilizar, quando salvamos o código e testamos o novo pedaço da interface no ambiente de desenvolvimento, ele apresenta um conflito visual com algo que já havia sido implementado.
"Imagine se tivesse ido assim pra produção =O"
Ambos os elementos são fotos com a class `avatar` e possuem tags `<img loading="lazy">`, como podemos diferenciar cada uma delas?
"Ah, podemos usar aninhamento de seletores, oras!"
.infousuario .avatar {
/\* propriedades
do avatar filho de .infousuario \*/
}
.header .avatar {
/\* propriedades do
avatar filho de .header \*/
}Boa! nesse caso, resolvemos o problema e nossa página volta ao normal:
No entanto, ainda existe o risco de alguém criar um estilo sem utilizar aninhamento e, assim, acabar afetando negativamente o layout.
/\* arquivo_qualquer.css \*/
.avatar { /\* Destruindo o
layout novamente muwahahahaha \*/ }Bom, primeiro de tudo o que queremos fazer?
"Criar a nova funcionalidade sem quebrar o site T.T"
Até agora, criamos um arquivo infousuario.css e nele estávamos colocando nosso CSS, até aí tudo bem:
Entretanto, o real problema começou a se manifestar quando tivemos que nos preocupar em saber se um estilo já foi criado ou não.
Baseado no nosso problema, vamos pensar o seguinte:
Se eu criar um novo arquivo infousuario.css, o que acontece com o anterior?
"Ele some, uai"
Em situações normais, antes de sobrescrever ou deletar o arquivo, normalmente recebemos um alerta do computador ou do editor de texto utilizado (como o VsCode)."
Como podemos representar o conjunto de HTML e CSS responsável por gerar a parte visual do infousuario?
"Ahh, ele é um pedaço dela!"
Isso! Nosso arquivo infousuario.css junto com o trecho HTML referem a um pedaço do site, algumas pessoas chamam de bloco outras de componente.
No geral, esse bloco é responsável por agrupar vários elementos relacionados à visualização das informações do usuário. Com isso em mente, todos os elementos internos devem ser estilizados com base nesse bloco. Por exemplo:
.infousuario .avatar {
}Mas veja que do jeito que está, ainda temos o risco dos aninhamentos que sobrescrevem coisas!
Para evitar problemas de sobrescrita de estilos, podemos adotar um padrão de nomenclatura de seletores bastante utilizado pela comunidade front-end, chamado BEM:
.infoUsuario__avatar {
}Nesse cenário temos uma classe ao invés do aninhamento, os dois underlines podem até soar estranho de início, mas o BEM estabelece por meio deles uma relação de elemento pai e elemento filho sem aninhamento. Sendo o pai um bloco e o filho um element (be que vem do BEM).
Do jeito que fizemos aqui já estamos evitando conflitos de CSS com uma classe `.avatar` que estiver solta pelo código :)
Com essa nova estratégia o nosso infousuario.css fica da seguinte maneira:
Agora nosso CSS não está mais conflitando! \o/
"Mas, e se eu quiser reaproveitar algum estilo?"
Boa pergunta! Um cara perfeito para analisarmos o reaproveitamento é o nosso avatar.
.infosUsuario__avatar {
margin-top: 20px;
border: 9px solid #8db7d2;
border-radius: 50%;
}Quando definimos o `border-radius` como `50%`, estamos deixando o avatar sendo um circulo por padrão, mas caso quisermos que ele seja assim apenas em determinados casos, podemos dizer que, ser circular é uma modificação deste elemento dentro do bloco`infoUsuario`.
Para criar o seletor dele nós escrevemos as classes com dois hífens, `.avatar--circular` utilizando assim o M do BEM (modifier) que serve para representar a modificação de um elemento (como, por exemplo, deixar o avatar circular ou marcar um item de menu como ativo). Isso deixaria nosso CSS assim:
.infosUsuario__avatar {
margin-top: 20px;
border: 9px solid #8db7d2;
}
.infosUsuario__avatar--circular {
/\*os dois hifens,
indicam que estamos
modificando algum estilo do elemento \*/
border-radius: 50%;
}Agora nosso avatar tem seus estilos bem definidos e fica mais fácil trabalhar com ele, mas o avatar circular é utilizado em diversos pontos no site da alura: infosUsuario, header, forum…
O que fazer para evitar reescrever o `border-radius` em todos os lugares em que o avatar aparece?
"Podemos criar um componente avatar!"
Exatamente! Um ponto importante é lembrar que o fato de o avatar ser circular ou ter uma borda azul são modificações em relação ao estado padrão. Seguindo essa linha, temos o seguinte resultado:
/\*avatar.css\*/
.avatar--circular {
border-radius: 50%;
}
.avatar--bordaAzul {
border: 9px solid #8db7d2;
}Agora, a única propriedade CSS que precisamos alterar em `infousuario.css` é o margin-top:
/\* infousuario.css \*/
.infosUsuario {
text-align: center;
}
.infosUsuario__avatar {
margin-top: 20px; /\* Essa margem não conflita em lugar nenhum \*/
}
.infosUsuario__nome {
color: #747c81;
margin: 0;
margin-top: 20px;
}
.infosUsuario__label {
margin-top: 15px;
transition: .3s;
}Com isso, nosso componente está pronto! Além disso, agora é possível adicionar novas funcionalidades aos projetos de forma reutilizável e sem conflitos de CSS.
Caso queira se aprofundar no BEM, deixo o link da documentação para vocês conferirem, espero que o artigo ajude vocês em seus projetos e não deixem de compartilhar o que vocês fizerem :)
Ahh, e caso queira ir um pouco mais a fundo no assunto organização de CSS conhecendo outras formas além do BEM, deixo este ótimo post do @marcobrunobr.
Se você quer aprender mais sobre CSS, HTML, Javascript e outras tecnologias que fazem parte da web, aqui na Alura temos uma Carreira Front-End React, uma jornada estruturada, com desafios reais, conteúdos práticos e tudo que o mercado espera de uma pessoa desenvolvedora Front-End!
Sintam-se a vontade para comentar, dar críticas ou sugestões!
Avalie este artigo
