Matheus Castiglioni

Arquitetura CSS: ITCSS

Criar uma boa estrutura para nossos arquivos CSS não é tão simples quanto parece, geralmente vamos encontrar algumas dificuldades ao decorrer do caminho, nos forçando à partir para práticas (não muito aceitas), como por exemplo: O uso do famoso !important.

E os problemas não param por aí, cada vez será mais dificil criar seletores com maior especifidade para sobreescrever os outros seletores ou alguma regra.

Nesse post vou falar um pouco sobre o ITCSS (Inverted Triangle CSS).

O que é ITCSS?

O ITCSS é uma estrutura para que tenhamos uma arquitetura CSS mais organizada. Basicamente a ideia é visualizar o CSS em diferentes camadas separadas, que, ao serem montadas formam um triângulo de cabeça para baixo.

Repare que as camadas estão organizadas das mais genéricas para as mais específicas.

Settings

Aqui é onde vamos colocar as configurações básicas do projeto. Normalmente é onde serão definidas as variáveis globais do nosso CSS, seja para definir cores, espaçamentos ou qualquer outra necessidade que precise de uma variável.

$primary-color: #0099ff
$border-default: 1px solid #dcdcdc
$gap-container: 1rem

Tools

Aqui é onde vamos colocar e criar nossos mixins ou funções para a construção dos nossos estilos e layouts.

@mixin full()
    height: 100vh
    width: 100vw

Generic

Aqui finalmente começamos aplicar códigos CSS. Essa é a primeira camada, nessa camada informamos regras genéricas e com a menor especifidade possível. Em geral, é onde vamos aplicar os nossos reset’s.

*
    box-sizing: border-box

Elements

Nessa camada vamos definir seletores básicos, é a última camada que irá usar seletores por tags. Atenção, nessa camada, nada de usar seletores por id ou classes, apenas seletores por tag (elementos).

li
    list-style: none

Objects

Seguindo os princípios de OOCSS(CSS Orientado a Objetos), aqui é onde vamos começar a criar nossos pequenos objetos. Um detalhe importante é que nessa camada só é permitido a utilização de seletores por classes.

.container
    margin: 0 auto
    max-width: 480px

Components

Aqui já começamos a criar nossos componentes (como o próprio nome já diz) de maneira mais específica. Aqui ainda é restrito para apenas o uso de classes.

.btn-success
    backgroud: #00cc99
    border-radius: 4px
    color: #fdfdfd

Trumps

Essa camada é responsável pela maior especificidade das demais, permitindo o uso de !important. Normalmente a ideia para utilização dos trumps é que eles sejam usados para estilos onde independe de tudo o mesmo seja aplicado e não sobreescrito.

.hidden
    display: none !important

Para saber mais

O ITCSS pode ser usado em conjunto com metodologias e outros padrões, por exemplo: BEM, SMACSS, DRY, OOCSS, etc…

Caso você precise aplicar alguma validação de cores para os elementos ou componentes, você pode estar criando uma nova camada entre components e trumps chamada theme:

Conclusão

Nesse post vimos uma maneira de organizar a estrutura dos nossos arquivos e pastas CSS, dessa maneira, conseguimos criar uma organização maior dos mesmos.

E ae, você já conhecia o ITCSS? Não deixe de comentar, caso tenha gostado do post e gostaria de ficar por dentro das novidades, não deixe de assinar nossa newsletter.

Abraços, até a próxima.