Should the order of CSS files in a HTML page matter?

Question

I have a basic HTML page and three CSS files on each. The first CSS file (core.css) is for a very generic set of rules common to all pages. The second file (additional.css) contains rules specific to items on a page (homepage, blog page and so on). The third CSS file (mobile.css) contains all media queries for mobile display. I'm also using Bootstrap.

When the files are loaded in this order:-

core.css
mobile.css
additional.css

The following media query contained in mobile.css does not get picked up by the browser.

When the files are loaded in this order:- - core.css - additional.css - mobile.css

the following media query contained in mobile.css works fine.

additional.css CSS Query

.blog .blog-item.right h4, .blog .blog-item.right .item-date, .blog .blog-item.right p {
    text-align: right;
}

mobile.css CSS Query

@media (min-width:768px) and (max-width:992px) {
    .blog .blog-item h4, .blog .blog-item .item-date, .blog .blog-item p, .blog .blog-item.right h4, .blog .blog-item.right .item-date, .blog .blog-item.right p {
        text-align: center;
    }
}

Is there any reason why the top style rule has to be loaded first before the @media query is run after? What takes precedence, as I assumed that if the screen width is between 768px and 992px, that this rule would be run, over the original rule?

I'm a reasonable newbie to CSS, I'm a .NET guy, so apologies for what might be a very basic question.

Thanks

Please share any rules in `additional.css` that target these classes: ```blog .blog-item.right h4, .blog .blog-item.right .item-date, .blog .blog-item.right p``` — Kristoffer Bohmann, Dec 28 '15 at 20:18

score 7 · Answer 1 · edited Dec 28 '15 at 22:33

7

The order does matter because CSS rules can be overridden. If multiple rules match something with the same priority (the same specificity; more specific rules have higher priority), the last rule will prevail. It is not specific to multiple files, though. The same would happen if those two rules were in the same file.

In your example, loading the more general rule (without media query) would make the rule with a query obsolete, because it would be always overridden. The other way round makes sense, because the general rule will be only overridden in specific circumstances.

edited Dec 28 '15 at 22:33

thatWiseGuy

384
2
3
18

answered Dec 28 '15 at 20:14

Igor Skoric

634
4
15

3

Essentially, it's what the "C" in "CSS" indicates. – QuestionMarks Dec 28 '15 at 20:17

score 4 · Accepted Answer · edited Dec 28 '15 at 21:01

4

Short answer: Yes.

This is actually a subject I taught just last week, and I'll tell you a brief version of a one-hour class I told my students:

Bootstrap first to establish the framework
Follow with any supporting stylesheet (Owl.css, plugins.css, etc)
Next is your custom stylesheet. This is to override all of the above.
Lastly, the responsive stylesheet. This one will override all of the above systematically and programatically according to the media queries conditions being satisfied in the browser.

Doing this type of architecture will reduce the amount of (important!) drastically.

edited Dec 28 '15 at 21:01

Doug Richardson

10,483
6
51
77

answered Dec 28 '15 at 20:18

LOTUSMS

10,317
15
71
140

How does this answer his question? As I understood it, it was a question about the *if* and the *why*. Not the how. Anyway, it seems that he accepted your answer, so i am clearly wrong on that. – Igor Skoric Dec 29 '15 at 12:05

score 2 · Answer 3 · edited May 23 '17 at 12:23

You want to be aware of a very important CSS concept known as Specificity.

If the elements affecting your media queries have the same specificity between your CSS files, then there could be conflicts.

Example:

<header class="header">Some header and stuff here</header>

additional.css could have a specific style for a <header> element, where it specifies the header selector like so:

header { background-color: red; }

However mobile.css could contain a selector for the .header class instead, in which it tries to do the following:

.header { background-color: blue; }

Due to specificity rules, guess which one will apply? The rule in additional.css

That is where thinking on your CSS structure from an architectural point of view is critical. I highly recommend you look at the differences between your files to better understand how your elements are being modified by your media queries and why.

Here is also a short discussion on contradictory CSS files asked on Stack Overflow that you might find helpful: Order of prioritization when using multiple contradictory css files.

Shomz · Answer 4 · 2015-12-28T20:19:31.900

0

Unless your stylesheet additional.css has a mediaquery specifying screens that are NOT between 768 and 992 pixels, there is no reason why it won't be loaded (meaning: yes, they would load normally unless you specifically cancel it out).

Media queries don't affect specificity. Therefore, a rule of thumb is to put all media queries last because you're left with specificity and order (last rules overriding all the previous ones with the same specificity).

Look:

@media (min-width:0px) {
  div {background: green}
}

div {height: 20px; background: red}

<div>Nope, I won't be green</div>

edited Dec 28 '15 at 20:19

answered Dec 28 '15 at 20:13

Shomz

37,421
4
57
85

Yes, can't wait to hear the brilliant reasoning behind that downvote. – Shomz Dec 28 '15 at 20:16

Should the order of CSS files in a HTML page matter?

4 Answers4