Ok, there’s already been a metric uckton of CSS Style Guides written, and they were not written by evil insane google clown’s posse drinking corporate kool-aid while sacrificing a unicorn to honor the gods of Windows and other properitory while little umpa lumpa’s were doing the Ubuntu Dance in he forrst, no these guides were actually written for a purpose and a reason. Anyone that does web development daily knows this can be a stress-ful job namely when doing multipul projects, going back and updating code you wrote 5 years ago, etc, etc. These guides were wrote to **HELP** you do this job easier, and all you have to do is READ THE DAMN MANUAL! Yes I know no man want’s to read a manual we can duck tape anything into shape and those screws and bolts were just extras, but you know what that costs more in the long run.
In this business we have to work with other people, yes even if were anti-social pissed off cubicle living wage-slaves ( btw I don’t work in a cubicle but I have had to pull out the office space action on quite a few fax machines, printers, etc )
we still have to work with others, and even worse then we have to work with our OWN CODE that we wrote 2 yrs, 4 yrs, shit I work with code I wrote 7 and 8 yrs ago sometimes as scary as it sounds I still do have some of my original clients and still have some very old work out there still running solid to this day and ever so often I have to update it, but this post wasn’t inspired by my own coding habits of years ago. It was inspired by something I’m just not gonna mention atm, Anyway
before I ramble and rant. Let’s just get down to business shall we?
Ok CSS is a “language” I guess, it’s not a cult, a religion, or even a black art that takes a lvl 99 Wizard to Obtain it’s a much loved needed element that every Designer, Developer, Programmer and 12 year old kid should already know if there gonna be in this business. Now I don’t ask you to remember a HolyHack or a trigger hasLayout on demand, I got HBO for on demand what I do ask thou is in your CSS follow some kinda flipping naming conventions that make a little bit of sense.
Like does it actual take you longer to right “left” instead of “lft”? I mean that extra character cost you how much time? Yea exactly, but you know what the difference in adding it does? Anyone that speaks 4th grade english knows it has something to do with LEFT not RIGHT.
Underscopes , Fore Scope and 11 years ago there was a browser browser released and god did it ruin the whole world on browser’s, we had to add hack’s for everything, even a HOVER needed javascript for that bad boy. But you know what, it can’t read a underscope and it actually takes 2 key presses to make a underscore and only one to make a Hyphen, so if your just lazy and don’t want to type or use a editor that actually will fill in your own styles, this will save you the extra key press your missing out on by naming your CSS classes something that makes sense instead of
#bar .foo ul li a unicorn:last-child
I’m not even gonna get onto the ID property in CSS styling, just if you know what a Singleton Pattern is, then your creating a CSS Singleton pattern when you style using ID’s, pushing more weight onto something to style it isn’t the answer 99% of the time. ID’s have there place and sometimes there useful, but not every where.
Comments in your CSS
OMG what? First you want me to document my PHP Code, then you want me to Document my JS code now you want what?!!?!?1
Your dam skippy I do, remember other people see these style sheets, you can’t hide them like your PHP Code. These are out in the public wide open, yea you can minify it but then when the client asks you to make a update (x) years from now and I’m sure your code style will have changed in (x) Years but that’s where comments come into place, Ideally you should have a properly commented style sheet, at the top a HEADER with hopefully a Table of Contents of Some Kind, Maybe even a SWATCH of Colors used that’d be superfly, and through-out your code you should comment the Sections on what they are. You could even go so far as to separate them out like put all the TOP HEADER elements in first, then under that your Elements that go under that, and down the rabbit hole we go.
Now Since there’s already been a metric unicorn’s rear-end of these style guides and conventions out there, I’m just gonna link out to some of them and hopefully you will take 10 minutes out of your day and read a couple them. So dun-dun-dun!
The Blog Roll pleas
-
Net tuts
CSS Best Practices – Please read the EDITOR Comments
-
Web Designer Depot’s
2009 Edition of CSS Best Practices
-
Dezinerfolio’s
CSS Guide – 09
Ok So there’s the goods, now start following some kinda coding conventions and you will be coding like a boss playa, and your other team members won’t want to shoot them-self’s or take one of the Windows machines out back to office space it!@
Comment if you have any good CSS Style Guides.
No tags for this post.