CSS File Organization
How you structure your CSS files determines how maintainable your project is. Learn the 7-1 pattern, component-based organization, and when to split CSS into multiple files vs keep it in one file.
Organization Strategies
- Single file - Fine for small sites. Organize with comment headers: /* === HEADER === */
- Component files - One CSS file per component: card.css, navbar.css, footer.css. Import into main.css
- 7-1 Pattern - 7 folders + 1 main file: abstracts/, base/, components/, layout/, pages/, themes/, vendors/
- abstracts/ - Variables, mixins, functions (no actual CSS output)
- base/ - Reset/normalize, typography, global styles
- components/ - Individual UI components (buttons, cards, forms)
- layout/ - Page layout (header, footer, sidebar, grid)
- Order in main file - Reset → Variables → Base → Layout → Components → Pages → Utilities
File Organization Code
/* main.css - import order matters! */
/* 1. Reset / Normalize */
@import 'base/reset.css';
/* 2. Design Tokens / Variables */
@import 'abstracts/variables.css';
/* 3. Base Styles */
@import 'base/typography.css';
@import 'base/global.css';
/* 4. Layout */
@import 'layout/header.css';
@import 'layout/footer.css';
@import 'layout/sidebar.css';
@import 'layout/grid.css';
/* 5. Components */
@import 'components/button.css';
@import 'components/card.css';
@import 'components/form.css';
@import 'components/modal.css';
/* 6. Pages (page-specific styles) */
@import 'pages/home.css';
@import 'pages/about.css';
/* 7. Utilities (highest priority) */
@import 'utilities/helpers.css';
/* === OR with @layer for specificity control === */
@layer reset, base, layout, components, pages, utilities;
@import 'base/reset.css' layer(reset);
@import 'base/typography.css' layer(base);
@import 'components/button.css' layer(components);Tip
The @layer import pattern is the future: @import 'reset.css' layer(reset). It combines file organization with specificity control in one line. Later layers always override earlier ones regardless of selector specificity.
BEM keeps CSS flat, readable, and avoids specificity wars
Common Mistake
Importing utility.css before components.css. CSS import order = cascade order. Utilities should always come LAST so they can override component styles. Reset first, then variables, base, layout, components, and utilities last.
Practice Task
Set up a CSS file structure: (1) Create 4 files: reset.css, variables.css, components.css, utilities.css, (2) Import them in the correct order in main.css, (3) Add @layer declarations to control specificity, (4) Verify a utility class overrides a component style.
Quick Quiz
Key Takeaways
- How you structure your CSS files determines how maintainable your project is.
- Single file - Fine for small sites. Organize with comment headers: /* === HEADER === */
- Component files - One CSS file per component: card.css, navbar.css, footer.css. Import into main.css
- 7-1 Pattern - 7 folders + 1 main file: abstracts/, base/, components/, layout/, pages/, themes/, vendors/