[pt-BR] O que eh BEM e porque usar isso pra nomear HTML/CSS

#braziliandevs #webdev #html #css

Dia!!!

Hoje eu vou traduzir um post que escrevi em inglês e foi bem popular aqui, então acho que minha galera BR merece atenção também

Vou falar sobre uma ferramenta que eu uso pra desenvolver websites e deixa meu código mais bonitinho ao mesmo tempo que facilita minha vida... BEM!

O que é BEM?

BEM (Bloco, Elemento, Modificador) é uma convenção de nomeação de classes em HTML e CSS e foi criado por um grupo chamado Yandex.
Basicamente, é uma metodologia que te ajuda a entender melhor as relações entre seu HTML e CSS e assim facilita pra você estilizar seu código.

Por que usar BEM?

Você não TEM que usar, claro. Então porque eu recomendo?

BEM da uma estrutura legal pro seu código, e é bem simples de usar.
Facilita a estilização e leitura do seu HTML.
Te ajuda a evitar conflitos de estilo,
Consistência!!!

Entao, COMO eu uso isso?

Okay, chegamos na parte divertida!

<div class="hero">
<img class="hero__img">
</div>

<div class="main">
<h1 class="main__title">
<p class="main__text"></p>
<p class="main__text-special"></p>
<p class="main__text"></p>
</div>

Aqui temos um pedaço simples de código.
Bloco:
A < div > é o nosso bloco. Tudo que o bloco precisa é um nome simples e descritivo, e no nosso exemplo usamos HERO e MAIN.

Elemento:
Os elementos são os itens que vão dentro dos nossos blocos. Eles são parte dos blocos, então eles recebem o nome do bloco.
Além do nome do bloco, eles recebem um segundo nome, que deve ser descritivo pra facilitar a compreensão. Nosso exemplos são:
"main_text", "maintitle" and "hero_img".

Modificador:
Enquanto essa parte é menos usada do que o Bloco e o elemento, e bem importante também. Os modificadores te avisam que um item é especial, mais ainda assim são elementos!.
Nosso segundo < p > tem o nome de "main___ text-special".
Talvez esse parágrafo vai ser de outro cor ou ter outra fonte. Quem sabe?
O importante é entender que enquanto isso ainda é um "main__ text", colocando o "-special" avisa que algo diferente vai ser adicionado.

Porque __ e - ???

Esse acentos são parte da metodologia do BEM.
Algumas pessoas seguem a ideia do BEM mas com outros sinais, e é okay se funciona pra você.

Conclusao

Blocos só precisam de um nome,
Elementos precisam do nome do bloco + __ + o nome do elemento,
Modificadores precisam de tudo que o elemento precisa + um diferencial

Eu tentei explicar da forma mais simples possível, espero que esse post seja de utilidade rpa você!
BEM é uma metodologia bem legal e útil, e as poucas vezes que eu nao uso, pode apostar que eu vou ter algum problema com conflito de estilo no meu projeto haha

Obrigada por ler,
Pati.

Top comments (10)

Cledilson Nascimento • Jul 24 '20

Vou começar a usar, eu uso algo parecido, mas dessa forma é bem melhor e já que é um "padrão de projeto" pode facilitar pra quem pegar esse código depois. Obrigado pelo conteúdo em PT_BR :D

Felippe Regazio • May 13 '20

Super legal mesmo ver os BRs aqui :)
Pachi, acho que vc esqueceu uma frase enquanto traduzia aqui ó

Você não TEM que usar, claro. Então porque eu recomendo?
You don't have to, of course. So why use it?

Super bacana o post : )

Pachi 🥑 • May 13 '20

ops, obrigada lol

Tae Kim • May 13 '20

Ótimo texto, muito bom ver outros brazucas por aqui!

Pachi 🥑 • May 13 '20

Obrigada!!!

Leticia @levxyca • Sep 1 '20

Caramba, eu procrastinei todo esse tempo pra ler sobre BEM e você tinha esse texto maravilhoso e simples de entender! Vou passar a utilizar nos meus projetos!