O CSS
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
O ITCSS (Inverted Triangle CSS) 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.
ITCSS
A ideia do ITCSS é montar uma arquitetura que consiga mitigar esses pequenos
problemas do CSS.
Que envolve basicamente visualizar todo o CSS em camadas, que montadas formam um
triângulo de cabeça para baixo. Essa organização hierárquica ajuda a organizar o CSS da
forma mais efetiva, diminuindo conflitos e sobrescritas.
DIVISÕES DO ITCSS
Conforme você pode ver no gráfico acima, já temos as divisões, que são a
base do ITCSS.
[Link]
É onde declaramos as configurações do nosso projeto, como variáveis de medidas, cores,
etc.
[Link]
É o lugar onde você vai guardar seus mixins e funções necessárias para a construção de
seus layouts. Pode ser qualquer coisa, desde mixins de font-face, até mixins de
animações, etc. Se não estiver utilizando pré-processadores como Sass ou Less, essa
camada não precisa existir.
[Link]
Essa é a primeira camada que vai de fato aplicar CSS final e ela é destinada para as
propriedades mais genéricas e com a menor especificidade possível. Em geral, é onde
colocamos resets, box-sizing, etc.
[Link] ou Elements
Base, também chamada de Elements. Essa camada serve para estilizarmos a parte mais
básica dos elementos. Nada de IDs nem classes aqui, apenas seletores de elementos
como os headings h1-h6, a, buttons, etc.
Normalmente utilizada para se fazer o CSS Reset.
[Link]
Seguindo os princípios de OOCSS (CSS Orientado a Objetos), aqui é onde iremos ter nossos
pequenos “objetos”, que nada mais são que pequenos pedaços da interface, em geral, padrões
que se repetem por todo o site e que podem ter ou não uma camada visual por cima.
Usamos apenas classes aqui. É onde começamos a declarar a estrutura dos nossos elementos.
Aqui é onde fazemos os padrões de botões, listas, paineis, etc. Nesse momento, só é permitido
também o uso de classes.
[Link]
Aqui também só utilizamos classes. É onde começamos a estilizar os nossos elementos
de forma mais específica.
Enquanto nos objetos nós tentamos abstrair o máximo possível, para ter muitos objetos
reutilizáveis e genéricos, aqui nós vamos ser específicos ao criar os componentes.
[Link]
É a camada com maior especificidade. Aqui criamos pequenas classes com !important
para sobrescrever certas regras.
ITCSS
Assim, temos a pirâmide invertida completa.
Organização dos arquivos
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, fica a seguinte estrutura.
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.
Organização dos arquivos
Na raiz há o arquivo [Link], que carrega cada um dos arquivos principais das pastas na
ordem que as camadas devem seguir. Esse arquivo nunca será tocado.
Organização dos arquivos
