Mobile first CSS

[itsLeon]

Quick question about writing mobile first CSS.
The company i started working for have the method of writing the base css for mobile and then use media queries for tablet/desktop/etc.

What is the benefit of doing this? Because i cant find any. I can see why mobile first for design is a good thing but for development? Im used of writing the base css for desktop and then use media queries when needed for mobile.

(All CSS is minified in 1 file, so its not a size thing.)

[Paulie_D]

Primarily because the design/layout etc for mobile is much simpler that on desktop etc.

If you design for desktop first you have to UNDO/RESET a lot of the desktop styling to rearrange things for mobile.

If you start with mobile first you enhance the design as and when the screen size requires.

Although file size is not an issue, it does make your CSS neater, smaller and easier to debug.

[bearhead]

Also, depending on your audience, there is a pretty good chance that the majority of your users are on mobile devices. It makes sense to design the default around them rather than the desktop users.

[itsLeon]

Still have a hard time to wrap my head around it.
Only thing i have found except your answer is that css inside a media query isnt parsed if not needed.

[itsLeon]

@bearhead,

By design do you mean the actual photoshop, sketch, etc stuff or the developer writing CSS part. Because i get that you want to design for mobile first and think about the content and optimize the little space you have.

[Author]

Posts