Parede branca de uma casa com várias janelas com detalhes na cor cinza, e duas delas na cor laranja

BEM CSS

CSS é fácil de aprender? A princípio muitos dirão que sim, principalmente pela sua facilidade e a possibilidade de se ver rapidamente o que se está fazendo. No entanto, como nem tudo na vida são flores, é claro que existem os pontos negativos e, quando falamos nisso, um dos principais pontos são a manutenção/organização do CSS.

Abrir um arquivo e sair escrevendo CSS é muito fácil e rápido, porém dar manutenção, organizá-lo e escalá-lo não são coisas triviais. Conforme seu projeto cresce, a tendência de você começar a perder a paciência com CSS ou de quebrar janelas vai ficando cada vez maior. Uma boa dica de leitura pra esse assunto é o artigo CSS escalável do Shankar Cabus.

BEM css

Existem diversas alternativas/pensamentos/metodologias que tentam corrigir e auxiliar nessa questão de como organizar e estruturar o CSS de um projeto. Uma delas é o BEM (Block Element Modifier), que foi criado pelo pessoal do Yandex, um site de buscas russo.

Como pode-se notar a idéia básica é termos três itens:

  • bloco => pode-se dizer que seria relativo a um componente.
  • elemento => parte(s) que forma(m) um bloco;
  • modificador => estado de um dos dois itens anteriores.

Ahn?! Imaginemos uma lista de itens, com um item ativo, algo mais ou menos assim:

<ul class="list">
  <li class="list-item active"></li>
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>
.list {}
.list-item {}
.list-item.active {}

Aplicando o BEM, teríamos algo assim:

<ul class="list">
  <li class="list__item"></li>
  <li class="list__item"></li>
  <li class="list__item list__item--active"></li>
</ul>
.list {}
  .list__item {}
  .list__item--active {}

Confesso que há algum tempo atrás quando conheci o BEM fui influenciado pelo préconceito e achei muito estranho/feio usar esses __ e --. Mas, agora, mais por dentro da idéia, posso admitir que me convenceu. Claro, que como qualquer outro pensamento/metodologia, existem seus pontos negativos e positivos e cabe a ti, dar a palavra final.

Algumas coisas que percebi com a utilização do BEM (mas são apenas minhas opiniões):

  • Fácil percepção das coisas: batendo o olho rapidamente ou na marcação HTML ou no CSS, é possível entender o que cada coisa faz.
  • Mais fácil de reutilizar componentes.

Gostou? Escrevi alguma groselha? Quer melhorar? Abra uma issue mencionando o post e vamos conversar.

See all posts...