Web Development · Intermediate level

Intermediate level · Module 1: Accessible and Maintainable Front Ends · Lesson 3 of 3

Maintainable CSS with Design Tokens

Organise CSS with naming conventions, design tokens and reusable components so sites stay consistent as they grow.

In this lesson you will

  • Define design tokens with custom properties
  • Structure CSS into base, layout and component styles with a naming convention

Key concepts

design tokenscomponent classesnaming conventions (BEM)avoiding specificity wars

The lesson

Design tokens are named values for colours, spacing, font sizes and radii: --color-primary, --space-3. Defining them once as custom properties keeps the design consistent and lets you change a brand colour in one place.

Structure styles in layers: base styles for elements, layout styles for page regions and component styles such as .card, .card__title and .card--featured (a BEM-style convention). Class-based components are reused rather than restyled for each page.

Keep specificity low and equal: avoid IDs and long nested selectors in CSS. When everything is a single class, rules are easy to predict and override.

Step by step

  1. Extract colours and spacing into design tokens.
  2. Rename styles into component classes with a convention.
  3. Remove ID selectors and deep nesting.
  4. Change the brand colour in one place and check the whole site.

Practice activity

Refactor the audited site's CSS around design tokens and components.

Expected result: The site looks the same, but a brand change needs only token edits and the CSS uses a consistent convention.

Check your understanding

  1. What are design tokens?

    Show answer

    Named values such as colours and spacing reused across a design.

  2. Why keep selector specificity low?

    Show answer

    Rules are easier to predict and override.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.