0

I've read some articles, which states that it would be useful to load javascript files conditionally, based on the fact if they are needed on a site or not. Therefore I start to exclude custom js from those pages, which do not use those elements.

Now I want to know if the same applies to the custom.css - I know that I should include one custom.css file, which will be gzipped and maybe cached on a second domain/cnd. But what, if I use a custom sub navigation only on few sites and the css rules for this nav are taking 40kb for example? Would it be best practice to create another css file for this scenario and only load it on the relevant sites?

  • Most likely not. One of the cases I use for conditional css loading is that if I have a page that have very different style. or another example is various color skins. – Sisir Aug 14 '16 at 16:26
  • 1
    StackExchange is a forum for technical help on specific problems. A good question for this site starts with "how can I", not "should I". Questions about best practices are not really what this site is for. But regarding your question, in a word, yes. – magi182 Aug 14 '16 at 16:50
  • @magi182 asking about best practices for WP development is perfectly on topic on this stack. Please note that different stacks formulate and refine their own scopes independently of other, these parts of rules don't carry over from one to another. – Rarst Aug 15 '16 at 16:39
0

There is no hard rule on this.

Loading JS is discussed often because JS is more likely to conflict when a lot of plugins throw their scripts into the mix.

CSS is less problematic in that regard. Still the same premise apply — you should aim for solution that performs well.

In a situation you describe, with highly contextual sites of large size, it certainly makes sense to separate them into dedicated stylesheet.

In other cases complicating development and logic for insignificant benefit might be impractical.

  • Hi Rarst, sorry for the late response. The described way is the way I am going with the theme. I set up a global css and javascript file which contains the code and rules for global elements, which are present on every site and then I set up a specific javascript and css file for each site, which is holding local elements, which are only meant to be present on this one specific page. Then I conditionally load them by registering and enqueuing them with simple if statements within my functions.php. Definitely the best way to go for me! – DoUtDes Oct 13 '16 at 10:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.