Got told my CSS was too nested and it changed how I write everything

A senior dev on my team looked at my 400-line stylesheet last month and said 'your specificity is out of control.' I switched to using utility classes and barely touch nesting anymore. Has anyone else had to unlearn a bad habit after someone pointed it out directly?

2 comments

2 Comments

betty_white3920d ago

Did you read that Smashing Magazine article about CSS nesting causing 50% slower page loads on older phones? I saw it floating around Twitter last week. It really made me rethink all those deeply nested selectors I was proud of. Now I keep everything flat and use utility classes like you mentioned, it's way easier to debug too. Sometimes you gotta have someone shake you out of those bad habits before you realize how much time you're wasting.

vera_lewis20d ago

and that's the thing @betty_white39, nobody warns you that nesting feels like a victory until you're staring at a selector that's 6 levels deep and can't remember why you put it there. i had a similar moment where a coworker just said "who broke the cascade?" and pointed at my file, i died a little inside. so what did you replace your nesting with exactly? did you go full utility first or did you keep some component styles around? because i tried the utility thing and ended up with html that reads like a grocery list of classes, felt wrong but everyone says it's better.