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

Next lesson: Specificity management

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies