🤔 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