Is it a good idea or practice to have more than 1 CSS document?

When creating a responsive website is it possible or a good idea to have additional .css dedicated for sizing. I’ve noticed that my .css document has gotten quite lengthy since working on the capstone project.

It is very much possible to use multiple css files. You could split up css into commonly shared styling for a whole website and then use a separate css file for page specific styling.

1 Like

Thank you. that makes sense.

The early web would have its difficulties, latency, among them. Notwithstanding that latency still exists, in technical terms, the overall speed of the web has so improved that us early users wouldn’t think there was any.

We did use multiple CSS files so that any style sheets not required were not loaded. There is a benefit to this. The home page loads with minimal style rules and images, etc., to make the initial download near instant. As features of the page are accessed by the user, their content comes in with its own style sheet.

Likewise, as we traverse the site, pages pull down an auxilliary style sheet and perhaps one that applies to, ‘thispage.css’.

There may be provisos to using CSS @import but then, we have a really fast web that more than mitigates them. That means we can initiate the fastest downloading file, and have it import the default(s). This builds a cascade that ends up in the correct order.

imported css
imported css
css for this page

The bottom line in all of this is that as long as there are no changes in the source files, then each new component will have been cached. Subsequent visits will not need these downloads. We have effectively used progressive introduction of additional styling.


Precluding this would be a file structure that supports layering.

+ site_root/
  - index.html
  + css/
    - default.css
  + js/
  + images/
  + feature/
    - index.html    // <link rel="stylesheet" href="thispage.css">
    - thispage.css  // which then imports "/css/default.css"