10

I have read different information about this question, and I always see that people suggest using one big css file, from the performance point of view. But I don't understand, won't it take more time to load the css file for all of the pages then to load each one for each page, when it is requested? (examples of what I have seen: Multiple css files or one big css file? and Single huge .css file vs. multiple smaller specific .css files?). Yes, maybe there will be multiple http requests, but they will happen in the different periods of time, so basically isn't it better to load each page when it is needed, then to waste time on loading css for every page in the beginning and then displaying them on the fly?

Community
  • 1
  • 1
Alex
  • 163
  • 1
  • 1
  • 10

3 Answers3

15

There is pros and cons of both approaches.

Having multiple CSS files will allow you to organize and group your CSS files properly in development. However, this also means that there are multiple HTTP requests to make. HTTP requests are more expensive in terms of loading time as it has to contact the server and fetch the file.

Also once a file is loaded, it is cached by the browser. Which means, even-though it might be initially slower to load the huge.css, it doesn't need to be loaded again when you navigate around the site.

In my experience and adapted by most of the developers, you could do something like below to get most of the both worlds.

Use css pre-processers like SASS or LESS. Don't ask me which one is better, there is already enough arguments going around the web on that topic. Just pick one which you are comfortable with. My preference is SASS.

CSS pre-processers allows you to divide your CSS files into smaller more organized files. For example, you could have a main.sass which includes menu.sass, footer.sass, etc.

main.sass

include _menu
include _footer
include _header
...

_ tells sass not to compile seperate files for each of these sass files. So they all will only be compiled to a one main.css. These pre-processors come with a functionality to compile the given sass files into a css file that browser can read. You can also use tools like [livereload][4] to compile them in real-time.

You will have these sass files in your development code. But in your production code, you can simply use the compiled single css file.

If you are feeling more advantageous and want to take things further, you can use tool like Grunt or Gulp. They allow to automate your development tasks or build processes. So ideally, in development you could have a grunt task that watches all your sass files and automatically compiles them into the main.css file. In your index.html you can have reference to this main.css. Once you are happy, you can also have another task called build task, which can automatically compile all your css files and minimize them.

To clarify your question:

It depends what is best in case by case basis, what kind of site you have and how you have built it.

If you have a website where visitors are most likely to never navigate around the site than some particular pages, then its better to load css specific to that particular page and not combine it. You can load these css files in the partials specific to these page.

In my experience building many many sites,

  1. its almost always best to load one combined css.
  2. if a particular page requires css is not likely to be visited often, include a page specific css in its templete seperately with a conditional script tag.
  3. Minimize all css files almost 100% of time

Also, I will suggest you to spend more time improving efficiency of your server side code or database, then worrying too much about the css. It will be more productive as most of the in-efficiency lies in server side.

Subash
  • 7,098
  • 7
  • 44
  • 70
  • Few things to say: 1) I can swear I have read the similar beginning of your question to some other question of the same type. 2) I have used styling tools for a while and I like LESS much more than SaSS (Stylus is also great, by the way). 3) I understand that in the development, it is easier to use multiple CSS files and (as I have already said) I have read that in the production it is better to use only one. 4) The question is basically: "What is more efficent - to load the Big CSS file with content for every page, in the beginning OR load for every page it's separate file when needed?" – Alex Aug 17 '15 at 00:59
  • I see that you have basically answered my question, saying that it is better to use one big file for every page on the website, but please read again the last sentence of my question. Are you sure that it is the most efficient way? Because one of the best web applications (vk.com) uses ajax to load css files, when a user visits the page and then stores it in the file in case a person will visit it again – Alex Aug 17 '15 at 01:07
  • @Alex I am not entirely not sure about your question, but I guess you are asking about the responsive site. In css you can have responsive site based upon the breakpoints (fixed size based) or fluid (percentage based). In css you would have different style rules for same elements based upon these breakpoints. I would suggest you to create a different question for this as this conversation is irrelevant to this topic and might not be helpful for people looking for help on the topic. – Subash Aug 17 '15 at 01:24
  • Though I see why some think it's better to load one big CSS file, as it'll probably save the user more time in the long run, I think the Google Page Speed tool, and other tools, disagree ("remove used CSS!" and when I do I get much better scores). It does kinda make sense to me that the separate CSS files for different pages is better... When one does some research of page load time vs conversion rates, one could be persuaded that it's better to have each page loading in 1.1s rather than the first page taking 3s and subsequent pages 0.8s. – Dan. May 30 '20 at 09:39
0

In answer to this question, it's best to detect what browser the user is viewing the page on, then loading in x.css, y.css dependent on that. This can also massively reduce the number of CSS errors that are displayed in the browser which, rumor has it is good for SEO.

Filthy_Rich
  • 666
  • 5
  • 20
  • 1
    What difference would it make? – Alex Aug 17 '15 at 00:35
  • Rather than reading one massive .css file with a large amount of rules for multiple browsers, it would load in a condensed .css file with rules for that browser (reducing loading time). Also as previously mentioned, it reduces CSS errors which are given by the fact that certain attributes have to be ignored by different browsers. – Filthy_Rich Aug 17 '15 at 00:37
  • 1
    I mostly use css that fits every browser, and not browser specific – Alex Aug 17 '15 at 00:39
  • You're most probably getting CSS errors in certain sites then. The CSS error can be as simple as the browser ignoring a certain rule. – Filthy_Rich Aug 17 '15 at 00:42
  • You may have `-webkit-transition: 0.5s all ease-in-out;` and `transition: 0.5s all ease-in-out;` in the same stylesheet, this will mean that Chrome and any other browser that isn't -webkit has to ignore the -webkit-transition, resulting in a CSS error. So you'd split these into their own independent stylesheets to prevent it. – Filthy_Rich Aug 17 '15 at 00:43
  • Anyway, hope this helped. If I answered your question give a man a tick. ;) Let me know if you need anything else. – Filthy_Rich Aug 17 '15 at 00:49
  • Thank you for trying to help, but specifically about me, I don't use tools that can be not supported by some browsers. I son't use -webkit and others. I use the ordinary CSS that works everywhere. Maybe it is not so fancy, but it is bullet prove and looks great, if you know how to use it. – Alex Aug 17 '15 at 01:02
  • -webkit is CSS my friend. If you check what your site looks like in different browsers (Firefox, Chrome, IE etc) they may look different, divs may be positioned different etc. This means you have to target those browsers with specific CSS rules, such as -webkit (for iPhone) etc. It's called cross-browser compatibility. – Filthy_Rich Aug 17 '15 at 01:03
  • I know that, I just didn't run into any issues and big differences to this moment. – Alex Aug 17 '15 at 01:09
  • Ah I see, well in that case you'd be best just sticking to the one .css file. – Filthy_Rich Aug 17 '15 at 01:09
  • Can you please read again the last sentence of my question? Are you sure that it is the most efficient way? Because one of the best web applications (vk.com) uses ajax to load css files, when a user visits the page and then stores it in the file in case a person will visit it again. I mean the website can have a whole bunch of pages and the css file would be really big... And doesn't it take time to read through this whole file when the page is rendered? – Alex Aug 17 '15 at 01:11
  • I'd say it's down to the size of your .css file, if it's got a lot of rules in it, which from what you've told me (by not having any cross-browser issues), it shouldn't, then you should be fine just including it within a HTML tag. If you think that by caching it would help then there's your answer. – Filthy_Rich Aug 17 '15 at 01:13
  • @media queries. You also predominantly use % rather than px in your CSS files, so if a div is styled to be `width: 5%;`, it will always be 5%. If you state 100px when it will look a lot different on a computer screen than what it does on an iPhone. – Filthy_Rich Aug 17 '15 at 01:24
  • 1
    Not sure if trolling or serious. What you are writing is simply wrong – OptimusCrime Aug 17 '15 at 11:26
-1

I use multiple css files, divided by function. There is one global one, one for the page layout, one for the menus, one for the tab controls etc. I also have cascaded ones for desktop and mobile - only one gets applied. And then I have further cascaded ones for skinning by user preference. And I pick and choose which ones to load based on page, platform and user. That's what the PHP is for.

Rohit Gupta
  • 4,022
  • 20
  • 31
  • 41