Organizando seu código: O que é Método BEM e como utilizá-lo?
Se nomear classes e construir um CSS estruturado parece uma tarefa impossível, esse texto é para você.
Texto atualizado em Agosto/2019 com algumas ideias dúvidas e exemplos mais didáticos! Esse texto se propõe a ser acessível e todas as imagens e gifs contém descrições. Estou sempre aberta a feedbacks
O nosso contexto atual
Precisamos conversar sobre organização de código.
Sei que vai ser difícil ouvir isso logo de cara, mas precisamos abrir o jogo e começar a refletir sobre alguns assuntos.
A primeira, e talvez mais dolorosa verdade, é que provavelmente seu código ou o código do seu time não está tão organizado e limpo quanto ele poderia estar.
A segunda verdade é que a mudança de hábitos e adoção de uma nova forma de construir um código não é uma tarefa fácil (principalmente pra quem já programa há um tempinho). Porém, as mudanças do mercado e a cobrança constante por códigos mais escaláveis e reutilizáveis pode ser visto como uma oportunidade muito legal de começar, ainda hoje, a organizar o seu código
Quando começamos nossa jornada em programação, a maior parte de nossos projetos contém poucos blocos de código que são super fáceis de administrar.
Se, por exemplo, você precisar voltar e dar manutenção em uma página, saberá onde está a cor do seu botão na folha de estilo do CSS, ou o que cada bloco de código faz. Provavelmente você também deu um nome bem genérico e simples as suas classes, pois não tinha muita coisa acontecendo naquela página.
Mas e quando o seu projeto têm 5 páginas? 45 seções e mais de 10.000 linhas de código? Já pensou como seria trabalhar nesse projeto com 3 ou mais pessoas desenvolvedoras, cada uma criando suas próprias classes e componentes, tudo ao mesmo tempo?
Caos.css seria o nome perfeito para esse projeto!
Quando lidamos com websites e aplicações mais complexas, ou simplesmente queremos organizar a forma de construir o código, escolher um “jeito de fazer” é essencial. A padronização desse “jeito de fazer” é ainda mais importante quando estamos trabalhando em times.
Sendo assim, definir a forma com que você vai estruturar seu código é o primeiro passo para um projeto eficiente, independente de seu tamanho
Eficiência, legibilidade e rapidez são os objetivos principais do Método BEM. Em 8 minutos de leitura, você conhecerá mais sobre esse método e as principais dúvidas que as pessoas podem ter quando começam a utilizá-lo.
(Esse é um texto introdutório sobre o assunto e alguns tópicos mais avançados sobre o método não serão abordados )
Começando do começo: O que é um método?
Um método é uma forma de realizar alguma coisa. Um método é uma técnica que segue um padrão pré-definido.
Quando falamos de Arquitetura CSS, existem diversos métodos (formas) de fazer essa estruturação acontecer. Os métodos mais famosos são o OOCSS, SMACSS, ITCSS, BEM, etc.
O que é Método BEM?
BEM é uma metodologia que visa ajudar o desenvolvedor a criar pedaços reutilizáveis de código, tornando o processo de nomeação de classes no HTML & CSS mais prático, lógico e rápido.
Essa foi uma solução encontrada pela empresa Yandex para resolver seus problemas com padronização de código, escalabilidade e o desejo de ter uma equipe de desenvolvimento mais rápida e eficiente.
BEM é a sigla de Bloco (Block), Elemento (Element) e Modificador (Modifier), que como o próprio nome já diz, divide e pensa a arquitetura da interface em blocos, elementos e modificadores.
A ideia é dividir a interface em componentes independentes, reutilizáveis e de fácil entendimento de hierarquia e ação, criando um padrão de nomeação de classes que acelera o processo de desenvolvimento do HTML&CSS.
Quando falamos de trabalho em equipe, escolher uma metodologia que organize a produção de código é essencial.
Para entender um pouco melhor o que isso significa, vamos entender o conceito de cada uma delas:
Bloco
- É único e independente
- Não deve haver dois ou mais blocos com mesmo nome
- É o primeiro componente a ser idealizado e construído, carregando consigo os comportamentos e estilos mais genéricos
- O bloco pode conter elementos ou outros blocos
Vamos dar uma olhada no exemplo abaixo:
Nesse head , que é um grande bloco, temos outros blocos independentes que fazem conjunto com ele. Logo, menu, search e auth são blocos, pois são independentes e podem funcionar em qualquer lugar de uma aplicação.
Nesse exemplo, vemos que o bloco logo pode ser colocado em outras áreas do meu bloco head sem interferir no funcionamento ou elementos que fazem parte desse grande bloco.
Pensando no CSS, a classe de um bloco descreve o seu propósito nessa interface (“O que é isso?” Menu, Navbar, Form, etc), e não como é o seu estilo ou estado (“Como ele é?” branco, com margin-left: 10px, etc).
Exemplo:
1. <div class="error"></div>Correto: Representa de forma semântica o que aquele bloco é/contém
2. <div class="red-text"></div>Errado: Descreve a aparência do bloco. Não se sabe qual seu propósito ou o que ele faz
Elemento
- Está diretamente atrelado a um Bloco
- Não pode ser utilizado sem um Bloco
- Depende de outras estruturas no código para “existir”
Vamos dar uma olhada nesse outro exemplo de código
A classe dada a um elemento descreve o seu propósito (“O que é isso? text, input, label”), e não o seu estilo ou estado (“Como ele é? vermelho, tem padding, tem margin, etc.).
A nomenclatura é construída da seguinte forma:
nome-do-bloco__nome-do-elemento. O bloco e o elemento são separados por dois underlines (__).
.header__logo { }
.header__imagem { }
.header__pesquisar { }
.header__menu { }No exemplo abaixo, temos um formulário (form), que é um Bloco e contém dois elementos que estão atrelados a ele: o input e o buttton
<form class= "search-form">
<input class="search-form__input">
<button class="search-form__button">Pesquisar</button>
</form>Importante reforçar que um elemento será sempre parte de um bloco. Sendo assim, no código abaixo temos:
Incorreto: <form class="search-form">
<div class="search-form__content">
<input class= "search-form__content__input">Recomendado:<form class="search-form">
<div class="search-form__content">
<input class= "search-form__input" OU
"search-form__content-input"
Modificador
- É opcional
- Pode estar atrelado tanto a um Bloco como a um Elemento
- Carrega caraterísticas específicas de aparência, estado ou comportamento (“Como esse bloco é? O que esse elemento faz?”)
Um de seus principais usos é quando temos blocos ou elementos com estruturas iguais, mas com estilos ou estados diferentes.
Veja o exemplo abaixo:
Temos um blocoMenu com 4 elementos que fazem parte dele. Se observarmos o cabeçalho e o footer dessa página, veremos que os blocos são estruturalmente parecidos.
Dessa forma, ao invés de criar dois componentes específicos para o cabeçalho e para o footer, criamos um modificador para o bloco Menu e assim ele recebe as características que ele precisa ter no cabeçalho e no footer
A classe dada a um modificador é sempre descritiva, como por exemplo disabled, focused (Descreve um estado), margin-left, color-red (Descreve a aparência), change-to-right, directions_left-top (Descreve um comportamento).
Assim, o nome de uma classe será construída da seguinte forma:
nome-do-elemento_Modificador || nome-do-bloco_Modificador
O modificador é separado do Elemento ou do Bloco com um underline (“_”).
.header__navigation { }
.header__navigation_secondary { }
.header__navigation_primary { }Nomenclatura do método BEM
Bloco__Elemento_Modificador
Na documentação do método BEM, podemos encontrar ainda outros esquemas de nomenclatura de classes que dão flexibilidade de uso, como por exemplo:
Estilo Dois Tracinhos (--)
nome-do-bloco__nome-do-elemento--modificador
Estilo CamelCase (inicia com a letra minúscula)
nomeDoBloco_NomeDoElemento__NomeDoModificador_valorDoModificador
Estilo React (inicia com a letra maíuscula)
NomeDoBloco_NomeDoElemento_nomeDoModificador_valorDoModificador
Seu Próprio Estilo :)
Você também pode criar o seu próprio jeito de nomear classes utilizando os conceitos centrais da arquitetura do método BEM.
O mais importante é que os componentes estejam estruturados em Blocos, Elementos e Modificadores e a legibilidade seja fácil e semântica para você e seu time.
Se a ideia de nomenclatura e arquitetura de código estiver longe disso, não podemos considerá-la parte do método BEM.
As principais dúvidas que você pode ter sobre o método BEM
Se você está animado para começar a utilizar o método BEM nos seus projetos pessoais ou profissionais e sentiu dificuldade em entender alguns conceitos, não se preocupe!
A documentação oficial foi uma ferramenta ótima para tirar minhas dúvidas, mas creio que só quando você passa a aplicar os conceitos na prática é que as questões começam a aparecer.
Se isso se aplica ao seu caso, as principais dúvidas que você também pode ter tido são:
“Ok, mas como eu sei o que o meu componente é um bloco ou um elemento?”
Pra simplificar, os blocos tem duas características principais:
- Não dependem de nenhum outro elemento para funcionar
- Podem ser reutilizados sozinhos em qualquer lugar do seu código.
Ex: Header, Menu, Alert, Footer, etc.
“Preciso ficar duplicando o nome do bloco e elemento cada vez que eu quiser criar um modificador?”
Depende! Se o Modificador pertencer a um elemento — que consequentemente está ligado a um bloco — então sim, você vai duplicar o nome do bloco.
Exemplo: card__image_border-red
Se o Modificador for apenas e somente de um Bloco, então não precisa!
Exemplo: button_disabled
Apesar de tornar o seu código estranhamente repetitivo, é a forma correta de utilizar o método. Com certeza vai valer a pena quando você precisar pesquisar algum elemento e conseguir encontrar rapidamente seus modificadores. Dá tudo certo no final, confie no método!
“Posso utilizar uma classe única para um propósito único no meu projeto?”
Sim, você pode! No método BEM, essa classe única que só tem um propósito pode também ser considerada um Bloco :)
Um exemplo SUPER comum é o famoso button , que geralmente recebe a classe “btn” e carrega as características comuns do componente que pode, ou não, ser utilizado em outros lugares do seu projeto.
“Esse método não deixa o nome das classes muito grandes? Se eu for escrever dessa forma vou ter algo como ‘um-bloco__um-elemento_um-modificado-qualquer’”.
“A nomenclatura fica bem feia/estranha/esquisita/longa demais”
SIM, a sua classe vai ficar enorme. É isso. Não tem jeito.
Acho que esse é o único “contra” que eu ouço desse método é deixar os nomes bem longos, mas confesso que acho que não é tão grave quanto as pessoas dizem ser. Acredito que vale a pena utilizá-lo.
Como diz Christoph Reinartz, team lead ui/ux engineering na trivago e frontend architect:
“BEM was not designed to be pretty but to scale. In general I think it is quite bulletproof. And it helped us a lot.”
(Tradução livre: BEM não foi desenhado para ser bonito e sim para ser escalável. No geral, ele é quase uma bala de prata. E nos ajuda bastante)
Depois de um tempo, você não só acostuma com a forma com que a arquitetura desse código funciona como também torna o seu projeto entendível por todos aqueles que sabem programar. O time agradece :)
“Posso usar modificadores sem elementos ou blocos? Por exemplo, criar uma classe ‘text-center’ e colocar em todos os elementos com essa característica.”
É tentador, rápido e fácil MAS não é o melhor caminho.
Eu já fiz e sei que você já fez também, mas se você quer que o método BEM funcione corretamente, é melhor evitar.
O ideal é que se você quiser acrescentar uma característica (ex: texto-italico, cor-vermelha, div-centralizada) que se repete em vários outros componentes do seu projeto, crie um bloco único, sem elementos nem modificadores, e aplique nos seus componentes junto a outros blocos.
“Eu já tenho um projeto pronto/antigo/legado e refatorar(reescrever) todas as classes daria muito trabalho, não é?”
Acho que nesse ponto você precisa considerar se o método vai ser útil para o seu código legado. O que você pode fazer nesses casos é introduzir o método BEM aos poucos, refatorando apenas blocos ou elementos que façam sentido.
“Gosto do método BEM, mas na empresa o pessoal já usa o método OOCSS, SMACSS, etc…”
“Gosto do método BEM mas também gosto de outros métodos. Tenho que escolher um só?”
Não precisa! O método BEM não só pode ser combinado com outros métodos de arquitetura CSS como também ser utilizado sozinho. Tudo depende do seu time, do seu projeto e do seu momento :)
A Metodologia BEM foi pensada como uma forma de deixar a escrita de código mais inteligente.
Mais do que criar uma hierarquia mais clara para o desenvolvimento front-end, o método muda a forma de pensar e construir os projetos ao trabalhar com o conceito de independência e componetização.
É possível que você ou sua empresa queiram adaptar a metodologia e utilizar apenas aquilo que faz mais sentido para sua realidade, mas seguindo os princípios conceituais do método, a eficiência e a organização do código serão uma mera consequência.
Por hoje é isso! Espero que tenham gostado!
Se tiverem dúvidas ou sugestões, vamos bater um papo ;)
