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">
