I received a question the other day from someone who was curious how I handle multiple different page styles and layouts across one site with CSS. It’s a very common scenario I think. For example, you have a homepage that is different from your blog post pages that is different from your about page that is different from your contact page.
Here are some considerations:
There should always be one main stylesheet
In all liklihood, there is quite a bit of similarities across the sites pages. Probably even common elements like header, footer, and navigation. Typography is likely to be fairly consistent across all pages (if it’s not, you should definitely have a good reason for that). There is probably one layout that is the most common across all pages. These things belong in a main stylesheet can be loaded on ALL pages.
How different are the different pages? And how many are there?
Say the contact page has a contact form on it. This form has special styling on it and it’s not used anywhere else on the site. It seems wasteful to me to include all this styling in the main CSS file. That is a bunch of CSS that will be loaded on the 99% of pages that don’t need it. Is there a lot of pages like this?
Unique pages, unique CSS files
My personal style in these situations is to load the main stylesheet on every page, and then, if needed, load an additional stylesheet that is unique to that page (or that “type” of page).
Why I think this works
In the vast majority of cases, you won’t have 100 different layouts. If you do, you should probably take a step back and re-think what is going on on this site. If you really do need 100 layouts, you should be looking into a grid-based framework. I would never advocate creating 100 different unique stylesheets for each of those pages. That is beyond the realm of reasonable sustainability and against the spirit of CSS. But for many many websites with a handful of different page styles and a couple of oddballs, this is certainly my favorite method.