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:

Aplicando o BEM, teríamos algo assim:

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.