Discussion on: Why Do Developers Choose Mobile First Approach

[Evan Payne]

It's the difference between (pseudo-code follows)

desktop first:
.hero-card {
width: 500px
}
@media(max-width: 500px) {
.hero-card {
width: 100%;
}
}

And mobile first:
@media(min-width: 500px) {
.hero-card {
width: 500px;
}
}

It's a contrived example, but with mobile first, you get all of the browser's default styles without writing extra code, and you only override them when you get to a breakpoint where they need adjusting. With desktop first, you write the code to make it work, and then you write it again to override the desktop styles when the screen is smaller.

[Andrey]

thanks for the reply and the example.

Thats why I said , not entirely accurate, if we use your contrived example, then you are right.

But if you are ought to use a container for your desktop app, you will end up using something like max-width anyway. So you dont double up on your css. Max width will be much needed in any case.

desktop first:
.hero-card {
max-width: 500px
}
@media(max-width: 500px) {
// nothing
}

And mobile first:
@media(min-width: 500px) {
.hero-card {
max-width: 500px;
}
}

in both cases, we need max-width

[Evan Payne]

True, though by using max-width you are already using the default behaviour of the browser. Again, contrived example.

But how about for more complex layouts like a sidebar and main content within that container, or a complex grid layout. I've worked with migrating a codebase from desktop-first to mobile-first, and I can tell you firsthand that you end up with far less CSS, that's all I'm getting at here.