[pt-BR] O que eh BEM e porque usar isso pra nomear 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.

Comments

[Letícia Pegoraro Garcez]

Demorei muito mais do que deveria pra descobrir a existência deste artigo, mas agora que descobri estou muito feliz! Vou começar a usar com certeza!

[Pachi 🥑]

Muito legal <3

[Leticia @levxyca]

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!

[Cledilson Nascimento]

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]

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 🥑]

ops, obrigada lol

[Tae Kim]

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

[Pachi 🥑]

Obrigada!!!

[Gabriel Lima]

Muito bom o texto, bem direto ao ponto!

obs: obrigado por traduzir! :D

[Pachi 🥑]

Obrigada!!!
Eu vou tentar traduzir todos meus posts daqui pra frente, pra aumentar o espaço do brasileiro aqui no dev.to!