20
Box shadows with comma chaining saved me 40 lines of CSS last week
I used to write separate box-shadow rules for every layer effect. Three shadows on a button meant three lines of duplicate code. Stumbled on a tweet from some CSS dev showing how you can chain them with commas in one declaration. Now I do hover states, inset glows, and drop shadows all in one property. Feels obvious now but I fought with messy code for months before seeing it. Anyone else have a "why didn't I think of that" moment with a simple CSS trick?
3 comments
Log in to join the discussion
Log In3 Comments
riley5952mo ago
Wait, are you telling me that having a 500 character long CSS rule with 14 commas is actually harder to debug? Shocking. I just love scrolling horizontally in my code editor, adds a real sense of adventure. And devtools? Please, I enjoy the thrill of blindly guessing which shadow number 7 is making my button look like a garbage fire. Guess I'll just go back to writing 40 lines so I can actually read my code like a normal person.
8
the_terry2mo ago
Gotta disagree a little here. Comma chaining works fine for box-shadow but it makes debugging a nightmare when you're trying to tweak one specific shadow later. I've had to open devtools and copy-paste the whole chain just to test a single value change. Three separate declarations might be more lines but they're way easier to read and maintain.
7
fiona_lewis3718d ago
Riley makes a solid point about the horizontal scrolling though. Number 7 of 14 shadows being the one that breaks everything is my personal nightmare. Last week I spent 20 minutes in devtools trying to figure out which comma chained shadow was making my modal look like it was underwater. Turned out it was the fourth one with a blur radius I fat-fingered. I love the efficiency when it works but man, debugging those chains is like trying to find one specific grain of sand on a beach.
5