As a designer and coder hybrid, and somewhat of a “can’t stand default; must edit” person, I’m CONSTANTLY facing ugly code and ugly CSS. And when I say ugly I mean it’s so ugly it could make you cry.
You’re probably thinking what I have to work with isn’t that bad, right? Right?
Put some sunglasses on, the below example will burn your eyeballs out of their sockets or make you wish it did:
If you saw no problem with that you either have WAY too much experience with people who code like that, or you’re one of those people who code like that. If you’re one of those people who code like that I hate you. How the HELL am I supposed to work with that?! It’s one thing to optimise your code, but collapsing it like that cannot make that much of a difference.
You know what’s worse than that? This…
Why is it worse? Well for one it infuriates me the most. It is the ugliest, laziest, pathetic-est attempt to code CSS ever. If you code like this I hate you too!!
One second there are spaces between the property and values, and the next there are not. One second the class is defined beside the class, and the next it’s defined underneath. It’s a minefield that is hell to work with. One wrong find and replace and you’re screwed, and the alternative is to grow a beard trying to fix it. I’d know, I did it for the first lot!
The problem is this:
- When things are starting and stopping all over the place it’s hard to read. No matter how colour coded it is.
- When things aren’t formatted consistently it throws up bogs that someone scanning or attempting to edit gets stuck in because it looks like something’s wrong (because something is different).
- You can’t simply find and replace all “:” because they may be part of a class or property, such as a:hover.
- Bad coding practices (as far as I’m concerned). For starters it looks like you’re using the Dreamweaver hint system, which is fine, but seriously add spaces.
- It’s UGLY and unsexy!
- It’s LAZY AS HELL!!!
I’ve taken the liberty to highlight the two main issues, which in short is simply that the creator infuriates me by not taking the minuscule amount of time to either code better or consistently, and I can’t fix it on my own without loosing precious hours and gaining a beard.
So I went to Google and begged and pleaded for something to help me before my eyes were completely melted or I’d have to book in for a sex change. I found the most AMAZING website in the entire UNIVERSE and it makes me so happy I could kiss the creator and give them my future first born child! Okay maybe not but if I had a disposable income they’d be getting a pretty substantial donation!
I discovered CSS Beautify! It’s the most AMAZING and AWESOME website in the entire universe bar none. You put ugly CSS in, and get beautiful, sexy, and professional looking CSS out. It’s not like the others that remove spaces and make it ugly, it’s of its own genre and it’s absolutely amazing. In fact, it’s so amazing it saved me enough time that I could write this blog instead of fix ugly CSS.
Beautiful CSS from CSS Beautify (the first example fixed):
So go on, bookmark it. You know you’ll need it to fight the ugly CSS epidemic out there!