Why I Still Hand-Write CSS
I have tried the whole arc. Utility-first, CSS-in-JS, atomic, unstyled components, design tokens piped from Figma. All of them solve something real. None of them made me faster at the thing I actually do, which is making a page feel like it was made by someone with opinions.
The cost nobody prices in
Every abstraction I adopt is a small tax charged on every future edit. Not once — forever. A utility class is fast to type and slow to reason about, because the answer to "why is this element 13px wider than its sibling" lives in a different file than the element itself.
The best debugging tool is being able to hold the whole thing in your head.
What I actually want
- One place where the visual language of a page is written down.
- Fewer names to invent.
--accentbeatsbg-brand-500-hover. - The freedom to use
grid-template-areaslike a layout, not a workaround.
Where I landed
I still use a framework. But I write the layer that makes the page look like mine by hand, in one file, with comments explaining intent rather than mechanics. It is slower on day one and faster for the two years after it.
.issue-card {
display: grid;
grid-template-areas: "cover meta";
border-radius: 20px;
}That is the whole trick. There is no trick. It is just deciding where your taste lives and refusing to scatter it.
(Frequently asked questions)
Does this mean CSS-in-JS is bad?
No. It solves component-scoped state and co-located styling well. I use it in apps. This is about the marketing pages, where one stylesheet you fully understand beats a build step you trust.
