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?
2 comments
Log in to join the discussion
Log In2 Comments
riley5957h 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
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