Modern CSS. Regardless of who or what writes it.
Rules for the robust and accessible UIs that the web deserves, encompassing architecture, typography, colors, layout, and motion. One fetchable file.
Get started
.card {
color: #f5f5f5;
width: 600px;
padding: 16px 0;
}
@media (max-width: 768px) {
.card {
padding: 12px 0;
}
}
.card:hover {
background-color: #e0e0e0;
}@layer components {
@scope (.card) to (.slot) {
:scope {
color: light-dark(oklch(96% 0 0deg), oklch(25% 0 0deg));
container-type: inline-size;
padding-block: clamp(1rem, 2cqi, 2rem);
&:hover {
background-color: oklch(from currentcolor calc(l + 10%) c h);
}
}
}
}Before & after with GPT-5.3-Codex and Claude Opus 4.6.
What are the rules
11 rules. 5 areas. Each with a constraint, rationale and code example.
-
Architecture
Manage specificity with
@layer, encapsulated styles with@scope, nesting with&and relational styles with:has() -
Typography
Fluid type sizes with
clamp(), and text wrapping withtext-wrap: balanceandpretty -
Colors
Perceptually uniform lightness with
oklch(), color scheme support withlight-dark(), and relative colors -
Layout
Container queries and units, intrinsic sizing with
fit-contentandmax-content -
Motion
Respect motion preferences with
prefers-reduced-motion: no-preference
Why this matters
Coding agents need clear rules to use modern CSS. Left alone, they default to the outdated CSS they were predominantly trained on, leading to fragile, unresponsive and inaccessible UIs.
With modern foundations in place, you're free to focus on what matters: the unique aspects of your project.
Shoulders of giants
Thanks to ModernCSS.dev, Utopia.fyi, CSS Weekly, modern.css, and TODS. If you'd like to learn more about modern CSS, these are great places to start. And to my fellow Stylelint maintainers, who proved that better tooling leads to better CSS.
Join in
The rules are a living document. I've started with the big wins, but there's plenty more we can do. Let's make modern CSS the norm, for the good of the web.