light-dark()
Two color values in one declaration, picked by the color scheme, which removes most of the reason a theme needed a second block of custom properties at all.
scrollbar-gutter
The layout shifts by fifteen pixels when a modal opens, everybody blames the modal, and the actual cause is the scrollbar disappearing along with it.
currentColor
A client moved to a slightly different red, I ran the find and replace across the stylesheet, and one icon came out the old color, which sent me off counting how many times I'd typed a value the browser was going to use anyway.
text-wrap: balance and pretty
Two values that fix the two ugliest things typesetting does on the web, and the rule for which to use is entirely about how many lines you have.
Native nesting and the ampersand
I moved one component off the preprocessor and the card came back as a column of unstyled text with the padding still on it, because every rule in that file whose selector started with an ampersand had quietly stopped being a rule.
z-index: 9999
A size dropdown on a client's product grid kept rendering underneath the row of products below it, and the 9999 already sitting on it had been doing nothing at all for two years.
10% lighter
The client's designer said the hover on a button looked purple, and it did, even though the hue number hadn't moved a single degree off the blue it was supposed to be.
:is() and :where()
Two selectors that look interchangeable in every example anybody writes, and differ on the one thing that actually causes problems later.
I couldn't read it in the sun
I took my phone out to the front steps to look at a page I'd built, couldn't read a word of it, and then found that every pair of colors on it cleared the threshold with room to spare.
prefers-reduced-motion
An operating system setting that has been sitting there since 2013 telling you somebody gets motion sick, and the two-line stylesheet that is the whole of respecting it.
Six kinds of white
A client asked what it would take for their site to go dark along with their laptop, I said half a day, and then I searched the stylesheet for white and got 61 results.
content: "\00a0"
Why the most-used string in my stylesheets is an invisible one, how CSS escapes will silently eat the character after them, and the parts of the content property that aren't strings at all.
Nobody prints anything
Except invoices, tickets, recipes, directions, order confirmations, and every page a client's accountant touches, and the stylesheet for all of that is about 40 lines nobody thinks to write.
word-break and overflow-wrap
Two properties that sound like synonyms, do different things, and get reached for in the wrong order roughly every time a long URL breaks out of a card.
BEM and the long class name
A naming convention is a bet that the next person reads class names before they read CSS, and the ugly double underscores are paying for something real, which is not having to know the whole stylesheet just to change one thing.
float: left is a layout system
We are building every grid on the web out of a property invented to wrap text around a picture, and the pile of workarounds we've grown on top of it has stopped looking like workarounds.