CSS BEM - Saiba tudo sobre essa metodologia!
Tags: css, webdev, programming, career
Published: 2022-07-16 09:59:19

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hr9ze1cjlbqr9rdpf4gh.jpg)
 

🤔 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