Scroll To Top

I'm always trying to make web development more efficient to save time. This article talks about how you can structure your CSS files so they are easier to work with.

I've been working on this structure for a while now experimenting with what works best. Matthew Griffin wrote an article called Beautiful CSS Organising Your Stylesheets which I found to be better (at the time) to what I was doing. After some discussions with other web developers I have worked out a few of the bugs from Matt's original strategy.

Structure as it would appear in your HTML document

* Author: Nick Yeoman
* v1.0
* Last Updated: July 7, 2009
* Documentation:

<link rel="stylesheet" href="/css/reset.css" type="text/css" />
<link rel="stylesheet" href="/css/html.css" type="text/css" />
<link rel="stylesheet" href="/css/library.css" type="text/css" />
<link rel="stylesheet" href="/css/template.css" type="text/css" />
<link rel="stylesheet" href="/css/forms.css" type="text/css" />
<link rel="stylesheet" href="/css/page.css" type="text/css" />
<link rel="stylesheet" href="/css/process.php" type="text/css" />
<!--[if IE 6]>
<link href="/css/ie6.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link href="/css/ie7.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/css/print.css" type="text/css" />
<link rel="stylesheet" href="/css/mobile.css" type="text/css" />


I've posted an article on my CSS HTML if you would like to read more


I've posted an article on my CSS Library if you would like to read more


You will be more familiar with a template css file if you work with a CMS. Basically this is your layout.

It is best to order your template by the selectors as they appear in html.

Personally I start with a blank template file every project. If you don't stray to much in your graphic designs you could set a few styles for the header, footer, content, etc.


An optional sheet, if you have a lot of forms on your site it is best to split up the styles so they are easy to work with.


The page file relates to a single page. Instead of loading the page file on every page and giving the id of the page, I prefer to load a specific file for the current page using php. I'll blog more about this later.


This is where I place all of my CSS which requires PHP. I used to place php in all of the above files, but non php developers found this confusing.

IE6 and IE 7 Sheets

Microsoft Internet Explorer, we all hate IE, but people still use it. Boggles my mind. There are thousands of posts about IE so I'll skip it here.