Main.css question

help
1

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?

2

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?

3

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.

4

I know, it’s just for testing purposes actually. I just found it strange that main.css got loaded as last. Do you know why?

5

Yes, this is by intent:

All files starting with main* are loaded last.

6

You should read the Meteor Guide section on default file load order.