ITCSS - Organizando melhor o CSS

Olá, Web Developers!

Quem já não teve problemas com a organização do CSS? Ou tentou estilizar um elemento e não funcionou porque já havia uma regra CSS com uma força maior e, no final, teve que criar um seletor mais específico para poder sobrescrever?

Tenho certeza que alguns aqui chegam ao momento em que não tem outra saída a não ser utilizar o !important.

Bom, o ITCSS foi pensado para essas coisas. Ele já existe há algum tempo, mas ainda é pouco conhecido. Eu o utilizo em meus projetos desde 2014 e sempre me ajudou muito com a organização do CSS.

Ele não é uma biblioteca, framework e nem metodologia como BEM, DRY, OOCSS, etc, que nos indica como montar nossas classes e como nomeá-las. Ele é apenas uma estrutura que, se seguirmos, teremos nossos códigos mais organizados. Podemos inclusive utilizar junto com BEM, DRY, SMACSS, OOCSS, etc.

Curso Nest.js - Testes automatizados

Conhecer o curso

Como Funciona?

O ITCSS, na verdade, é proprietário em sua maioria. Então, apenas uma certa quantidade de regras foram reveladas pelo seu criador. Mas o que foi revelado já é muito útil para nossos projetos.

O CSS trabalha com a ideia de que, quanto mais específico for o seletor, maior a sua força. O seletor com mais força sobrescreve o seletor mais fraco.

O ITCSS segue isso baseado na ideia do Triângulo Invertido. Quanto mais acima do triângulo você estiver, mais fraco será o seletor. Os seletores presentes em uma camada sempre sobrescrevem os seletores da camada de cima.

Cada camada serve para colocarmos um tipo específico de código.

1). Settings

É onde declaramos as configurações do nosso projeto, como variáveis de medidas, cores, etc.

$my-color: #0057FB;
$footer-height: 120px;

2). Tools

Onde colocamos funções, mixins, placeholders, etc. Se não estiver utilizando pré-processadores como Sass ou Less, essa camada não precisa existir.

@mixin  my-box(){
   width: 200px;
   height: 100px;
}

3). Generic

Camada para colocarmos seletores com a menor especificidade. Por isso é normalmente usado para quando queremos usar o seletor *.

*{
   box-sizing: border-box;
}

4). Elements

Também chamada de base. Essa camada serve para estilizarmos a parte mais básica dos elementos. Nada de IDs nem classes aqui, apenas seletores de elementos.

Normalmente utilizada para se fazer o CSS Reset.

div{
   padding: 10px;
}

5). Objects

Usamos apenas classes aqui. É onde começamos a declarar a estrutura dos nossos elementos.

.my-button{
   width: 200px;
   padding: 10px;
}

6). Components

Aqui também só utilizamos classes. É onde começamos a estilizar os nossos elementos de forma mais específica.

.my-red-button{
   background-color: red;
   color: white;
   border: 2px solid black;
}

7). Trumps

É a camada com maior especificidade. Aqui criamos pequenas classes com !important para sobrescrever certas regras.

.hidden{
   display: none !important;
}

Organização dos arquivos

Eu costumo utilizar o Sass. Independentemente se você utiliza ou não um pré-processador, é bom que no final todos os arquivos sejam minificados e unidos num único arquivo.

Para garantir a organização e a ordem de carregamento, eu costumo utilizar a seguinte estrutura:

|__  1_settings
|   |__  _example_file.scss
|   |__  _1_settings.scss
|__  2_tools
|   |__  _example_file.scss
|   |__  _2_tools.scss
|__  3_generic
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _3_generic.scss
|__  4_base
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _4_base.scss
|__  5_objects
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _5_objects.scss
|__  6_components
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _6_components.scss
|__  7_trumps
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _7_trumps.scss
|__  styles.scss

As pastas ficam numeradas apenas para manter a ordem quando formos ver no nosso editor ou IDE.

Dentro de cada pasta contém um arquivo principal, com o mesmo nome da pasta. Ele serve para carregar os demais arquivos.

Na raiz há o arquivo styles.scss, que carrega cada um dos arquivos principais das pastas na ordem que as camadas devem seguir. Esse arquivo nunca será tocado.

@import "1_settings/1_settings";
@import "2_tools/2_tools";
@import "3_generic/3_generic";
@import "4_base/4_base";
@import "5_objects/5_objects";
@import "6_components/6_components";
@import "7_trumps/7_trumps";

Caso queira testar, aqui tem um projeto em branco com a estrutura do ITCSS já montada, com Gulp e WebPack configurados:

https://github.com/hanashiro/simple-project-seed

Ao escrever o CSS somos livres para seguir a metodologia que quisermos: OOCSS, SMACSS, BEM, ACSS, etc.

Para saber mais, temos o curso de HTML5 e CSS3 Avançado, onde falamos mais sobre cada uma das metodologias de organização de CSS.