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?

Improve this question
3
  • 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. Commented Aug 14, 2016 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. Commented Aug 14, 2016 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. Commented Aug 15, 2016 at 16:39

1 Answer 1

Reset to default
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.

Improve this answer
1
  • 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! Commented Oct 13, 2016 at 10:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.