CSS BEM - Saiba tudo sobre essa metodologia!

🤔 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.

왜 벰?

BEM은 Block, Element 및 Modifier의 약어이며 Bloco, Elemento 및 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:

블로코
É 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>

엘레멘토

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 semper 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*/

수식어

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

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