css file structure
When I look at css files that other people have done I notice various ways that they stucture them. The stylesheet is all about the appearance of the content and its presentation in whichever media is used. So where does the structure come into it? Well, each stylesheet author has his or her own way of writing the stylesheet, which is all well and good if the only the said author will be editing that sheet. But with so many templates and themes abound others will be inevitably be reading and editing those sheets.
Editing large style sheets
I’m not talking about the layout of individual rules here, such as getting your braces on the same column or if you should have a space after the colon. I’m talking about the whole sheet. A stylesheet can grow to become very large and unwieldy. In one book I saw an idea where the author broke the sheet into sections, such as colours, structure, headings, etc and put them into separate sheets. The main stylesheet then consisted of calls to each of the other ones. The idea being that it made it easier to edit because each sheet had less content.
So that’s what I’m getting at really, editing large style sheets. How is it best to structure those blocks of rules in order to make editing easier? How do we divide up the content of the sheet so that we know where to find things later? There doesn’t seem to be any convention for this, so each author can choose his or her own. But just as the cut, copy and paste shortcuts are the same in every software, I think that some ideas will start to converge here too.
The way I do it
What do I do? Initially I started with following the layout of the page. So I would put the rules that governed the content at the top of my web page at the top of my stylesheet and so on. Each element or selector would only appear once in the stylesheet. And I would write hardly any comments, which of course makes it tricky to edit later.
Now I’m starting to add more comments and leaving a bit more whitespace as the file size gain from cutting out the whitespace is minimal. Especially now that more and more people are getting faster connections. I think it’s better to leave in the whitespace and save your own sanity and eyesite rather than have a 1% performance gain or whatever. Better to use css shorthand. But then some browsers are a bit iffy with the shorthand.
The colour palette
The other thing that I’ve started doing at the top of the sheet is to write a list of colours that I use and call it the colour palette. Within comments of course, so you could have something like this:
/*The Colour Palette
#411417 - dark reddish brown for main text
#800000 - lighter reddish brown for headings and links
#B9CD7F - muted army green for panel backgrounds
#B6723B - light muddy brown for hover
#EFFFB6 - very light green for footer etc
*/
I find this really handy as I used to have to get my colour picker tool out and find the hex codes all over again or preview the page. The other method was to use the assets panel in dreamweaver. But this makes it much easier. So whenever you see a hex code in your sheet, just head back up to the top of the page and you know which one it is.
The main idea is to follow the document tree
But the main structuring idea that I’ve been using lately is to follow the document tree. So working from the outside in if you like. Or from more general to specific. Or from global styles to more individual areas. Which is kind of logical now that I’m doing it this way. But following the layout seemed just as logical when I did it that way.
Like I said before, there is no particular convention only ones that we each have ourselves. But the whole point of this is to make the process smoother and easier and more fun.
Yahoo developers network
One of the global to specific ideas is displayed very nicely in the yahoo developers stylesheet. (If you haven’t seen that you should check it out. I wrote another post all about it yahoo developers network.) What they do is to zero out all the elements at the top of the sheet. Which is great because it sets the browsers default stylesheet to zero for margins paddings etc. I used to do this for individual elements, but this makes more sense. Some of these rules are not inherited, but you get the idea. The other thing they do is to set the font size absolutely and then you can do the rest in percentages or ems. It’s much easier then to make the whole page’s font size bigger or smaller relatively. Better for accessibility and all that.
What about hacks and filters?
What about IE/win hacks? I don’t bother any more as they don’t validate and it’s easier to put the whole lot in another file and then call it from the header within conditional comments. I can get on the pc and edit just that sheet. I do put an IE/mac bandpass filter at the bottom of the sheet. Typically a few width problems and floats.
Summing Up
So to sum up. This isn’t a post about how you should write your style sheet but just where I am at the moment. I am finding that following the document tree is a logical way to structure it both for the initial writing and for later editing. Here’s a list of the points. Let’s see how I do it in six months time.
- Follow the document tree
- Work from the outside in
- Go from general/global to more specific areas
- Zero out elements and selectors at the top of the sheet
- Set an absolute font size for the sheet and then ems for specific areas
- Put a colour palette at the top with your hex values
- Use as much whitespace as you need
- Use meaningful comments
- Conditional comments instead of ie/win hacks
You may find that if you try this then your sheet may actually get a bit smaller even with all the commenting and whitespace. Try it.