Organizing CSS

While there are a hundred lines of styles, order does not matter. When there are thousands, without agreements you cannot find the right rule and are afraid to change anything. This lesson covers the usual habits that keep CSS in order.

An external stylesheet

In the course examples the styles live in a <style> tag. On a real site they are moved to a separate file with the .css extension and connected with a <link> tag in the <head>:

<link rel="stylesheet" href="styles.css">
<p>The styles of this page are in the styles.css file.</p>

One stylesheet serves all the pages of the site, and the browser downloads it once and remembers it.

Order inside the file

It is handy to arrange rules from general to specific — in that order they are easier to find:

styles.css
  1. Variables     — colors, fonts, spacing on :root
  2. Base styles   — body, headings, links, images
  3. Layout        — header, columns, footer
  4. Components    — buttons, cards, forms
  5. Utilities     — small classes like .hidden

A big project is split into several files along the same sections.

Base styles

A file usually starts with a short reset — rules that remove inconvenient browser defaults:

*, *::before, *::after {
  box-sizing: border-box;
}
 
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}
 
img {
  max-width: 100%;
  height: auto;
}

Class names: BEM

A popular naming convention is called BEM — block, element, modifier. A block is a standalone component, an element is its part after two underscores, a modifier is a variant after two hyphens:

<style>
  .card { padding: 12px; border: 1px solid silver; margin-bottom: 8px; }
  .card__title { margin: 0 0 4px; font-size: 18px; }
  .card__price { color: seagreen; }
  .card--sale { border-color: crimson; }
</style>
 
<div class="card">
  <h3 class="card__title">Backpack</h3>
  <span class="card__price">$40</span>
</div>
<div class="card card--sale">
  <h3 class="card__title">Tent</h3>
  <span class="card__price">$90</span>
</div>

The class name shows at once which component it belongs to, and all selectors are a single class of equal strength. BEM and other methodologies are covered in detail in the next chapter, "CSS methodologies and architecture".

Comments and layers

Comments in CSS are written between /* and */. They label the sections of a file. The @layer rule (cascade layers) sets the order of sections explicitly: styles from a later layer win, whatever the specificity:

@layer base, components;
 
/* Base styles */
@layer base {
  a { color: steelblue; }
}
 
/* Components */
@layer components {
  .btn { color: white; }
}

Layers are covered in detail in the lesson "Cascade layers: @layer" at the end of this chapter.

Common mistake

Long selectors and ids for "reliability". A rule with #sidebar is so strong that a normal class cannot override it later:

<style>
  #sidebar .menu a { color: steelblue; }
  .active { color: crimson; font-weight: bold; }
</style>
 
<nav id="sidebar">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#" class="active">Catalog — should be red</a></li>
  </ul>
</nav>

The .active class lost, and the link stayed blue. Style elements with short single-class selectors — then the rule below wins, and styles are predictable.