Archived entry | Matt Wilcox .net

Organising CSS

There’s a post over at John Oxton’s website which has got me thinking about how I arrange my CSS, and while I don’t hold any particularly amazing insights I thought I’d share my approach with you.

Multiple CSS files

In my endeavour to create efficient/organised CSS I’ve adopted the following approach to writing and storing my CSS:

1. write a base.css file, the job of which is to make every browser render everything the same. For example this file gets rid of any differences in padding or margins which occur from browser to browser, as well as a few other things.
2. write a master.css which holds all the css for any elements that are styled the same no matter what page you’re on. For example it’s here and only here that the font-style gets set, and the menu position, and the main background graphic - because these are always the same on every page.
3. write a css file specifically for whichever HTML page I’m interested in styling uniquely.

If I then create an ‘About’ page I write a small about.css file which styles anything that’s unique to the About page. The about.css includes the master.css, and the master.css includes the base.css. The browser then reads and applies the css in the order: base.css (resets browser default styles), master.css (applies styling for the menu and other items which always look the same), about.css (applies styling which is unique to the About page, perhaps even over-riding rules declared in the master.css).

For large sites with many pages which must be uniquely styled I find this method to be the most logical. Any major change to styling (for example changing the font) would get addressed by editing the master.css file once, and that’s it. Similarly if I only needed to edit a specific page (for example to change a header colour on the About page) I only need to open up the about.css file and it will be very quick and easy to locate which rule needs changing without needing to scroll past hundreds of lines of CSS which I’m not interested in.

Advantages:

• for large site with many unique pages this is possibly the neatest way to arrange and file the CSS
• only the CSS that’s required for the page being viewed will be loaded. We don’t need to see the styling for a hypothetical ‘Contact’ page when we’re on the ‘About’ page, and using this method redundant CSS rules are kept to a minimum, saving bandwidth.

Disadvantages:

• extra server requests: instead of requesting just one CSS file the server is asked for three files, which involves extra processing and could slow page loads. This normally isn’t noticeable, but on a very busy server it’s possible you would notice the difference.
• not particularly suited to small sites with only a couple of unique pages. The extra clutter in the directory from creating separate CSS files for just a couple of HTML pages may not be worth it. It’s possibly neater and certainly easier for quick editing if the styles are all in one page (as long as there aren’t many rules)

Those are my methods, but reading John’s post did make me realise that there’s an alternative method available for anyone who wants to keep the number of CSS files down, and doesn’t mind having one large CSS file handling styling for the whole site. I’ll not regurgitate John’s own post, but rather point you to it to see the alternative approach: read John’s “ID on the body tag” approach

Entry Information

Posted:

Sun, 12th Jun 2005 at 11:06 UTC

Filed under:

• Web Development

Tags:

• css