Organizing CSS

A stylesheet with 50 lines can be in any order. One with 5,000 lines needs a structure.

A sensible order inside the file

Go from broad to narrow. This also fits how the cascade works, since later rules beat earlier ones of the same strength.

1. Reset / base: box-sizing, margin resets, body font.
2. Variables: colors, spacing, fonts in :root.
3. Elements: headings, links, images, forms.
4. Layout: containers, grids, header, footer.
5. Components: buttons, cards, navigation, alerts.
6. Utilities and overrides.

1
2
3
4
5
6
7
8
9
10

/* ========== Base ========== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); }

/* ========== Layout ========== */
.container { width: min(100% - 2rem, 70rem); margin-inline: auto; }

/* ========== Components ========== */
.btn { ... }
.card { ... }

Comments with a clear heading make a long file searchable.

A small reset

You do not need a giant reset. A few lines go a long way:

1
2
3
4

*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }
body { margin: 0; line-height: 1.5; }

Splitting into files

When a single file gets long, split by role or component:

1
2
3
4
5
6
7

css/
  base.css          reset, variables, element styles
  layout.css        grid, containers, header and footer
  components/
    button.css
    card.css
  utilities.css

Every extra file is another request, though. Either combine them in a build step, or on small sites keep one file. The CSS @import rule loads sequentially and slows pages down, so avoid it for production.

Property order inside a rule

Pick a convention and stick to it. A readable one is: position, display and layout, box model, typography, visuals, other.

1
2
3
4
5
6
7
8

.card {
  position: relative;
  display: flex;
  padding: 1rem;
  font-size: 1rem;
  background: #fff;
  border-radius: 8px;
}

The exact order matters less than being consistent.

Remove dead CSS

Unused rules slow pages and confuse readers. Developer tools have a Coverage panel that shows which CSS a page does not use.