Quando participamos de grandes projetos, a preocupação inicial é com a arquitetura, a organização dos arquivos e um código que facilite manutenções futuras. Essa ideia também é válida quando falamos de CSS, pois sua organização é tão importante para o projeto quanto todos os outros arquivos.

Na maioria das vezes, os arquivos de CSS eram feitos em apenas um arquivo para todo o projeto, o que resultava em linhas infinitas, regras sobrescritas, dificuldade para manutenção, diversos “!important”, além de outras práticas ruins.

Por esse motivo, começaram a surgir metodologias para a melhoria dos códigos, como o OOCSS, BEM, SMACSS, DRY CSS, entre outros. Essas metodologias definem maneiras de como dividir, organizar e escrever o código CSS. O lado bom disso é que não se torna uma obrigação usar todas as regras, quando se escolhe uma basta analisar o que pode ser adotado no projeto e seguir com o padrão. Elas são uma forma de repensar na forma que estruturamos nosso código.

Uma boa iniciativa sugerida foi a junção de metodologia BEM com a arquitetura ITCSS. Vamos explicar melhor quem elas são nesse artigo.

Metodologia BEM

O nome BEM significa:

B – block (bloco)

E – element (elemento)

M – modifier (modificador)

Essas categorias são exatamente as classes que precisamos para um projeto. A facilidade de entendimento do que cada classe faz é o principal objetivo da Metodologia BEM. Conhecendo esse padrão, os desenvolvedores front-end que se depararem com um código na formatação BEM rapidamente vão conseguir identificar o que é um elemento ou um modificador.

A forma adotada para separar as categorias são:

  • _ (underscore): para elemento
  • — (dois hífens): para modificador

Sendo assim, as formas de classe que podem ser usadas são:

Exemplo de uso:

No exemplo acima temos sidebar como bloco; title e text como elementos; medium e blue como modificadores.

Arquitetura ITCSS

O nome ITCSS significa:

I – Inverted

T – Triangle

C – Cascading

S – Style

S – Sheet

A arquitetura ITCSS é conhecida pelo Triângulo Invertido, onde as regras com menores especificidades ficam no topo (mais genéricas) e as de maiores especificidades ficam na base (mais específicas).

Settings, Tools, Generic e Base são camadas que definem mixins, resets, regras de elementos html (a, ul, *) e não definem regras que vêm de classes.

As camadas Objects e Components definem regras para as classes do projeto. É importante saber a diferença entre Objects e Components para que o código fique muito bem organizado.

A camada Trump, também conhecida como Helpers, é onde fica as regras que têm maior especificidade. Trump é usada para definir as regras de extrema necessidade e garantir que não existam possibilidades de serem sobrescritas por qualquer outra classe ou regra.

BEMIT: BEM + ITCSS

A forma de trabalhar com as duas definições é bem simples. As regras da Metodologia BEM para definir o nome da classe são mantidas (block, element, modifier) e o padrão de divisão de arquivos/camadas do ITCSS também é mantida com suas especificidades. Como o BEM defende a facilidade no nome da classe, cada camada do ITCSS vira um prefixo no momento em que se define uma classe. Usando o exemplo anterior, o código com BEMIT fica:

Neste caso, é fácil ver que a classe sidebar é um componente, pois foi acrescentado o prefixo “c-“. E a tag img é um objeto, pois seu prefixo é “o-“.

O arquivo principal faz as importações de acordo com a hierarquia do Triângulo Invertido:

Dessa forma a manutenção se torna bastante simples, pois basta verificar o prefixo da classe que o arquivo CSS será facilmente encontrado. Com isso, temos um código totalmente semântico e documentado. Agora não é preciso mais ficar horas procurando uma regra específica, o BEMIT veio para ajudar.

Pode ser que, ao adotar o BEMIT pela primeira vez em um projeto, surjam dúvidas sobre como estruturar o seu código seguindo o padrão sugerido (normalmente, para gerar um resultado simples, a execução pode ser bem complicada). Mas depois que se entende melhor e se acostuma, tudo flui com mais facilidade quando seus estilos ficam todos organizados. Além disso, existem alguns exemplos no GitHub que usam essa convenção de nomeação BEMIT e eles são ótimos para ter como referência.

Thais Leão

Desenvolvedora Front-end na MundiPagg, se formando em Sistemas de Informação e em constante aprendizado.

Últimos posts por Thais Leão (exibir todos)

Quer receber as novidades de e-commerce em primeira mão?

x