the_nathan•6d agoRising Star

Shoutout to the guy who told me to stop nesting my CSS so deep

I was building a simple landing page and had like 6 levels of divs inside each other. Some guy on Reddit told me I was making a nightmare for myself and to use BEM naming instead. He said something like 'your browser is crying trying to figure out which .content div you mean.' I swapped to block-element-modifier class names and cut my stylesheet from 400 lines to 200 lines in about 2 hours. Now I can actually find what I need to edit without scrolling forever. Has anyone else had a random comment from a stranger totally rewire how you code?

3 comments

3 Comments

hugo_robinson256d agoTop Commenter

your browser is crying" is a little dramatic don't you think? I mean sure deep nesting is bad but that guy acted like you broke the internet. 400 lines down to 200 is a solid improvement though I'll give you that. But some people act like you committed a crime against humanity for having a few extra divs. CSS is already annoying enough without reddit telling you how to live your life.

jana_hart186d ago

400 lines down to 200 is a solid improvement" - see that's the thing though, nobody ever talks about how those 200 lines are probably still a mess if you didn't fix the actual structure. I had a project once where I cut code in half but the nesting was still 10 divs deep, and the browser was still choking on repaints. Sometimes the real win is just making it readable for your future self, not impressing some random critique.

barbarah196d ago

Oh man, careful with that BEM stuff too though. It can turn into a total mess if you overdo it, like having a class named something like "block__element - modifier - another-thing" and then you're back to the same problem just with longer names. The real trick is finding the middle ground where it actually helps you instead of becoming its own headache.