BEM (Block, Element, Modifier)

BEM (Block, Element, Modifier) nada mais é que uma convenção de escrita. As marcas registradas da estruturação BEM são o uso do “__” e do “- -“: sendo que o primeiro define um elemento (filho do elemento pai), e o segundo define um modificador.

BEM faz alusão a Programação Orientada a Objetos (POO), uma maneira de descrever a realidade no código, com uma variedade de padrões e uma maneira de pensar nas entidades do programa.

O principal objetivo dessa metodologia, além de manter os códigos simples na hora da escrita e, principalmente, da manutenção, é fazer com que qualquer desenvolvedor possa ter total autonomia para mexer em qualquer tipo de projeto — seja um projeto que você já conhece ou um projeto no qual você acabou de entrar.

B: Bloco

• É a entidade independente que tem o seu próprio significado.
• Um bloco é um container cujos conteúdos são elementos da marcação HTML, ou ainda, outros blocos.
• Podemos associar blocos do BEM com módulos do smacss.

A nossa primeira classe sempre será um bloco! Exemplos:

.menu {}

.header {}

.card {}

.social-media {}

E: Elemento

• Um elemento está dentro de um bloco. Ele ajuda a formar o bloco e a constituir o elemento formando uma semântica correta.
• Como os elementos sempre estão atrelados a um bloco, seu nome também contém o bloco a que pertence separado por dois sublinhados. (__)
• Elementos não devem conter elementos!
• Os elementos pertencem ao bloco e não a outros elementos.

Observe que o campo input e button são elementos do bloco de pesquisa (visto na imagem anterior).

.search {} /* bloco */

.search__input {} /* elemento */
.search__button {} /* elemento */

M: Modificador

• Pode ser considerado um estado ou versão diferente de um bloco ou elemento.
• O modificador pode ser usado diretamente com o bloco ou em um elemento. Sua classe é composta pelo bloco e pelo elemento (se houver) separado por um sublinhado apenas.

.button {}
.button--success {}
.button--error {}

.header {}
.header__link--active {}
.header__link--disabled {}

Boa prática na definição das classes!

• Não é preciso replicar exatamente a estrutura do HTML para compor os nomes das classes em BEM. Se fosse feito assim, o tamanho dos nomes das classes ficariam gigantes e complexos!

// o código abaixo é a forma como usamos o BEM utilizando o SASS

// ruim
.menu {
	&__item {
  		&__link {}
    }
}

// bom
.menu {
	&__item {}
    &__link {}
}

Ruim

<div class="card">
    <div class="card__header">
        <h2 class="card__header__title">Lorem ipsum</h2>
    </div>

    <div class="card__body">
        <img src="" alt="" class="card__body__img">

        <p class="card__body__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea explicabo unde molestiae dignissimos doloribus? Qui impedit, maiores nostrum soluta aliquam harum dolorum maxime ratione alias rem sapiente ad doloribus? Quam.</p>
        
        <p class="card__body__text">
            <a href="#" class="card__body__text__link">Lorem lorem</a>
        </p>
    </div>
</div>

.card {}
    .card__header{}
    .card__header__title{}
.card__body{}
    .card__body__img{}
    .card__body__text{}
        .card__body__text__link 

Bom

<div class="card">
    <div class="card__header">
        <h2 class="card__title">Lorem ipsum</h2>
    </div>

    <div class="card__body">
        <img src="" alt="" class="card__img">

        <p class="card__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea explicabo unde molestiae dignissimos doloribus? Qui impedit, maiores nostrum soluta aliquam harum dolorum maxime ratione alias rem sapiente ad doloribus? Quam.</p>
        
        <p class="card__text">
            <a href="#" class="card__link">Lorem lorem</a>
        </p>
    </div>
</div>

.card {}
    .card__header{}
    .card__title{}
.card__body{}
    .card__img{}
    .card__text{}
        .card__link 

Vantagens do BEM

• Desenvolvimento rápido e resultados duradouros de padronização.
• Os projetos devem ser criados rapidamente, utilizando uma arquitetura que garante sustentabilidade e longevidade para o desenvolvimento.
• Um projeto pode envolver muitas pessoas.
• A capacidade de organizar de forma eficiente o trabalho das pessoas em uma equipe é importante, seja essa equipe formada por apenas duas pessoas ou por dezenas de desenvolvedores.
• Equipes escaláveis.
• Adicionando mais pessoas para uma equipe, o desempenho deve melhorar. O código deve ser cuidadosamente estruturado para garantir a sua sustentabilidade ao longo do tempo e através das mudanças da equipe.
• A reutilização de código.
• Cada elemento novo projeto ou interface não deve ser iniciado a partir do zero. Código não deve ser dependente do contexto, mas deve ser fácil de transferir para outros lugares.

Confira mais um exemplo:

<div class="search">
    <input type="text" class="search__field">
</div>

<div class="person">
    <div class="person__hand person__hand--left"></div>
    <div class="person__hand"></div>

    <!-- outro exemplo -->
    <div class="person__left-hand"></div>
    <div class="person__right-hand"></div>
</div>

/* ----- Bloco ----- */
/* Entidade independente com seu próprio significado */
.search {}

.person{}

/* ----- Elemento ----- */
/* Descendente (e parte) de um Bloco */
.search__field {}

.person__hand {}

/* ----- Modificador ----- */
/* Um "estado" ou "versão" diferente de um Bloco ou Elemento */
.search__field--error {}
.search--error {}

.person--female__hand {}
.person__hand--left {}

Espero que com estas informações e explicações você consiga entender melhor esta metodologia BEM!

Até logo! (◠‿◕✿)