6 min
Style queries
Five surface variants, four child elements, and 20 selectors that existed only to tell a child which parent it was in. Style queries delete the whole grid of them. That isn't quite the same as saying you needed them.
CSS
All writing →34 posts filed under CSS, newest first.
6 min
currentColor
I opened a button component with 11 color declarations in it, across four variants, and the correct number was one per variant, because six of those properties already default to the thing they were being set to.
6 min
text-wrap: balance
A card grid where, at exactly one breakpoint, one heading broke with a single word on the second line, and the fix used to be a non-breaking space typed into the content by a person who'd have to remember forever.
6 min
Anchor positioning
When I wrote about the popover attribute I said the positioning half hadn't arrived and you'd still need a library for it, and it has now arrived in one browser, and it deletes the library completely.
6 min
Nesting is not Sass nesting
It looks close enough to what I've been writing since 2014 that I typed a BEM selector into it out of habit. The reason that doesn't work is the whole difference.
7 min
z-index: 9999
The number was never the problem, which is why no number ever fixes it. A post about stacking contexts and the 14-odd properties that quietly create one behind your back.
6 min
light-dark()
I rebuilt this site's theming at the weekend and deleted about half of the token file, and the thing that made it possible is one function and one property most people have never set.
10 min
#f0c
Why a hex code is base 16 in the first place, why the shorthand doubles instead of padding, why 80 isn't 50%, and what you genuinely can't read off six digits no matter how long you stare.
6 min
View transitions on a multi-page site
There's one argument for building a client-side app I've never had a good answer to: a real page navigation looks worse. The answer turns out to be a browser feature rather than a rebuttal.
7 min
It wrote my CSS and I rewrote it
A real component, plausible output in nine seconds, and I kept about a third. The two thirds I threw away were wrong in a specific and predictable way.
6 min
Subgrid
In 2017 I predicted the omission from Grid I'd be most annoyed by. I was right for about a year, and then I stopped noticing. That's the more interesting half.
6 min
Container queries
Firefox shipped these two weeks ago, which means all three engines now have the thing everyone has been asking for since about 2013, and the headline everyone's using for it is not quite right.
6 min
has() in one browser
The parent selector shipped last month, in one browser, after roughly 20 years of everyone being told it was impossible, and the interesting part isn't the new things it lets you draw.
7 min
Cascade layers
Three engines, six weeks, which almost never happens. It addresses the oldest structural problem in CSS: specificity is a terrible proxy for what you actually meant.
5 min
aspect-ratio
There is now a property that says what shape a box should be. I have wanted to write that sentence since about 2012.
7 min
:not():not()
Chaining :not() and comma-ing it match the exact same elements, and only one of them charges you specificity for it. Plus the negation that silently matches everything, and the typo that deletes your whole rule.
7 min
Contrast ratios lie
A page I'd checked properly, that passed every automated tool I own, was unreadable on my own phone in a beer garden in June, and the number had nothing to say about why.
7 min
Dark mode is a data problem
A client asked how long a dark mode would take and I said half a day, because I was thinking about colors, and the colors were about an hour of it.
7 min
Naming things
I spent 20 minutes on a variable name last week and felt bad about it for the rest of the afternoon, and I've since decided the 20 minutes was the only honest work I did that day.
6 min
Motion is not decoration
I built a parallax hero because a client asked for one, showed it to a colleague, and they asked me to close the tab, and then had a headache for the rest of the afternoon.
7 min
A design system for one
Everything written about design systems this year comes from teams of forty with a five-year roadmap. I build storefronts on a six-week clock. Sorting the practice from the apparatus.
7 min
Utility classes, reluctantly
I have spent three years telling anyone who'd listen that a class name should describe what a thing is and not what it looks like, and I've spent this month writing `mb-3` on a client project and finding that I don't mind.
7 min
position: sticky and the parent that eats it
It does exactly what it says, and fails completely silently when it can't. The culprit is nearly always a clearfix somebody wrote in 2014. Sometimes me.
6 min
Grid and Flexbox aren't competing
A reasonable question with a slightly annoying answer. The framing everyone repeats is perfectly true and is not the bit that helps you decide.
7 min
Grid shipped today
Firefox on the Tuesday, Chrome on the Thursday, and after seven years of building page layout out of a property that was invented to wrap text around a photograph, we have a layout system that was designed as one.
7 min
Custom properties arrive
These have been in three browsers since the spring and I spent nine months not using them, because I'd filed them as Sass variables with worse syntax, and under that filing they are genuinely worse.
7 min
The style guide nobody opened
I have built four of these now and exactly one is still alive. The difference between them was never the quality of the document, it was whether opening it was a decision somebody had to make.
6 min
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.
7 min
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.
6 min
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.
6 min
display: flex, finally
Flexbox has crossed the line where I can use it on real work, and the surprise isn't the layouts it enables. It's how much of my CSS turns out to have been compensation for not having it.
6 min
Six breakpoints and a prayer
Device breakpoints go stale the moment a new phone comes out. We can do better than yet another list of numbers.
6 min
@extend considered harmful
The Sass feature that looks like it saves you bytes will quietly rewrite the order of your selectors, move your rules to a part of the file you didn't write them in, and refuse to work inside a media query.
6 min
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.