LSCSS

Apply

Utility classes

This page is not a defence of utility-first CSS in markup (Tailwind-style class soup). That approach is not semantic, it pollutes HTML, and it is painful to maintain at a glance. LSCSS utilities are rare CSS helpers—not layout and spacing smeared across every element.

Quick decision rules

  1. Does this solve a universal accessibility problem?

    YesUtility

    NoNext question

  2. Does this keep repeating as a UI pattern?

    YesComponent

    NoNext question

  3. Is this only visual presentation?

    YesTheme or component, not utility

    No

    A utility should have to justify its existence.

For the shorter utility vs component flow, seedecision trees. Most spacing, layout, colour, and typography decisions belong in components, layout, or theme instead.

Accessibility utilities

These are the utilities that fit naturally because they solve universal browser and assistive technology problems, not temporary design decisions.

CSS code example
.vh {}
.a11y-link {}
.a11y-link--focusable {}

Visually hidden text

CSS code example
.vh {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

Use .vh for content that should remain available to screen readers while staying visually hidden.

Accessible jump links

CSS code example
.a11y-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    translate: 0 -100%;
}

.a11y-link--focusable:focus,
.a11y-link--focusable:focus-visible {
    translate: 0 0;
}

Use .a11y-link with.a11y-link--focusable for skip links that become visible when focused.

When a utility is justified

  • It solves a universal accessibility problem.
  • It behaves consistently across the whole project.
  • It does not replace a meaningful component class.
  • It stays understandable without requiring six companion utilities.
  • It improves clarity instead of creating class soup.

If the same utility group keeps appearing together, it is not a utility pattern. It is a component asking to be named.

Avoid class soup

HTML code example
<article class="p-4 mb-4 bg-white rounded shadow text-center grid gap-4">
    <h2 class="text-xl font-bold mb-2">Product title</h2>
    <p class="text-sm text-muted mb-4">Product description</p>
</article>

This pushes layout, spacing, colour, and typography decisions into the markup and turns HTML into a styling spreadsheet.

HTML code example
<article class="product-card">
    <h2 class="title">Product title</h2>
    <p class="description">Product description</p>
</article>

Prefer semantic components when the markup represents a real UI pattern. Components scale. Utility soup spreads like ivy.

Next useful pages