Modern CSS

Modern CSS features

Modern CSS features reduce defensive selectors, heavy naming systems, and JavaScript-driven styling. Used well, they make LSCSS simpler and clearer.

Start with these

:where()

Use expressive selectors without adding specificity weight. This is one of the safest modern CSS tools for architecture.

:has()

Style components based on their contents or state without reaching for extra JavaScript hooks too early.

Container queries

Make components respond to their container instead of the viewport. This supports more portable UI patterns.

Selector tools

:is()

Reduce selector repetition while keeping grouped patterns readable.

:not()

Use simple exclusions without turning selectors into puzzles.

CSS nesting

Keep related rules together, but avoid recreating deep selector chains.

Layout and experience tools

Logical properties

Reduce left/right assumptions and improve support for different writing directions.

View transitions

Enhance navigation and interface changes while respecting progressive enhancement.

LSCSS position

LSCSS uses modern CSS to reduce architectural friction. The goal is not more abstraction. The goal is clearer, simpler CSS with fewer override battles.