👼🏽 Da necessidade de um CSS do BEM

Nos últimos dias, andei tendo conversas bastante produtivas e inspiradoras com o @vinicius_vinna e o @blude sobre semântica, sintaxe e metodologias para escrever um css coerente. Veja bem, coerente.

Digo coerente e não correto porque ~só Deus pode julgar~, na minha nem tão fecálica opinião, se um elemento é estilizado com as classes ‘ColunaLateral u-floatLeft’ ou ‘col-md-4’ e é renderizado corretamente e da mesma forma, não podemos afirmar que está errado. Concorda? Ótimo. Só que…

Tudo isto é sobre CARINHO, fera!

Funcionar é o bastante? Vou lhe antecipar a resposta: não.
Pela definição wikipediana, semântica (do grego sēmantiká, do inglês semantics, do alemão semantik, do bielo-russo семантыка…) é o estudo do significado. Ter carinho com a semântica no nosso contexto, é nomear um elemento de forma que não cause um ‘WTF’ na cabeça das outras pessoas. Se possível, causar sorrisos, como aqueles proporcionados por um abraço fraternal… É sério.

Imagine um elemento chamado ‘Humano’.

Todas as definições genéricas (os estilos) sobre um humano devem estar contidas aí, nessa classe Humano. Poderia ser qualquer outro nome carregando o mesmo estilo, mas o nome Humano é cheio de significado para nós, conseguimos compreender o que aquele elemento é, criar nossas expectativas em relação a ele. E o nome disso é carinho, fera!

Block, Element, Modifier

Já tem um bom tempo que venho zelando pela semântica dos códigos que escrevo. Junto a isso, experimentei metodologias e sintaxes diferentes em busca de um css do bem ~i see what you did there~. Surfei pela onda ~moda caralha~ do DRY CSS, pelo confuso OOCSS e tinha até um carinho pela SMACSS… Até que o ~meu brother que merece um beijo!~ @blude me apresentou essa metodologia apaixonante que mal conheço e já considero pakas, chamada B.E.M (bloco, elemento, modificador).

O objetivo do BEM é manter mais claro para o desenvolvedor sobre a marcação que ele está trabalhando, por meio das classes que o estilizam. Para isso, as classes devem descrever os elementos, te fazer criar expectativas sobre eles… Te lembra algo da conversa sobre carinhos e afagos que travamos lá em cima?

O bloco

É uma entidade livre e independente da sua aplicação. É o seu componente, o seu módulo… Lembra do Humano? Vou tomá-lo para ser nosso bloco de exemplo.

O Elemento

É um entidade que depende do bloco, ele tem uma função específica para executar ali. Por exemplo, o braço tem uma função para o Humano ( ͡° ͜ʖ ͡°).

O Modificador

É uma propriedade específica de determinado elemento ou bloco, que altera sua aparência. Vou manter o braço humano como exemplo. Temos dois (alguns tem apenas um, outros três… #partiu inferno?), direito e esquerdo, certo? Os dois são praticamente idênticos (éh…), mas tem uma diferença peculiar que os caracteriza. É para essas ocasiões que usamos os modificadores.

. . .

Não é nada misterioso. Claro que evitei ir muito fundo e nem ao menos falei da ‘sintaxe padrão’ do BEM. Primeiro: sei que, quem não conhece, merece e vai dar uma pesquisada nisso. Segundo: eu (Wil Fernandes, minha opinião ~nem tão~ fecálica), acredito que nomenclatura e sintaxe seja algo bastante maleável e conversável entre equipes, ou até mesmo gosto pessoal.

Particularmente, gosto da nomenclatura do SUIT CSS. Tenho carinho por utilitários css pra correções rápidas e aplico a metodologia BEM nos projetos que participo. É absurdamente rápido, intuitivo e reutilizável. Você tem um código modular e evita ter que ficar reescrevendo e sobrescrevendo classes ao longo da sua folha de estilos. Se usar um pré-processador, seu workflow fica mais fluido ainda!

Pra concluir, é importante escrever um CSS coerente, mas aliado ao seu estilo. Importante também ter zelo pelo que está escrevendo… E respeitar a semântica.

Afinal, isso tudo é uma questão de CARINHO, fera. Carinho.

Um abraço 🤗