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.

Top comments (10)

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

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
 
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
 
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
 
lelepg profile image
Leticia 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!

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

Muito legal <3

👋 Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: