The Rule
A class is the initials of the CSS property, a dash, then the initials of the value.
display: flex; /* d-f */
justify-content: space-between; /* jc-sb */
text-transform: uppercase; /* tt-u */
Every class resolves to exactly one property.
Values
Numbers & scales keep their position instead of their initials.
<div className="p:4 fs:lg fw:600 zi:10 …"></div>
none & auto are never abbreviated. Every other value shortens to its initials, but these two keep their full spelling in every utility that accepts them. Reserving both words stops them colliding with the initials of other values under a shared prefix.
<div className="d:none pe:auto ob:none sb:auto …"></div>
Two utilities used to abbreviate where the rule says not to: tt-n for text-transform: none, and tl-a for table-layout: auto. Both spell the value out now, as tt:none & tl:auto.
Shared Prefixes
CSS has more properties than there are short letter pairs, so a few prefixes serve more than one property. The value tells them apart.
| Class | Property |
|---|---|
o:50 | opacity |
o:h | overflow |
p:4 | padding |
p:a | position |
c:white | color |
c:p | cursor |
The two value sets never overlap, so no class is ambiguous.
The playground shows the resolved property on hover, so you rarely have to remember which prefix is shared.
Exceptions
block-size & inline-size use their axis, because bs & is were already taken.
| Class prefix | Property |
|---|---|
ys | block-size |
xs | inline-size |
A shared prefix also limits what can be added later. color-scheme ships cs:l, cs:d & cs:ld, but not normal, because cs:n is already corner-shape: notch.