🤔 Você em algum momento de sua carreira deve ter ouvido falar sobre a metodologia BEM em CSS, e caso não nunca tenha ouvido falar, ou muito menos sabia que ela existe, fique neste artigo até o final para entender a real importância da sua utilização.
O que é BEM?
BEM é uma abreviação para Block, Element and Modifier, que em português significa Bloco, Elemento e Modificador. Criada em volta de 2005 por um buscador russo bem famoso chamada Yandex, com o objetivo de padronizar o código em vários em vários projetos, te auxiliando a criar códigos reutilizáveis e sustentáveis por meio da nomeação de classes. Fazendo com que você tenta total autonomia na na escrita e manutenção de qualquer tipo de projeto.
Qual o significado da abreviação?
Cada bloco desta metodologia são divididos em 3 pilares importantes, que são:
BLOCO
É um componente independente de uma aplicação, que tem o seu próprio significado. O Bloco é um container, que contém elementos de marcação HTML como seu conteúdo, ou até mesmo, outros blocos iguais.
Um bom exemplo de bloco séria
<div class="menu">
<h1>Conteúdo do elemento...</h1>
</div>
Elemento
O elemento filho faz parte de um bloco, sendo semanticamente ligado ao elemento pai, não podendo ser utilizado fora desse bloco, como estão sempre atrelados a esse bloco, geralmente o nome do elemento é separado, contendo o nome do bloco, 2 underlinhas (__) e nome do elemento.
.menu{} /*Bloco*/
.menu__link{} /*Elemento*/
Modificador
Como o próprio nome diz, ele modifica os comportamentos, estados e aparência dos blocos e/ou elementos.
.menu{} /* Bloco */
.menu__link{} /* Elemento */
.menu_ChangeColor{} /* Modificador */
Qual é a ideia por trás e quais são as suas boas práticas
A ideia por trás da utilização da estrutura da metodologia BEM é fazer com que as informações sejam mais fáceis de entender tanto para você, quanto para outros desenvolvedores terem uma maior facilidade de entender o seu código.
<div class="card">
<div class="card__header">
<h2>Título do Card</h2>
</div>
<div class="card__boxRed">
<img src="" alt="" class="card__img">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda, alias ipsum. Qui eius error doloribus earum est explicabo ullam iure quo, consequatur nemo magnam voluptatem doloremque distinctio! Sit, obcaecati quidem?</p>
</div>
<div class="card__boxBlue">
<img src="" alt="" class="card__img">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda, alias ipsum. Qui eius error doloribus earum est explicabo ullam iure quo, consequatur nemo magnam voluptatem doloremque distinctio! Sit, obcaecati quidem?</p>
</div>
<div class="card__boxGreen">
<img src="" alt="" class="card__img">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda, alias ipsum. Qui eius error doloribus earum est explicabo ullam iure quo, consequatur nemo magnam voluptatem doloremque distinctio! Sit, obcaecati quidem?</p>
</div>
</div>
Principais Vantagens
- Reutilização de Código
- Ajuda na nomeação do código CSS sem esforço e complicação
- Melhor Compreensão do código
- Desenvolvimento mais rápido com resultados duradouros
- A arquitetura garante a longevidade e a sustentabilidade para o desenvolvimento
- Menos problemas com o avanço do código HTML
- Facilita na manutenção do código
- Cria uma estrutura escalável
Top comments (2)
Ana, te encontrei aqui após exatos 1 ano de Post (16-julho) e fiz conta aqui só pra te agradecer pela didática ótima kkkkkkkk só consegui entender contigo, tamo junto!!
Olá! Fiquei muito feliz em saber que minha didatica ajudou você, muito obrigada pela lembrança e feedback, fizeste o meu dia! :D