Single or Multiple CSS

Single or Multiple CSS


I’m working in my portfolio project and I have a few pages: about, porfolio and contact. I made a index page with a style.css.

Now I’m wondering if I need separete css stylesheet for each page or if I should use the same stylesheet for every page?


Since you can use some classes to give your pages the same style you can make one stylesheet and use on both page. But I think that is realy up to you. I dont have the knowledge to say if several stylesheets would affect the performance of the page.


Thanks, I will use only one and if I have problems with that I can deal with it latter…


There are a few different factors to consider here:

  1. Code reuse and staying DRY - if any styles are the same, you don’t want to have them stored in two places as it reduces maintainability.
  2. HTTP request times - each CSS file is a separate request, which adds on a little overhead for page load time.
  3. File sizes - larger CSS files take longer to load.
  4. Browser caching - if the browser has already cached the CSS used on index.html, you don’t want to make it load a “new” CSS file for about.html. Whether and how long the browser caches things for usually depends on the server configuration.

Taking all these factors into consideration, your best bet is probably to have a single global CSS file (including styles used on multiple pages), and if any of your pages use a lot of unique styles, load an extra CSS file in addition to the main one on those pages.