How to organize your css code: the ‘killer’ css structure
April 29, 2008
I can’t stand articles that make you read two pages before getting to the point. With that in mind, let’s look at how I think css code should be organized.
In a nutshell: css code should be divided up into at least 4 separate pages:
- page-structure.css
- text-styles.css
- misc.css
- ie-styles.css
How about we call this the ‘killer’ css structure.
🙂
Before I go into the details of what each css file contains (if it’s not already obvious), I want to quickly cover WHY you might want to use this basic css structure for all your websites.
Why use the ‘killer’ css structure?
It all comes down to one of the key reasons for using css in the first place:
Grouping code so that it is easier to update and easier to understand.
–
A common mistake
What I see over and over again, are web designers who put all their css code into one css file. This is indeed a big leap forward from using font tags all over your website … but by having only one huge css file, you’ve just created another big messy file to deal with.
To the point
Page-structure.css contains only css that defines the structure of your page. That is to say things like:
– css code that sets whether the page is liquid of fixed.
– css code that sets whether the page is centered or justified left.
– css code that sets up the columns
etc …
I like to put the page structure code in its’ own file because page structure css code is verbose (there’s a lot) and it can get a little black-magical.
What is black-magical css?
We all know that except for the simplest css layouts, it can be a real pain in the ass to get page layout to work in css.
… Especially when floats and Internet Explorer bugs come into the mix.
Anyway, the point is that css for page layout often contains nonsensical (black-magical) code to make it work.
OK, back to page-structure.css:
Another reason to have page-structure.css, is that once you’ve done creating your page structure, you rarely have to go into that code. So why bother having to scroll past it every time you edit other parts of your css?
Personally I find myself tweaking css rules for text, color and images much more than I do page structure css.
Text-styles.css contains css code that only affects text. So I have all my header tags defined along with paragraph tags and classes. Again, when needing to edit some aspect of my text for the hundredth time … I just pop open the very clean and simple text-styles.css.
Misc.css is a style sheet that contains css code that does things other than page structure and text styling. This ultimately is a judgment call, but I typically put in formating for tables, forms, list or special id’s and classes.
IE-styles.css is of course, for your css rules that manage the Internet Explorer bugs. This all ties into the IE Conditional comments strategy.
You may need another ie-styles.css to deal with specific versions of IE. For example, you may have an ie6-styles.css. But thankfully, this is becoming less and less likely since IE6 use is falling fast.
Thanks for reading,
Stefan Mischook
www.killersites.com
