[thelist] How do you manage CSS for a very large site?

[Paul Bennett]

Hi Jon,

As a developer for a large (2000-odd static pages) local government website, we've broken our css into manageable components (a 50Kb css file is no fun to work with) and @imported them from the main css file.

Eg (inside 'styles.css'):
------------------------
/* get required stylesheets*/
@import url(styles-contentTables.css);
@import url(styles-forms.css);
@import url(styles-mainnav.css);
@import url(styles-popups.css);
@import url(styles-secondarynav.css);
@import url(styles-textformatting.css);


/* get print SS */
@import url(formprint.css);
------------------------

My advice to you would be to do the same. 
50Kb? Sounds like you may need to cull some redundant rules out of your stylesheet and combine some others into a single shared rule.

For content pages whose layout changes
1. get a good idea of the 'family' of changes you're dealing with (you may find there are a handful of different page styles when all is said and done)
2. set an id in the body which identifies the page type
3. create stylesheet(s) which address these specific deviations from the normal site layout / style
4. @import the whole shebang via the main css file (once css is loaded once, it's cached so the initial load will be the only lag). This way whatever page is being loaded will apply the relevant css via the body id (if any)

My 2c,
Paul