If I put 2 css files, for example t.css and w.css and both set the
body { background-color: somecolor; }
then the property setting of w.css wins over the one of t.css. That’s expected. What I didn’t expected was that when I place a similar setting in main.css, which comes before t.css and w.css the one from main.css wins over. Is this due to some load order setting somewhere or how can I analyze it?
I noticed via debugging in Chrome that this was the result:
body {
background-color: yellow;
color: limegreen;
}
body {
background-color: orange;
}
/* CSS declarations go here */
So it seems indeed this is the case. Is this due to main.css being treated special or is it due to something I’m not understanding currently from the load order rules?
It’s never a good idea to rely on load order regarding css files. You should use scoped css classes instead, like
body.onepage {
}
body.anotherpage {
}
If you really neeed this on the body, it becomes a bit tricky, as you have to set the body class via JS (there’s only file defining the body in Meteor). But for all other cases, divs or sections work just fine.