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

디아!!!

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 웹사이트 e deixa meu codigo mais bonitinho ao mesmo tempo que facilita minha vida... 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 codigo.

Por que usar BEM?

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

BEM da uma estrutura legal pro seu codigo, e é bem simples de usar.

HTML을 사용하는 데 도움이 됩니다.

Te ajuda a evitar conflitos de estilo,

꾸준하다!!!

Entao, COMO eu uso isso?

좋아, 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 codigo.
블로코:
A < div > é o nosso bloco. Tudo que o bloco precisa é um nome simples e descritivo, e nosso exemplo usamos HERO e MAIN.

엘레멘토:
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 facilita a compreensão. Nosso의 예:
"main_text", "maintitle"및 "hero_img".

수정자:
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 paragrafo vai ser de outro cor out ter outra fonte. 쿰 사베?
"주 텍스트", "-특별한"요구 사항에 대해 중요하게 생각해야 합니다.

Porque __ 전자 - ???

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

결론

Blocos so precisam de um nome,
Elementos precisam do nome do bloco + __ + o nome do elemento,
Modificadores precisam de tudo que o elemento precisa + um 디퍼렌셜

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

오브리가다 포레르,
파티.