Base styles

Quick decision rules

For the full base vs theme vs component flow, seedecision trees. Base styles should be predictable and boring.

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.

• body defaults
• base typography
• default link and media behaviour
• shared form element defaults
• global focus defaults where appropriate
• a small reset (optional — see below)

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.

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

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

    body {
        margin: 0;
        font-family: var(--ff);
        font-size: var(--fs);
        line-height: var(--lh);
        background: var(--c-background);
        color: var(--c-text);
    }
}

Resets are optional

Some developers do not use a reset stylesheet and would rather override individual browser defaults as they go. That is a valid position. CSS without a reset is not broken; you simply pay the cost of those overrides one component at a time, and you trust yourself to remember every place they need to land.

LSCSS recommends a very small, very deliberate reset in @layer base instead. The reset above is roughly the entire set worth adding by default: box-sizing for predictable widths, a sensible line-height onhtml, a body that starts from your tokens instead of the user agent's. That is the reset paying for itself in every component without ever needing to be remembered again.

What a reset should not be is a 300-line stylesheet that erases every default the browser ships, including ones that are already accessible and sensible. If a rule in your reset describes one component's needs, it is a component style hiding in the wrong layer. Move it.

If you would rather skip a reset entirely, omit the file and leave@layer base for typography and element defaults only. The architecture still works — the cascade still flows frombase upward — you have simply chosen to inherit the user agent's baseline instead of normalising it.

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.

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

    h1,
    h2,
    h3 {
        font-family: var(--ff);
        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.

.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