Loading…
0
A code review in 2019 made me quit overusing CSS variables
Back in 2019 I had a project with like 80 custom properties for colors and spacing. A senior dev looked at it and said, "You're not making this simpler, you're just moving the complexity." That hit hard because I thought I was being clever. I changed to using variables only for things that repeat 3 or more times, everything else stays inline. My next build in Austin took about 30% less time to tweak. Now I ask myself if a variable is really earning its name before I add one. Has anyone else had to dial back a pattern they were proud of?
1 comments
Log in to join the discussion
Log In1 Comment
ivancoleman14d ago
I see what you're saying about that "moving the complexity" line, but I gotta push back a little. Those 80 variables for colors and spacing... that sounds like a design system trying to happen, not overengineering. When you inline everything, you just end up with the same color hex code scattered in 12 spots, and good luck when the client wants a slightly different blue.
The real trick isn't counting how many times something repeats, it's whether the variable name actually means something in the context of the design. Like, ` - spacing-card` tells me a lot more than just putting `16px` everywhere, even if it only shows up twice. Because next month when you need to adjust that padding, you won't have to go hunting through 30 files.
But I do get the 30% faster tweaks though. Sometimes you're right, too many layers just makes you dig through a dictionary just to change one little thing. It's a balance, and I think that senior dev was half right... just maybe not the half you took away from it.
4