CSS organization
Learn methods to organize large CSS files.
Organizing large styles
As a project grows, a single style.css becomes unreadable. The fix is to split styles into meaningful sections kept in separate files. A common split: base styles (reset, typography), layout styles (grid, flex), component styles (card, menu), utility classes (spacing, hiding).
Each file focuses on one concern. When you change a component you do not break the layout by accident. You join files with @import or a build tool.
File structure and partials
A common approach is to keep small partial files. Names start with an underscore: _base.css, _layout.css, _buttons.css. The underscore signals the file is not loaded on its own; it is merged into a main file.
The main file — usually main.css or style.css — holds only @import statements. You read the order from there: base first, then layout, then components, then utilities. Adding a new section shrinks to one line.
Section comments
Inside a file you also mark order with comments. Placing a bold comment line at the start of a section guides your eye while scanning the file. The comment names the section and lists its contents briefly; for example /* Forms: input, select, checkbox */.
Keep comments consistent: same shape, same place, same level of detail. A new teammate opening the file then has a map. A closing comment at the end of a section is also common; it makes the boundary clear.
Exercise Write the base section
Add the /* Base: reset, type */ section comment at the top. Then add margin: 0 and line-height: 1.5 to a body selector. Finally add max-width: 100% to an img selector.
Show example solution
/* add styles here */
/* Base: reset, type */
body {
margin: 0;
line-height: 1.5;
}
img {
max-width: 100%;
}Test yourself
-
Where do form input styles belong?
- _forms.css
- _base.css
- _layout.css
- _utilities.css
Show answer
_forms.css — Correct. Form inputs are a component; they go in a file like _forms.css under components.
-
Complete the @import statement
@import url("_buttons.css"); @import url("____"); @import url("_utilities.css");Show answer
@import url("_buttons.css"); @import url("_forms.css"); @import url("_utilities.css"); -
Match each partial to its purpose
- _base.css
- Reset and typography
- _layout.css
- Page layout
- _buttons.css
- Button component
- _utilities.css
- Helper classes