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.