What is mobile-first CSS?
Mobile-first CSS has pretty much nothing to do with mobile-first design or development practices. They can be related, but don’t have to be.
Mobile-first CSS has to do with how you architect your code and media queries, as well as how browsers parse your CSS.
I often times step into codebases that have max-width media queries that target mobile devices. Something to the tune of:
.post-title {
font-size: 48px;
}@media only screen and (max-width: 320px) {
.post-title {
font-size: 24px;
}
}
When I first started using media queries — this was a constant pattern in my code. I was used to writing desktop styles first and I loved the convenience of being able to ‘fix’ my desktop design for mobile.
Something didn’t feel right though. And I started to wonder. Is this pattern really an anti-pattern?
In Harry Roberts’ wonderfully written ‘code smells in css’ there is a great line that helped shape the way I think about authoring CSS:
Rulesets should only ever inherit and add to previous ones, never undo.- Harry Roberts
When applying this thinking to how we architect our media queries, we could say a device shouldn’t parse multiple definitions of the same ruleset if it doesn’t have to.
When a devices web browser parses your CSS, it doesn’t parse the code within media queries that don’t apply to it.
I.E devices that have a screen-width smaller than 64em will not parse anything inside this block:
@media only screen and (min-width: 64em) {
/* Some CSS here */
}In other words all CSS that isn’t inside a media query will get parsed by your mobile-devices no-matter what. So you should use that to target the smallest devices with your default styles and override from there as your content demands it.
Anecdotally since I started developing my CSS mobile-first, I build fully responsive interfaces much more quickly as opposed to when I start at large screen-sizes and work backwards from there. I find that I don’t have to ‘fix’ my desktop view as my mobile-first CSS works as a desktop interface. I do override my mobile styles to enhance a design at larger screensizes…but I never feel like I’m fixing something that is broken. This was a big shift in my mental approach for authoring CSS.
Light-weight css files turn out to be another by-product of making the switch to mobile-first CSS. Personally I think smaller files are rad because there is less to read and the less you have to read the more time you have to look at cat gifs.
