Bye bye ugly CSS!

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:

Ugly CSS

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…

Ugly CSS

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:

  1. When things are starting and stopping all over the place it’s hard to read. No matter how colour coded it is.
  2. 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).
  3. You can’t simply find and replace all “:” because they may be part of a class or property, such as a:hover.
  4. 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.
  5. It’s UGLY and unsexy!
  6. 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):

Beautiful CSS

So go on, bookmark it. You know you’ll need it to fight the ugly CSS epidemic out there!

Leave a Reply

Leave a Reply

newest oldest most voted
Notify of

*gets pitch fork and fire on a stick*

*turns to see army lounging around*

Your Loving Mother Who Loves CSS ... Sometimes!
Your Loving Mother Who Loves CSS ... Sometimes!

So does this mean I’m beautiful? Cause that’s how I’VE been doing mine for years!! Okay, I don’t have “important” anywhere in my code, but it IS easy for me to edit when I want to! ;D

Adrian Malacoda
Adrian Malacoda

I’m pretty sure people don’t code like this. Looks like the work of an obfuscator; i.e. deliberately made hard to read. Some people are finicky about their “secrets.”

Adrian Malacoda
Adrian Malacoda

referring to the first one. The second one is just lazy.


The “beautiful” one is ugly too. Vendor prefixes aren’t needed for border-radius any more, and it overuses !important.

“width: 100%” on a block-level element is probably a good sign someone doesn’t know what they’re doing, unless it’s overriding something else. Block level elements are full-width by default, and 100% width goes wacky if you use padding or margin (unless box-sizing is set to border-box) =P


There was a website I used to go to called khan academy. I originally went there for math help but now there are more options. There is a section where you can learn to code using Java. I did a few parts of this and I managed to learn how to make shapes and change colors to create the objectives set out for me like making a pizza or icecream. I would love to learn more programming languages.