CODEWITHSUNDEEP
cssmedia-queries
ukitconsultant
ukitconsultant

Reputation: 41

CSS order of precedence with

So I am currently building a system which allows the CSS to be stored within MariaDB (MySQL) database. I am currently going over the logic flow for this, and wondered what is preferable in terms of media queries.

So, what I really want to know is;

Should I load the media queries at the top of the CSS file or the non media query selectors at the top of the CSS file? Which one is preferable? Or is this subjective, because of how things are overwritten by code further down the page.

Thanks in advance everyone.

Upvotes: 1

Views: 249

Answers (2)

Nensi601
Nensi601

Reputation: 136

It doesn't matter. For practical purposes i put the media queries after the modelled element but you could put all the queries in the top or in the bottom of the page and it would be indifferent (it won't load faster or slower). For debugging purposes i think it's better my method.

For example:

.box { max-width: auto; }

@media (min-width: 1200px) {
  .box {
    max-width: 10px;
  }
}

Upvotes: 1

Majid
Majid

Reputation: 2910

Actually this could be subjective, however, there is the best practice for that.

What I prefer is to keep your normal CSS selectors in one file like app.scss and keep your media-query in another file like responsive.scss while developing. so even would be better to make all modules separate. However, at the end, you need to concatenate them and the best would be to keep your normal CSS selectors first and then load Media-Query right after that. 

@import 'custom/app';
@import 'custom/responsive';

The reason to follow this practice is that CSS will be read from TOP to BOTTOM, thus, you may understand that all your media query rules will be implied right after their original rules and it won't affect responsiveness.

All in all, that could be very subject and may other developers would prefer to write their CSS and media query CSS rules right after each other but that would be obvious that they most likely to code media query right after main rules. TO clarify, I will write only one sample code in my perspective:

GOOD

 body {
        background-color: lightblue;
    }

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

BAD

   @media only screen and (orientation: landscape) {
        body {
            background-color: lightblue;
        }
    }

   body {
            background-color: lightblue;
        }

Update:

I'd like to also mention two different approaches.

Mobile First

Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to.

body { background: lightblue; }

@media (min-width: 480px) {
  body { background: lightblue; }
}

Desktop First

Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to.

body { background: lightblue; }

@media (max-width: 480px) {
  body { background: lightblue; }
}

Upvotes: 2

Related Questions