ITCSS – ReactJS

Pastas
Settings (Variáveis)

Tools (Functions)

Generic (Reset.css)

Base, Elements (Padrão)

Objects (Criação de elementos)

Components (Criação de elementos específicos)

É recomendável que o fluxo seja: as pastas de baixo, vão consumindo as de cima, e

evite que uma pasta superior consuma uma inferior.
Settings: Nessa pasta ficarão os arquivos de configurações do css, geralmente as
variáveis.
- Exemplos: colors.js, size.js, spacing.js …
Tools: Aqui ficarão as propriedades que geralmente se repetem no código CSS,
comportamento genérico, como centralizar um elemento.
- Exemplos: functions.js …
Generic: Geralmente usada para o arquivo de reset do css, onde irá tirar o
comportamento padrão dos navegadores.
- Exemplos: reset.js …
Elements: Nessa pasta estilizamos elementos que geralmente irão ter um
comportamento padrão e todo o projeto, aqui só chamamos os elementos por TAG.
Exemplos: index.js → body, header, main …
Objects: Nessa pasta ficam os arquivos que criam elementos menores, ou seja,
elementos de baixo nível que podem ser reaproveitados, por serem reutilizáveis algumas
propriedades tem que serem evitadas, confira a seguir:
Exemplos do que temos que evitar: position, display, margin, float….
Components: Nessa pasta ficam os arquivos que criam os elementos maiores, ou seja,
de alto nível, geralmente um component é montado à partir de outros objects, a regra dos
objects cabem também aos components, mas nesse caso à exceções, confira a seguir:
Exemplos do que temos que evitar: position, display, margin, float….
Exceções: Essas propriedades podem ser usadas para posicionar os elementos
internos, mas não o component em si...