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!
*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
I was purely referring to the formatting (readability) when I said it was beautiful. I think !important is depreciated, or it doesnt work on the newer IE’s? I’m just glad it’s not my CSS. Well, TECHNICALLY it IS on my website, but it’s not my hand coded stuff, and it has a license above it so I can hide behind that and point lol. That said my BunnyRabbitSex development CSS is probably horrifying. I will have to run it through and see what it comes up with. That said…it’s got a LOT of SMF CSS in it. Actually looking at it now it seems consistent and beautiful! As for how much of it is needed I don’t know. It’s still got ALL of the SMF CSS in it at the bottom. Up to “Styles for the general looks for the Curve theme” is all mine. So not much…however there HAVE been very long gaps between dev periods and it’s difficult to understand what’s what from a distance because of those gaps in time (I’m talking months, and at one point a year). I’ll probably rewrite it. http://www.bunnyrabbitsex.com/Themes/BunnyRabbitSex2/css/index.css See, I practice what I preach! 😀 So proud right now. MUMMY LOOK… Read more »
*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.
!important is not deprecated, and works fine in all browsers. What he means is that that particular style sheet uses it quite often. CSS rules have a natural order to how they are applied, with styles on the left taking precedence over styles on the right: user stylesheet -> inline styles (i.e. style attribute) -> website stylesheet Further, inside a stylesheet, certain types of selectors have priority over one another; an id selector beats a class selector, which in turn beats a bare element selector. The !important keyword is a convenient way to override this natural ordering. A rule specified as !important overrides rules that aren’t (unless, of course, one of those rules is specified as !important, in which case normal priority applies. Kind of like Quick Attack in Pokemon). The fact that this stylesheet needs to break the CSS priority rules so many times is a symptom of bad technical design (of the stylesheet itself, not of the visual look) and it makes the resultant styles confusing to follow. width: 100% is tricky because it actually means the width of the parent element. Daniel is not quite correct here; the default behavior of a block element is to fill… Read more »
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.