CODEWITHSUNDEEP
cssmedia-queries
rablentain
rablentain

Reputation: 6715

css media queries, one or many for mobile optimization

I know that using media queries the mobile first way should make the website faster on mobile devices. I wonder if there is a difference in using a lot of media queries, like this:

#first {}

@media screen and (min-width: 37.5em) {
    #first {}
}

#second {}

@media screen and (min-width: 37.5em) {
    #second {}
}

instead of using one big one for all the desktop styles, like this:

#first {}

#second {}

@media screen and (min-width: 37.5em) {
    #first {}

    #second {}
}

Which is better, for the performance, or does it matter? I think that the first approach is more easy to read when dealing with lots of styles.

Upvotes: 1

Views: 139

Answers (1)

Enjayy
Enjayy

Reputation: 1074

They both do the same thing the only thing that makes the second approach better is that you are not repeating yourself. You are keeping the code DRY and everything is located in one spot for working with that media query. Plus rewriting @media screen every time would be a pain in the ass and time consuming.

Upvotes: 1

Related Questions