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:
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!
Leave a Reply
19 Comments on "Bye bye ugly CSS!"
*gets pitch fork and fire on a stick*
RIOT!!! BURN DOWN THEM EVIL PEOPLE WHO USE “COMPACT” CSS!!
RIOT MEN! RIOT!!
*turns to see army lounging around*
WHY YOU NOT RIOT?
They should definitely be protested against!!
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
LOL yes, it also means you were taught right. I know you self taught from Eric Meyer, but you’re better at it than most school taught and professionals that I meet.
But of course, you said the magic word, “Eric Meyer.” Not “Rarely updated textbook from the mid 1990s and no effort to develop own industry knowledge” like the teachers at one of the TAFEs I went to. There was also one who seemed competent until she started typing all her HTML tags in capital letters. OH MY EYES!!!
Disclaimer: The teachers at my other TAFE were awesome. Have probably at least heard of Eric Meyer, if not used his resources.
Hmmm … maybe I should start teaching it and charging through the nose too! lol
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.”
referring to the first one. The second one is just lazy.
AMEN!
Well it’s not very good at it, since it can still be painfully read, and there are things that fix it out there.
That said I have also come across encrypted CSS and HTML/PHP before, I mean, whole files encrypted. Don’t buy Ixxio Cart. Not worth the money. Hard to navigate, has bugs, ugly encrypted code…list goes on. It uses like 3 divs to add padding. Can’t you have one div and put padding?!
Obfuscation is generally a stupid idea. It can easily be undone.
Some people try to peddle it on idiots, though. Check out “HTML Guardian.”
But you should especially be wary of encrypted PHP code. I’ve heard people (such as WordPress theme authors) encrypt some parts of their code, like copyright notices and whatnot, but because its hidden, you don’t quite know what it’s doing. If they’re hiding it from you, that’s good enough reason to be suspicious.
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
*makes another TAFE-related comment*
Which Diploma are you doing?
Now? Graphic Design. I havent actually signed up for the HTML/CSS/PHP ones yet. I’ll be doing them online though…I know too much so I’ll speed through them…the PHP and JavaScript ones I’ll take on campus because I’ll need the other classmates for help lol.
Oh okay, I thought !important was an IE hack.
Also the link doesnt change when I change the CSS. That said I love you too! 😀
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.