Definindo padrões de CSS para o meu projeto

A pouco tempo enquanto trabalhava em um projeto, comecei a me incomodar com a organização exageradamente complexa do código CSS. Seletores muito extensos, poluiam HTML e causavam verdeiro pânico no time de desenvolvimento. O excesso de arquivos, deixava o projeto tão fragmentado, que muitas vezes eu não sabia onde“enfiar” um trecho novo de código. Os desenvolvedores não estavam a vontade para usar o CSS do projeto sem pedir ajuda, por mais boba que fosse a sua necessidade estavam sempre inseguros. Eu havia aprendido muito desde que tinha entrado naquele projeto, e não queria questionar os padrões criados pelo profissional que me precedeu. Mas eu tinha um sentimento que ainda não sabia explicar, feeling de que algumas coisas não estavam certas, ou estavam exacerbadamente complicadas.

Resolvi pesquisar sobre o assunto. Encontrei um artigo muito bom no Tabless que eu já havia lido a alguns anos.

OOCSS, SMACSS, BEM, DRY CSS: afinal, como escrever CSS?

Fiz minhas conclusões. Resumindo…

Para o OOCSS (Objective Oriented CSS), um objeto de CSS é todo padrão visual que se repete. Além disso, propriedades de estrutura não devem se misturar com skins, na mesma classe. É preciso manter essa diferenciação para fins de modularização.

O SMACSS prega a categorização das regras de CSS. Na categoria Base devem estar as regras que não possuem classes ou ids, os estilos são aplicados diretamente as tags, e vão perpetuar sobre todo o projeto. Em Layout ficarão as regras de estrutura, elementos únicos como header e footer. Module é a categoria que engloba todas as outras regras, ou seja, todos os outros componentes, blocos, elementos, estilos. E por último, State. Este grupo é específico para estado, é o único aonde se admite o uso de !important. Recomenda-se o uso de prefixos, .l- para layout, .m- para modules, .is- para state. Porém assim como o autor do artigo eu não concordo totalmente com isso, e não usarei prefixos para layout, é exagero, basta separa-los em arquivos distintos.

Bem, o BEM é bom. Block, Element e Modifier, e o que mais se aproveita está claro na sigla. O Block envolve o seu objeto. O element é aquilo que está dentro do block. E modifier é um modificador, uma regra de exceção para o elemento ou bloco. Ficaria assim:

<div class=“profile”>
<div class=“profile__img”> … </div>
<div class=“profile__img–small”> … </div>
</div>

Don’t Repeat Yoursef = DRY. Este cara já é conhecido por diversas linguagens. Na minha ótica, aplicado ao CSS, o que mais devemos reter desse sistema de escrita é o principio de modularização, de reaproveitamento de código. Evite repetir. Manter controle e o padrão sobre regras como espaçamentos, bordas, cores, são definitivamente a diferença entre uma interface consistente e algo com aspecto amador.

Enfim, este artigo não é um ponto final. Aliás, pra mim é um retorno aos estudos. Espero que seja para você no minimo uma provocação. Questione e contexte os padrões. E se tiver algo a acrescentar é muito bem-vindo.

Victor Hugo

Show your support

Clapping shows how much you appreciated Victor Hugo ’s story.