Specify 'html, body' css settings with Meteor for specific page/route

Question

I'm trying to adjust some page background css settings for a specific route/page in my Meteor app. I was able to do so by using Template.template.rendered/destroyed and jQuery selectors to inject the css once the template is rendered, like so:

Template.template.rendered = function() {
  $('html, body').css({
    "background-color": "#fdfdfd",
    ...additional css properties
  };
};

Template.template.destroyed = function() {
  $('html, body').css({
    "background": "none"
  };
};

I was wondering if anyone knew of a better way to do this. It seems a little slow, and when returning to the page using the back button on the browser, the page seems to freeze for about 5 seconds. Is using the iron-router before/after hooks any better? I'm not too familiar with them, but the slowness seems to be a browser issue. My thinking is the before/after hooks would help fix this. Are there any other options besides these two methods? Thanks.

Answer 1

Unless you really, really need to be attaching styling directly to the html and body elements in a way which is specific to certain pages, I'd strongly recommend wrapping each entire page in a div with width: 100vw; and height: 100vh; and appropriate ids, and then using the latter to style directly with css.

If you do need to attach directly to the html and body elements, have you tried to do this with an onAfterAction hook in iron-router? Seems like a better place for it given that the styling depends on the route, not the template (even though Blaze means you can probably get away with what you're doing).