Organizando seu código CSS parte 03

CSS3

SMACSS, OOCSS, BEM ou DRY CSS ?

Continuando a série sobre os padrões de escrita da linguagem CSS, esse post é o terceiro da série, caso você perdeu e queira ver:

Qual padrão devo seguir para escrever e organizar meu código CSS ?

Entre os padrões mencionados no primeiro post, iremos abordar os seguintes: SMACSS, OOCSS, BEM e DRY CSS, nesse post, vou falar sobre o BEM.

BEM

O BEM (Block, Element and Modifier, traduzindo: Bloco, Elemento e Modificador) foi criado pelo Yandex, um buscador que recebe centenas de milhões de buscas por dia. Podemos considerar o BEM uma metodologia onde devemos mudar a forma que enxergamos e estruturamos nossas páginas, existem algumas regras que devem serem seguidas.

Dentro do BEM existem três principais nomeclaturas, sendo elas: Blocos, Elementos e Modificadores, mas, para que servem cada nomeclatura? Calma que eu já vou explicar.

Blocos

Elementos independentes, ou seja, elementos que não dependem de outros, eles possuem seu próprio significado, em outras palavras, é um agrupador de elementos, por exemplo: Menu, Cabeçalho, Rodapé, etc...

Bloco de busca

Na imagem acima, temos um Bloco de Busca.

Elementos

Filhos de blocos, ajudam a formar e compor um bloco como um todo, por exemplo: Item de menu, Título do Cabeçalho, Redes Sociais do Rodapé, etc...

Elementos do bloco de busca

Na imagem acima, temos os Elementos de Busca, ou seja, os elementos que compõem o bloco de busca.

Modificadores

Estado ou uma versão que um bloco ou elemento pode estar em determinados momentos, por exemplo: escondido, visivel, tem fundo, tem borda, borda redonda, etc...

Para exemplicar, acho que uma imagem pode falar mais que mil palavras (rsrsrs):

Estrutura do BEM

Exemplo de estrutura do BEM

Entendendo o BEM

Caso ainda tenha ficado alguma dúvida, imagine o seguinte site:

Site com BEM

Como podemos realizar a divisão dos seus Blocos? Veja o exemplo de blocos abaixo:

Site com BEM dividido em Blocos

Melhorou né? Veja que marcamos todos os elementos que não dependem um dos outros, eles por si só, já possuem seus significados, lembrando que para compor um bloco, iremos ter vários elementos e/ou estados.

Na imagem acima, temos os seguintes blocos:

  • Menu
  • Logo
  • Barra de busca
  • Autenticação de Usuário
  • Título da página
  • Textos da página
  • Rodapé

Veja que para uma simples página, temos bastante blocos e dentro desses teremos um ou mais elementos para formá-los.

Escrevendo BEM

Para escrever códigos CSS com BEM, temos algumas pequenas regras à serem seguidas, sendo elas:

  1. Para adicionar um elemento, deve-se utilizar dois underlines.
  2. Para informar um modificador, deve-ser utilizar dois traços.

Chega de teoria e vamos codar \o/

Estrutura de posts com BEM

Para estrutura o exemplo acima com BEM, poderíamos ter o seguinte HTML:

<section class="container">
    <article class="post">
        <img class="post__imagem">
        <div class="post__conteudo"></div>
    </article>
    <article class="post">
        <img class="post__imagem">
        <div class="post__conteudo"></div>
    </article>
</section>

Consequentemente devemos ter o seguinte CSS:

.container {
    // ...
}

.post {
    // ...
}
.post__imagem {
    // ...
}
.post__conteudo {
    // ...
}

Aqui podemos destacar os elementos em:

  • container e post: Blocos.
  • post__imagem e post__conteudo: Elementos.

Mas, vocë deve estar se perguntando: "E os estados?", Vamos dar um exemplo:

Imagine que você queira alinhar a imagem à direita ou esquerda e as vezes exibir uma imagem arredondada

Veja que já temos três estados, sendo eles: alinhada à direita, alinhada à esquerda e arredondada.

Traduzindo para nosso CSS, temos algo parecido com:

.post__imagem.alinhada-direita {
    // ...
}
.post__imagem.alinhada-esquerda {
    // ...
}
.post__imagem.arredondada {
    // ...
}

Eu particularmente gosto de trabalhar apenas com inglês nas escritas de códigos, então ficaria: is-right, is-left, is-rounded.

Com isso, fechamos a explicação do BEM, você já o conhecia? o que achou? Não deixe de comentar.

Para receber novos posts por email cadastre-se na newsletter abaixo e fique por dentro das novidades.

Gif do Chapolin fazendo siga meus vãos

Matheus Castiglioni

Matheus Castiglioni

Apaixonado pelo mundo dos códigos e um eterno estudante, gosto de aprender e saber um pouco de tudo, aquela curiosidade de saber como tudo funciona, tento compartilhar o máximo de conhecimentos adquiridos e ajudar todos aqueles que sou capaz.

Post's Relacionados

Visualize outros post's relacionados ao mesmo assunto:

Organizando seu código CSS parte 04 - DRY CSS

CSS3
SMACSS, OOCSS, BEM ou DRY CSS ? Continuando a série sobre os padrões de escrita da linguagem CSS, esse post é o terceiro da série, caso você perdeu e queira ver: Organizando seu código CSS parte 01 onde é mencionado e descrito o padrão OOCSS Orga...
Continuar lendo

Criando Animações com CSS3

CSS3
SMACSS, OOCSS, BEM ou DRY CSS ? Continuando a série sobre os padrões de escrita da linguagem CSS, esse post é o terceiro da série, caso você perdeu e queira ver: Organizando seu código CSS parte 01 onde é mencionado e descrito o padrão OOCSS Orga...
Continuar lendo

Dando poderes ao CSS com SASS parte 01

CSS3
SMACSS, OOCSS, BEM ou DRY CSS ? Continuando a série sobre os padrões de escrita da linguagem CSS, esse post é o terceiro da série, caso você perdeu e queira ver: Organizando seu código CSS parte 01 onde é mencionado e descrito o padrão OOCSS Orga...
Continuar lendo

Organizando seu código CSS parte 02

CSS3
SMACSS, OOCSS, BEM ou DRY CSS ? Continuando a série sobre os padrões de escrita da linguagem CSS, esse post é o terceiro da série, caso você perdeu e queira ver: Organizando seu código CSS parte 01 onde é mencionado e descrito o padrão OOCSS Orga...
Continuar lendo

Organizando seu código CSS parte 01

CSS3
SMACSS, OOCSS, BEM ou DRY CSS ? Continuando a série sobre os padrões de escrita da linguagem CSS, esse post é o terceiro da série, caso você perdeu e queira ver: Organizando seu código CSS parte 01 onde é mencionado e descrito o padrão OOCSS Orga...
Continuar lendo