0

Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme it says:

Some libraries you load may not be needed on all pages. For faster performance don't load libraries where they are not being used.

At the same time, if you have many different files to load for each page, this will slow down the speed for each page load.

How big should the library be before you should consider to load it in a separate library?

How does the database caching system work? Will each library be cached in a separate CSS file? If I have page X and Y where i only need some CSS library on page Y, will both of them share CSS file A and then the other also have CSS file B? Or will these pages have only 2 different CSS files?

closed as primarily opinion-based by Pierre.Vriens, kiamlaluno Dec 30 '16 at 11:08

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Do what works best for you and use AdvAgg's bundler to sort it out for you. drupal.org/project/advagg it's pretty good at grouping the files together – mikeytown2 Jan 1 '17 at 9:20
0

At the same time if you have many different files to load for each page this will slow down the speed for each page load.

You don't need to worry about this in Drupal, as Drupal will aggregate the CSS files when you have CSS aggregation turned on, and you should always have this enabled on a production site.

As such, you should ensure that only the relevant CSS is attached to an element/page to which it belongs.

For example, I'm creating a site right now that has a booking page. This page has a chart-like schedule on it, showing what time slots are available. It's not unthinkable that this could be swapped out at some time in the future. So I have all the CSS for that chart in a single file, and the chart is attached to that element of the render array. Therefore if anyone ever removes that element, or sets the access on it to FALSE, the CSS will not load.

Drupal will handle the aggregation in the background and serve an aggregated file that contains my file when the user is served the schedule, and serve an aggregated file that does not contain my file, when the user is not served the schedule.

So to sum it up, don't worry about having too many CSS files in Drupal. On the contrary, it's better to have your CSS modular, so that each file contains CSS to a specific element/page, and attach that file to that element/page. Drupal will handle the rest.

And how does the D8 caching system work; will each library be cached in a separate css file? If I have page X and Y where i only need some css library on page Y, will both of them share CSS file A and then the other also have CSS file B? Or will these pages have only 2 different CSS files?

Aggregates are created as needed. If a page needs file X, Y and Z, it will create an aggregate that contains those files. If another page only needs X and Y, it will create an aggregate with those files. If that same page is visited by a loggeed in user that needs file A, then an aggregate will be created with those files.

  • I'm very aware that Drupal aggregate CSS files. However if you choose to attach CSS to only some specific pages then it means that there will be different files loaded on different pages. My question is about how to balance this; How big/small should the JS/CSS before you choose to load/not load it on all pages? – user11448 Dec 30 '16 at 0:43
  • Yes, there will be different files loaded for different pages, but the file loaded will be relative to the page it's loaded on. Regardless of how you structure your CSS, this is going to happen, as each page will have different CSS loaded from the system that will cause different aggregates on each page. So your question doesn't really make sense in that regards - you shouldn't be loading CSS on pages for which that CSS will not apply to anything on the page. – Jaypan Dec 30 '16 at 1:30
  • This is simply not true; If you only use global library there will not be different CSS aggregated and loaded on each page, each page will then load the same css-file, so on second page load the user will simply reuse the css they've already downloaded. If you have a library that is only used for a specific page which is as example only 1kb, then it can maybe be more feasible to attach it to the global library to reduce amount of http-requests. If you use only unique css libraries for each page it will slow down the speed for the user. – user11448 Dec 30 '16 at 8:52
  • You say it's 'simply not true', but core adds CSS files to elements they belong to, as do contributed modules. By default, different pages will have different aggregates. You can override this by remove all core CSS and contributed module files, and in this case what you are saying would be true. – Jaypan Dec 30 '16 at 9:18
  • Okay thank you, I think I'm a little but more wise now. However for me it seems like this system in a way also defeats the advantage of external stylesheets; I guess it means that the user will be served different aggregated stylesheets for each page that contains same css over and over again? – user11448 Jan 5 '17 at 0:24
0

Size is not the correct factor. purpose is the correct factor.

Is there code in your library that could be reused by another library? If the advert is yes then you should separate it to another library.

For example, for some custom form in writing, I require that the values of some field will be copied to a second (disabled) field. If I put the JavaScript as part of the base library of my form, then I'll have to write the same code again for another form. However if I'll create a separate library for this behavior then I could reuse across my project.

Personal tip: when writing a name for a library ask what is the purpose of the library, add don't show generic names like base or form_behaviors.

  • how can size not be a factor? Lets say I have some css that is only needed for 1 page that is 100byte and some other css/js for another page that is 100kb. The first css is maybe better to simply include in a global css-file to avoid a second http-request, while the second one should maybe only be loaded for that specific page. I know about best practices for organizing css libraries inside the theme, my questions is about how to decide when to include or not include it globally. – user11448 Dec 30 '16 at 8:56
  • Drupal will aggregate your files for the best performance possible. – Eyal Dec 30 '16 at 8:58
  • Nope, you have to be explicit about if it should be aggregates for each page or globally, nobody will do that for you! – user11448 Dec 30 '16 at 9:01
  • See the answer by @jaypan on how drupal aggregates css files. I'm answering your question about when to separate the library into multiple libraries. – Eyal Dec 30 '16 at 9:02
  • P.s.> I've been working with drupal 8 for the last year and a half and library files are only added when needed even when aggregation is enabled. – Eyal Dec 30 '16 at 10:02