LSCSS

Live examples

Live component examples

This is where theory has to behave in public. Real rendered examples showing semantic structure, layers, accessibility, and modern CSS decisions without hiding behind diagrams.

Product card example

Example product

Semantic component structure using shallow selectors, deliberate modifiers, and predictable ownership.

View product

One clear parent. Short child classes. One real modifier. No utility soup. No deep selector chains.

Product card CSS

CSS code example 
.example-card {
    display: grid;
    gap: var(--space-m);
}

.example-card > .title {
    margin: 0;
}

.example-card--featured {
    border-color: var(--colour-accent);
}

State example

Temporary behaviour should be visible and explicit. Loading is not a modifier pretending to be permanent architecture.

CSS code example 
.example-card.is_loading {
    opacity: 0.7;
    pointer-events: none;
}

Bad versus better

Seeing the broken version first makes the architectural decision easier to recognise.

Bad version:

CSS code example 
.page .wrapper .card .title {
    color: red !important;
}

Better version:

CSS code example 
@layer components, theme;

@layer theme {
    .example-card > .title {
        color: var(--colour-accent);
    }
}

Check layer order before increasing specificity. Most CSS fights are ownership problems expressed through selectors.

Useful next examples