Untangling that stylish mess

Posted Tuesday, February 09, 2010, at 10:47PM by e;

It's amazing how crufty a CSS file can get over time.

I went through blogdowntown main CSS file this evening looking for code that was no longer used on the site. I ended up cutting the file down roughly 250 lines, or 14%.

At the same time I ported the stylesheet over to LESS, a CSS processor that allows you to use fun things like variables and nesting that really should be in the CSS spec itself.

Run through the LESS processor, that same file shrinks down even a bit further, to 1154 lines. More importantly, the process took the file from 26976 bytes (original) to 24957 bytes (LESS file) to 22721 bytes (output file, which gets used on the site).

Is anyone going to notice? No.

The nesting makes the file a lot more readable, so that should make my life better going forward. I haven't even started to think about whether there are situations where we would use LESS's mixins, so I can't speak to that.

All fanciness aside, the most important thing I realized was just how easy it is to throw styles in a file with no sense of organization. Cleaning that up will be a much longer process.