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 para 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 ideia 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, quando conheci o BEM, fui influenciado pelo pré-conceito e achei muito estranho/feio usar esses __ e –. Mas agora, mais por dentro da ideia, 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 artigo e vamos conversar.

***

Artigo original publicado em: http://www.raphaelfabeni.com.br/bem-css/