Single or Multiple CSS

Single or Multiple CSS
0

#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.


#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.


#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.


#7

is this in some guide or video guide or somewhere?

is this basic or phd konweldge?

if basic should be somewhere in a concise guide


#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.


#9

your reply was this:

few different factors to consider here:

those links are about difff things

so yea where are good guides, and if not then they should exist


#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).