Warning: Accidentally discovered a CSS trick at a local meetup that saved 200 lines of code

I was at a css hack night in Austin last month watching some guy rebuild a dashboard with flexbox and gap instead of margins everywhere. He showed how just using gap on the parent container removed all those extra spacing classes, and it blew my mind how much cleaner my own code got. Has anyone else found a simple change like this that cuts down your stylesheet size a ton?

2 comments

2 Comments

hugo374d ago

That's a good question and I've been wondering the same thing lately. Did you run into any browser compatibility issues with gap on flex containers? I know older browsers treat it differently than grid. I've been holding off on using it everywhere because I still support some legacy systems at work, but I keep hearing how much cleaner the code gets.

evan514d ago

hugo37 living in 2019 over here asking about browser compat. I'd tell you the same thing I told my grandma when she asked if her ancient iPad could run the new facebook update: legacy support is a prison we build for ourselves. The gap trick saved me like 180 lines and honestly the only compatibility issue I've seen is with the ghost of Internet Explorer haunting a bank's internal tool. You tried just wrapping the gap in a feature query?