LSCSS

Base styles

Base styles

Some CSS should still be genuinely global. Resets, base typography, document defaults, and shared element behaviour belong in the base layer. The goal is sensible defaults, not styling the entire internet.

Quick decision rules

TEXT code example 
Ask:
Should this apply across the whole site by default?
→ Base layer

Is this specific to one component?
→ Component

Is this visual branding only?
→ Theme, not base

Base styles should be predictable and boring. If a global rule feels surprising, it probably belongs somewhere else.

What belongs in base styles

Base styles are for rules that should affect the whole project by default. They are not component styles, theme overrides, or quick fixes. They are the common ground the rest of the CSS builds on.

  • box sizing and safe reset rules
  • body defaults
  • base typography
  • default link and media behaviour
  • shared form element defaults
  • global focus defaults where appropriate

These rules belong in the base layer

Global styles still need the correct cascade position. Reset rules, body defaults, and base typography should sit in @layer base, below component, theme, and hacks layers.

This gives the project stable defaults without making global element selectors stronger than component ownership.

Reset and document defaults

A reset should create a predictable baseline without fighting every browser default for sport. Keep it small and intentional.

CSS code example 
@layer base {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        line-height: 1.5;
        text-size-adjust: 100%;
    }

    body {
        margin: 0;
        font-family: var(--font-body);
        background: var(--colour-background);
        color: var(--colour-text);
    }
}

Base typography

Typography defaults should usually be defined once. Components can adjust typography when they need a specific pattern, but repeated heading and paragraph defaults should not be copied into every component partial like an apology note.

CSS code example 
@layer base {
    h1,
    h2,
    h3,
    p,
    ul,
    ol {
        margin-block-start: 0;
    }

    h1,
    h2,
    h3 {
        font-family: var(--font-heading);
        line-height: 1.1;
    }

    a {
        color: currentColor;
    }
}

Avoid repeated global rules in components

If every card, panel, and article repeats the same heading reset or text rhythm, that rule probably belongs in base styles or a shared content pattern.

CSS code example 
.product-card h2 {
    font-size: 32px;
    line-height: 1.1;
    margin-top: 0;
}

.article-card h2 {
    font-size: 32px;
    line-height: 1.1;
    margin-top: 0;
}

Keep globally global styles global, but keep them in the correct layer. Use components for component behaviour, not for repeating document defaults.

Next useful pages