Time to rethink mobile-first CSS? | A List Apart

An interesting look at whether the current mobile-first paradigm is problematic. Ultimately, the title feels a little like click-bait; to me the solution proposed remains mobile-first, but suggests some modern enhancements and some additional (and unrelated) changes to current common practices, such as splitting CSS bundles.

On using media-query ranges to "donut scope" styles for better maintainability:

To this end, closed media query ranges are our best friend. If we need to make a change to any given view, we make it in the CSS media query range that applies to the specific breakpoint.

.my-block { 
    padding: 20px; 
    @media (min-width: 768px) and (max-width: 1023.98px) { 
        padding: 40px; 
    } 
}
On splitting CSS into bundles for different viewport ranges:
With HTTP/2 and HTTP/3 now on the scene, the number of requests is no longer the big deal it used to be. This allows us to separate the CSS into multiple files by media query. The clear benefit of this is the browser can now request the CSS it currently needs with a higher priority than the CSS it doesn’t.
with the CSS separated into different files linked and marked up with the relevant media attribute, the browser can prioritize the files it currently needs.
<link href="default.css" rel="stylesheet">
<link href="mobile.css" media="screen and (max-width: 767.98px)" rel="stylesheet">
<link href="tablet.css" media="screen and (min-width: 768px) and (max-width: 1083.98px)" rel="stylesheet">

Explore Other Notes

β¬… Newer

Make free stuff

A lovely argument for using the web to simply make stuff and then show other people, without entering into the hustle and grind of late-stage […]

Older ➑

Decision time

Good design involves a lot of decision making, and decisions result in trade-offs. Understanding how to go about considering design decisions is critical to good user experiences and ensuring other […]
  • An interesting look at whether the current mobile-first paradigm is problematic. Ultimately, the title feels a little like click-bait; to me the solution proposed remains mobile-first, but suggests [&#8230;]
  • Murray Adcock.
Journal permalink