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 Sonnet 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
Respecting motion preferences with
prefers-reduced-motion: no-preference
Why this matters
AI needs clear rules to steer it to use modern CSS. Left alone, it defaults to the outdated CSS it was predominantly trained on, leading to fragile, unresponsive and inaccessible UIs.
With the foundations taken care of, you're free to focus on what matters: the unique aspects of your project.
Shoulders of giants
Thanks to ModernCSS.dev, Utopia.fyi, MDN Style Guide, 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.