Single or Multiple CSS

HTML-CSS
1

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?

2

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.

1 Like
3

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

4

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.

3 Likes
5

That was really helpful for me. Thanks man, have a nice day :slight_smile:

6

It is better to use same CSS files for different pages.

8

If you’re looking for tutorials, I Googled how to split your css and found these:

My original answer was somewhat simplistic; there are many possible ways to split CSS, and the best way to do so depends on your exact needs and the architecture of your app/site.

10

You would have to break down exactly what you are trying to achieve as it is 50/50 in terms of effect. Some instances will make sense with single css and others with multiple css, so you will need to jot down the pro’s and cons relative to your needs as their are a few variables in play with each scenario

11

Those links are just the first examples I found, I’m just indicating that there are plenty of resources out there. If you don’t think any of those links are suitable for your needs, please try Googling the same search terms I quoted (or your own choice of search terms).

Also, the considerations I listed aren’t meant to be an exhaustive list, nor is my suggested method optimal for all projects (the best way will depend on the specifics of your project).

12

the relevant info is the need of the op who asked the topical question

as for a good source that actually answers the op’s question, i dunno and it seems that nobody else knows either

given this, i presume that this is clearly phd konweldge

and that’s why we dont have basic info on this entire web for basic things cos this apparently is not a basic topic with the corresponding basic info

so i restate again the point that good guides should exist