Top tips for organising your stylesheet
This entry was posted on October 28, 2007
If you take a look at my stylesheet, you will see that it is a complete mess! Aisling may like to be taken on an adventure when she’s looking through her stylesheet, but I do not! I like to be able to scroll through and find exactly what I’m looking for. I want to be able to see with a glance the padding that makes my layout mess up in Internet Explorer, or the typo that means my layout fails in Firefox.
Group your CSS rules
Grouping is good! So, have all your header rules in one place, all your link rules in another place, all your table rules together. Keep like things together, and unlike things apart.
Comment your stylesheet
/* Comments in stylesheets are enclosed with a forward slash and an asterisk. You can use comments to provide headers for each section of your stylesheet, as well as to leave notes on what each part is for, so that you (or anyone else working on your stylesheet) will know what each part does. */
Shorten your declarations
body { margin-top:0px; margin-bottom:0px; margin-right:0px; margin-left:0px;} can be shortened to body {margin:0;} - much less text, don’t you agree? Anything that has a value of 0 can have the units removed. 0 is 0 whichever way you look at it. 0px = 0em = 0% = 0. Properties such as margin, padding, border, and font (amongst others) can all be shortened to one declaration rather than four.
Name your classes and id’s logically
CSS is used to control the aesthetics of your website, and id’s and classes should be semantic - ie, they should make sense away from your stylesheet. What happens if you later decide to change your layout? Some of your classes won’t make sense. Let’s say, for example, you currently have an id of “pink” for your header div. This could make perfect sense for your current layout because you want your header to be pink. But let’s say for your next layout you want your header to be blue. Where’s the logic in having #pink { background:blue; } in your stylesheet?
What are your top tips for organising your stylesheet? Are you a fan of shortened declarations, or do you prefer to write everything long-hand? Do you leave yourself comments, or do you automatically know which part does which job?
14 lovely people have commented
My stylesheet started off organized, but adjusting it has resulted in a bit of a mess.
I shorten all declarations (unless there’s something I haven’t heard about) but I don’t leave comments in my stylesheet.
Okay, okay, valid points Rachaely! Lol. I will TRY to be SLIGHTLY more organized when I code my next layout (with just a dash of adventure as opposed to all-around chaos.).
I should start leaving myself comments. It’s a sad thing I couldn’t “read” my CSS (a very simple one too) from a few months ago.
Mine starts off rather neat, then all hell breaks loose 
My CSS sheet is just a mess as well. I could group things better together and such, but I’m getting better as I go along. One thing I do not suggest is having your tags broken up into to many pieces. I did that to shorten it up but then when I went back to check my h1 I had to check in 6 places: one for each color, font, etc.
My CSS is easy for me to know where things are… but it is also a messy one. I should use the comments thing since it would help. 
Are you still sending postcards to your visitors? If you are, I would like to apply please.
My stylesheet is far from a mess. I comment myself and have it pretty much all organized, I think there’s a few bits that could be shortened though, but I can’t be bothered to shorten them right now :]
My stylesheets are only messes when I don’t want anyone to steal from me. :3 Made me lol when someone nicked the archive layout … lots … hehe.
Usually I do it in order of structure, though.
I only shorten my declarations (padding and margin) when all four of them are the same. The rest of the time, I can never remember which of the four is what (left, top, right, bottom??).
Also for shortening, IE has quite a few bugs where it doesn’t interpret shortened coding as it’s supposed to.
^ Vera, it’s top, right, bottom, left. Or top and bottom, left and right.
so, margin:4px would be 4px all round
margin:2px 4px would be 2px on the top and bottom, 4px on the left and right.
margin:1px 2px 3px 4px would be 1px on top, 2px on the right, 3px on the bottom, and 4px on the left.
Hope that clears things up!
The idea is that I can’t be bothered to memorize that. Heck I didn’t even memorize my cell phone number and I’ve had it for almost 4 years (the number not the phone itself).
I SHOULD organise my stylesheet, but I don’t. It’s weird, because I can find my way around my very messy stylesheet well, so I guess the only problem it poses is the fact that it takes longer to load since it’s not as compressed as it could be. (Sorry if I sound stupid, I’m not all that knowledgeable on this kind of thing.)
In all honesty, Clem, the time you save by compressing your stylesheet as much as possible is minimal. As long as it’s not full of junk, you’ll be fine.
I use shorthand as often as I can. Keeps things short and simple and quick to edit.
I tend to make comments to define sections in my stylesheet. And if I have to add a hack *shudder* I make a small comment to why I add it.
I’ve been playing with various ways of organising the stylesheets. Once I tried having type in one file, colour in one, and size and position in another. This just made things awkward to maintain as I found that I often edit chunks of section so it’s better to not spread a rule across files.
Recently I’ve organized it with one file for styling the basic elements, a file for classes, and a file for specific elements. (This is only when the CSS file become complex on a larger site with many different elements and components.)
Generally my CSS organizing is much worse than my HTML and scripting.
Leave a comment?
·
Catherine said:
I love cleancss.com (which is based on CSSTidy). It cleans and shrinks my CSS file so nicely!
For me, I do my main bits (container, header etc.) first, and then move on to details.