DEV Community

Cover image for [PT-BR] O que eh BEM e porque usar isso pra nomear HTML/CSS
Pachi 🪐 (she/her/ela) for Feministech

Posted on • Updated on

[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>

Enter fullscreen mode Exit fullscreen mode

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.

Discussion (8)

Collapse
felipperegazio profile image
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 : )

Collapse
pachicodes profile image
Pachi 🪐 (she/her/ela) Author

ops, obrigada lol

Collapse
tae profile image
Tae Kim

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

Collapse
pachicodes profile image
Pachi 🪐 (she/her/ela) Author

Obrigada!!!

Collapse
gabriellima96 profile image
Gabriel Lima

Muito bom o texto, bem direto ao ponto!

obs: obrigado por traduzir! :D

Collapse
pachicodes profile image
Pachi 🪐 (she/her/ela) Author

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

Collapse
levxyca profile image
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!

Collapse
cledilsonweb profile image
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