Same class name, zero collision
This .card is a warm promo panel. The component beside it also calls its root .card — and they do not fight, because each scoped skin only matches inside its own stamped subtree.
Scoped styles
Two components on this page both call their root element .card. In plain CSS the second skin would overwrite the first. Here they coexist: a .skin whose first line is scoped only ever styles the subtree it ships with. It's pure compile time — a path-derived id stamped onto the HTML and appended to the skin's selectors. No runtime, no class hashing in your markup, no collision.
uptime, because there is no client framework to crash
measuredWhat actually shipped
- The
.cardin the warm promo and the.cardin the dark stat tile are different rules, scoped to different ids. - This page also uses a global skin (
base.skin, via/base.wd) —.btn,.eyebrow,.gridstill work everywhere, unscoped. - Design tokens stay global: every scoped skin still reads
$accent,$warm,$radiusfrom:root, so dark mode keeps working for free. - A
:global(.x)selector inside a scoped skin opts a single rule back out.