Base
Reset, body defaults, typography defaults and shared element rules.
Platform under construction
CSS File Structure
CSS file structure is the difference between a stylesheet you can extend and a stylesheet you are afraid to touch.
css/ settings/tokens.css base/reset.css layout/shell.css components/button.css
Architecture mental model
A good CSS structure tells you where a rule belongs.
Small projects can survive one stylesheet for a while. Real projects need a structure that makes future decisions obvious.
File structure is not about making folders because folders look professional. It is about reducing search time, avoiding duplicate rules and giving every type of CSS a predictable home.
The best structure is simple enough to remember and strict enough to prevent random CSS from being thrown anywhere.
Tokens
Named values for colors, spacing, typography, radii and motion.
Layout
Page shells, grids, regions and structural composition rules.
Components
Buttons, cards, navigation, forms, modals and reusable UI pieces.
Visual model
See the system before adding more selectors.
settings/
Design tokens and custom properties live first.
base/
Global element defaults keep the browser predictable.
layout/
Page structure and reusable layout primitives belong here.
components/
Reusable interface pieces carry their own states.
Good CSS versus fragile CSS
Predictable folder structure
css/
settings/tokens.css
base/reset.css
base/typography.css
layout/shell.css
components/button.css
components/card.css
utilities/spacing.cssEverything in one growing file
styles.css
/* reset */
/* random button */
/* old homepage */
/* quick fix */
/* another quick fix */Rules of thumb
Architecture should make the next CSS decision easier.
Start with categories
Use a small set of folders that match how CSS decisions are made.
Keep global CSS rare
Global rules are powerful and should be easy to find.
Separate layout from components
A card should not know the entire page grid.
Keep exceptions visible
Page-specific or temporary CSS should not hide inside reusable components.
Name files by responsibility
button.css is clearer than styles2.css or new.css.
Refactor when patterns repeat
When the same pattern appears three times, it probably deserves a home.
Production thinking
Scalable CSS is boring, searchable and hard to break.
Why does this matter?
Good file structure lowers the cost of every future change. You spend less time hunting and more time designing.
Accessibility
Accessibility rules such as focus styles, reduced motion and text contrast should be easy to find, not scattered randomly.
Production note
A team-friendly structure is boring in the best way: predictable, searchable and hard to misuse.
SEO note
CSS organization does not directly rank a page, but maintainable CSS helps ship faster, cleaner pages with fewer visual regressions.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Mark which rules belong in settings, base, layout and components.
- Move the token values mentally into a tokens file.
- Explain why .site-shell and .lesson-card should not live in the same responsibility bucket.
Practice assignment
Do this before moving to the next lesson.
- Sketch a CSS folder structure for a small landing page.
- Place reset, typography, layout, buttons and cards in the right folders.
- Write one rule for when page-specific CSS is allowed.
Try it yourself
Organize a small CSS project
Self-check
Before you continue, prove that you understand CSS File Structure.
Answer these questions before moving on. If you cannot find, name or move a rule safely, the architecture still needs work.
- Can you explain where base CSS ends and component CSS begins?
- Can you find a future button rule without searching the whole project?
- Can you keep layout rules out of reusable components?
- Can you avoid dumping quick fixes at the bottom of a file?
- Can you keep the structure simple enough for another developer?
Senior audit upgrade
Import order and layers should match responsibility.
A CSS folder structure should make the cascade predictable: tokens, reset, base, layout, components and utilities.
Order
Load broad foundations before specific components.
Layers
Use @layer when the architecture benefits from explicit cascade groups.
Ownership
A file should have a clear responsibility, not a random mix of fixes.