Do you use @media queries for both mobile and desktop?

Hi there,

I've been wondering if it's good practice to use @media queries for both mobile and desktop layout in CSS.

I've learnt that mobile first approach was good practice throughout the front-end course in Treehouse, and I believed so too when I was learning. But after I got a job as a junior front-end developer, and working on the real projects, I've come to face that many designs coming from designer were desktop first, then mobile layouts came after. I know that you might think that it's designer's problem, they should consider mobile and desktop layout both at the same time in the first place. But in real world, it's not the way things work yet due to lack of end-client's web knowledge, or the budget of projects. But I also understand that designers are likely to think about the layout for desktop, then mobile as I was in the same situation as a graphic/web designer before.

Anyways, this is the problem I am having in my work place, and every other developers write desktop layout first, then write mobile style in the @media queries. Problem of this work flow is that you have to minify and over write the css for mobile layout again, and it just takes time and doesn't make sense to re-write css back to default value (a lot of times, since mobile layout is not complicated as desktop layout).

Then, I came up with this idea that use mobile first approach (@media query (min-width:) for desktop) as I've learnt in Treehouse, but write desktop layout first in the @media. But then I faced the problem that after completing desktop layout first then write mobile style outside of @media query (min-width:), it messes up the layout for desktop, since some properties and values are not written in the @media. I understand why that happened, because any css written outside of @media is universal style. So I came to the conclusion that I have to write mobile layout first if I am to use mobile first approach. BUT, then I faced the situation where I had to revise some css code for mobile after completing the project, which gave me the same problem that I had by writing desktop layout first in the mobile first approach.

Ok, so now is the real question. Do you think it's better to use @media queries for both mobile and desktop layout, then write any universal css outside of @media queries, for example font style and colour style etc. If I were to use this approach, I don't need to worry about which layout to write first, and I also can revise things separately which is less chance to break the layout of each other.

I researched about this method, and found some people use this way, but not many articles I found regarding this matter.

Is there anyone using this way? And what are the pros and cons do you reckon?

Thanks guys!