File Organization: ITCSS and 7-1 Pattern

As projects grow, a single CSS file becomes unmanageable. File organization structures help teams split CSS into logical layers that are loaded in the right order and easy to navigate.

ITCSS organizes CSS into layers ordered by increasing specificity. Like an inverted triangle, the widest (most generic) rules are at the top; the most specific at the bottom. This respects the natural cascade.

The 7 layers of ITCSS (most to least generic):

1. Settings — Variables and design tokens
2. Tools — Mixins and functions
3. Generic — Reset/normalize
4. Elements — Base HTML element styles
5. Objects — Layout abstractions (no cosmetics)
6. Components — UI components
7. Utilities — Overrides, helpers, !important allowed here

A typical ITCSS file layout:

The 7-1 pattern organizes Sass into 7 folders and 1 main file that imports everything:

• abstracts/ — variables, functions, mixins
• base/ — reset, typography, base elements
• components/ — buttons, cards, modals
• layout/ — header, footer, sidebar, grid
• pages/ — page-specific styles
• themes/ — multiple themes
• vendors/ — third-party CSS

A main main.scss imports all partials in order:

Modern CSS @layer provides the same cascade-ordering benefits as ITCSS without a preprocessor. Layers are declared once and their priority is fixed regardless of source order.

An alternative to centralized style files: colocate component CSS next to the component file. Common in React/Vue projects using CSS Modules or CSS-in-JS.

Sass partial files start with an underscore (_button.scss). The underscore signals to Sass that the file is not compiled independently — it must be imported into a main file.

If you are not using Sass, PostCSS with the @import plugin or native CSS @import with @layer achieves the same file organization without a preprocessor.

Whether using ITCSS, 7-1, or colocated files, each component should have its own file. Name the file after the component it styles: _card.scss, button.css, Nav.module.css.

In ITCSS, which layer sits at the very top of the inverted triangle (widest/least specific)?

ITCSS orders CSS layers from generic to specific following the cascade. The 7-1 pattern organizes Sass into 7 folders imported through one main file. Modern CSS @layer provides the same cascade control natively. Whether centralized or colocated, the key principle is: one file per component, consistently ordered imports.