How to optimize/modularize CSS files

I’m working on a project that consists of about six different pages. How can I optimize my CSS so that my pages get their stylesheet?

I’m writing Pug for the structure and SCSS for the styling, and gulp to prepare them for dist. I’ve modularized my index.scss so that it @imports things like nav and footer styling, but how can I not include the Homepage styling for, say, the About page?

In the screenshot below it describes a “base” file, but how can automate the which styles it imports? Or, do I simply have to write multiple base files for each individual page and then link them specifically?

Don’t do that, just put everything in one stylesheet, what you’re trying to do is a de-optimization. Stylesheets are easy to parse, but they also block everything else on the page while they’re being parsed (if you put them in the head, as you should be). You want one stylesheet, so you have one request for a file (when the site is first hit) that the browser caches allowing it to load instantly on subsequent pages.

Use classes to determine what you want to style, as normal. .page-header and then .page-header-about and .page-header-homepage where the first is styles common to both pages and the latter two are styles that are specific to those pages.

You can divide the original files up in a modular way using SCSS, making it easier to code, but the end result should be a single CSS file unless you have ridiculous performance concerns, in which case there are techniques like inlining styles.

Dont ever use CSS’ @import. The Scss’ version is just telling the Scss parser where to glue files together into one, not really equivalent to what CSS does despite what it says there. If you’re using Scss you don’t ever have to think about it anyway.

4 Likes

@DanCouper

I understand your point, it seems highly inefficient to load multiple stylesheets. After posting my question I finagled a solution that I thought worked, but I wonder if it’s doing exactly what you’ve described.

When I run gulp my .scss files are compiled into .css. I have a home.scss which compiles to home.css, about.scss to about.css, etc. So, there are about 8 .css files in my dist folder, but only one .css file gets linked in the head of each page (home.html gets home.css, about.html gets about.css, etc.).

Does this avoid what you’ve described? Or should I just compile all my .scss into a single .css file that all pages link to?

1 Like

Each stylesheet represents an additional call to the server, so having multiples is in most cases the exact opposite of optimization.

So for regular web use, it’s a better approach to link only one CSS stylesheet, even if that means some rules that are not really needed for that particular page.

The most notable exception is probably Google’s AMP, where in some cases a better approach would be to include style tags directly in the HTML file with just the needed rules.
Also when coding with some JavaScript frameworks you might find yourself writing “inline” CSS for a particular part of the UI.

But then again, this is not what you’d want to do in most web development projects

2 Likes

even a giant css file is trivial to download… it is simply text. The overhead is with the http connection. So as has been pointed out, you really only want 1css file downloaded when possible. Rely on dev tools and a build process to take your individual files and stitch them all together.

2 Likes

Even this though, you’d still generally build the CSS the same way, with a preprocessor building a single CSS file. The inline styles you add automatically using a tool at that build step (eg GitHub - filamentgroup/criticalCSS: Finds the Above the Fold CSS for your page, and outputs it into a file) - so in development you don’t have inline styles and it’s easier to work with, then you use that build step in production.