Gordon’s Place

I’ve been doing a lot of styling recently for a couple of different projects I’m working on. By “styling”, I mean the bit where you work out an overall layout for a website and then try to get that all coded up in CSS. Anyway, it’s given me an opportunity to work out a standard structure for my CSS files, previously I’d ended up with either a bunch of illogically structured stylesheets or even one monster stylesheet for the site. Neither of which are a good idea. So here’s what I’ve ended up with –

styles/style1/globals.css – global settings. Font family, size, page background and width. Not very much

styles/style1/structure-singlec.css – All of the structure for a single column page.

styles/style1/structure-doublec.css – All of the structure for a double column page. You can see where this is going, a series of structure files for each type of page I might need, I’ll simply reference the appropriate structure at the top of each HTML page.

The structures files might well implement the “cascading” part of CSS using @import. A 2 column layout, for example, extends on a single column layout so the first thing it does is @import the single column structure.

styles/style1/helper-forms.css – Contains the styling for my forms. I see there eventually being a series of these “helper” stylesheets which each page can include as required. I will probably, for example, move the styling for the persistent navigation out of the structure files and into a helper sheet instead.

styles/style1/override-{pagename}.css – Each page may need to override some of the individual styles. For example, a 2 column layout may need to adjust the ratio of column widths. If so, I’m toying with the idea of holding all the overrides for the page together in a single stylesheet. Not dead set on this yet, I may revert to having a style section within the particular page, although holding them separately like this will allow you to have different overrides for different stylings / skins, which is obviously the purpose of the “style1” part of the path.

So any given page will include a series of stylesheets – the globals, a single structure, any of the helpers it needs and perhaps an override. I need to do some testing to see if serving up a series of files like this is going to cause performance issues, which is a worry. Although even if it does, then I think I’ll probably keep the structure for ease of development and knock up some scripts to munge the files together for implementation.