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.
