Is It Time for a Rethink? – A Checklist Aside

The mobile-first design methodology is nice—it focuses on what actually issues to the person, it’s well-practiced, and it’s been a typical design sample for years. So creating your CSS mobile-first also needs to be nice, too…proper? 

Article Continues Under

Properly, not essentially. Basic mobile-first CSS growth relies on the precept of overwriting model declarations: you start your CSS with default model declarations, and overwrite and/or add new kinds as you add breakpoints with min-width media queries for bigger viewports (for a very good overview see “What’s Cellular First CSS and Why Does It Rock?”). However all these exceptions create complexity and inefficiency, which in flip can result in an elevated testing effort and a code base that’s tougher to keep up. Admit it—how many people willingly need that?

By yourself initiatives, mobile-first CSS could but be the perfect device for the job, however first you might want to consider simply how applicable it’s in gentle of the visible design and person interactions you’re engaged on. That can assist you get began, right here’s how I am going about tackling the components you might want to look ahead to, and I’ll focus on some alternate options if mobile-first doesn’t appear to fit your challenge.

Benefits of mobile-first#section2

Among the issues to love with mobile-first CSS growth—and why it’s been the de facto growth methodology for thus lengthy—make a number of sense:

Improvement hierarchy. One factor you undoubtedly get from mobile-first is a pleasant growth hierarchy—you simply concentrate on the cellular view and get creating. 

Tried and examined. It’s a tried and examined methodology that’s labored for years for a motive: it solves an issue very well.

Prioritizes the cellular view. The cellular view is the easiest and arguably crucial, because it encompasses all the important thing person journeys, and sometimes accounts for a larger proportion of person visits (relying on the challenge). 

Prevents desktop-centric growth. As growth is finished utilizing desktop computer systems, it may be tempting to initially concentrate on the desktop view. However excited about cellular from the beginning prevents us from getting caught afterward; nobody needs to spend their time retrofitting a desktop-centric web site to work on cellular units!

Disadvantages of mobile-first#section3

Setting model declarations after which overwriting them at larger breakpoints can result in undesirable ramifications:

Extra complexity. The farther up the breakpoint hierarchy you go, the extra pointless code you inherit from decrease breakpoints. 

Larger CSS specificity. Types which were reverted to their browser default worth in a category identify declaration now have the next specificity. This could be a headache on massive initiatives once you need to preserve the CSS selectors so simple as attainable.

Requires extra regression testing. Modifications to the CSS at a decrease view (like including a brand new model) requires all larger breakpoints to be regression examined.

The browser can’t prioritize CSS downloads. At wider breakpoints, traditional mobile-first min-width media queries don’t leverage the browser’s functionality to obtain CSS information in precedence order.

The issue of property worth overrides#section4

There may be nothing inherently mistaken with overwriting values; CSS was designed to just do that. Nonetheless, inheriting incorrect values is unhelpful and could be burdensome and inefficient. It will possibly additionally result in elevated model specificity when you must overwrite kinds to reset them again to their defaults, one thing which will trigger points afterward, particularly if you’re utilizing a mix of bespoke CSS and utility courses. We gained’t be capable to use a utility class for a method that has been reset with the next specificity.

With this in thoughts, I’m creating CSS with a concentrate on the default values far more as of late. Since there’s no particular order, and no chains of particular values to maintain observe of, this frees me to develop breakpoints concurrently. I focus on discovering widespread kinds and isolating the precise exceptions in closed media question ranges (that’s, any vary with a max-width set). 

This strategy opens up some alternatives, as you’ll be able to have a look at every breakpoint as a clear slate. If a part’s format seems to be prefer it ought to be primarily based on Flexbox in any respect breakpoints, it’s fantastic and could be coded within the default model sheet. But when it seems to be like Grid could be a lot better for giant screens and Flexbox for cellular, these can each be executed totally independently when the CSS is put into closed media question ranges. Additionally, creating concurrently requires you to have a very good understanding of any given part in all breakpoints up entrance. This can assist floor points within the design earlier within the growth course of. We don’t need to get caught down a rabbit gap constructing a posh part for cellular, after which get the designs for desktop and discover they’re equally advanced and incompatible with the HTML we created for the cellular view! 

Although this strategy isn’t going to go well with everybody, I encourage you to offer it a strive. There are many instruments on the market to assist with concurrent growth, comparable to Responsively App, Blisk, and plenty of others. 

Having stated that, I don’t really feel the order itself is especially related. If you’re snug with specializing in the cellular view, have a very good understanding of the necessities for different breakpoints, and like to work on one gadget at a time, then by all means stick to the traditional growth order. The vital factor is to establish widespread kinds and exceptions so you’ll be able to put them within the related stylesheet—a kind of handbook tree-shaking course of! Personally, I discover this a bit simpler when engaged on a part throughout breakpoints, however that’s in no way a requirement.

Closed media question ranges in follow #section5

In traditional mobile-first CSS we overwrite the kinds, however we will keep away from this by utilizing media question ranges. As an instance the distinction (I’m utilizing SCSS for brevity), let’s assume there are three visible designs: 

  • smaller than 768
  • from 768 to beneath 1024
  • 1024 and something bigger 

Take a easy instance the place a block-level aspect has a default padding of “20px,” which is overwritten at pill to be “40px” and set again to “20px” on desktop.

Basic min-width mobile-first

.my-block {
  padding: 20px;
  @media (min-width: 768px) {
    padding: 40px;
  @media (min-width: 1024px) {
    padding: 20px;

Closed media question vary

.my-block {
  padding: 20px;
  @media (min-width: 768px) and (max-width: 1023.98px) {
    padding: 40px;

The refined distinction is that the mobile-first instance units the default padding to “20px” after which overwrites it at every breakpoint, setting it 3 times in whole. In distinction, the second instance units the default padding to “20px” and solely overrides it on the related breakpoint the place it isn’t the default worth (on this occasion, pill is the exception).

The aim is to: 

  • Solely set kinds when wanted. 
  • Not set them with the expectation of overwriting them afterward, repeatedly. 

To this finish, closed media question ranges are our greatest buddy. If we have to make a change to any given view, we make it within the CSS media question vary that applies to the precise breakpoint. We’ll be a lot much less prone to introduce undesirable alterations, and our regression testing solely must concentrate on the breakpoint we now have truly edited. 

Taking the above instance, if we discover that .my-block spacing on desktop is already accounted for by the margin at that breakpoint, and since we need to take away the padding altogether, we might do that by setting the cellular padding in a closed media question vary.

.my-block {
  @media (max-width: 767.98px) {
    padding: 20px;
  @media (min-width: 768px) and (max-width: 1023.98px) {
    padding: 40px;

The browser default padding for our block is “0,” so as an alternative of including a desktop media question and utilizing unset or “0” for the padding worth (which we would want with mobile-first), we will wrap the cellular padding in a closed media question (since it’s now additionally an exception) so it gained’t get picked up at wider breakpoints. On the desktop breakpoint, we gained’t must set any padding model, as we would like the browser default worth.

Bundling versus separating the CSS#section6

Again within the day, protecting the variety of requests to a minimal was essential as a result of browser’s restrict of concurrent requests (sometimes round six). As a consequence, the usage of picture sprites and CSS bundling was the norm, with all of the CSS being downloaded in a single go, as one stylesheet with highest precedence. 

With HTTP/2 and HTTP/3 now on the scene, the variety of requests is not the massive deal it was. This permits us to separate the CSS into a number of information by media question. The clear good thing about that is the browser can now request the CSS it presently wants with the next precedence than the CSS it doesn’t. That is extra performant and might scale back the general time web page rendering is blocked.

Which HTTP model are you utilizing?#section7

To find out which model of HTTP you’re utilizing, go to your web site and open your browser’s dev instruments. Subsequent, choose the Community tab and ensure the Protocol column is seen. If “h2” is listed beneath Protocol, it means HTTP/2 is getting used. 

Be aware: to view the Protocol in your browser’s dev instruments, go to the Community tab, reload your web page, right-click any column header (e.g., Identify), and verify the Protocol column.

Chrome dev tools, Network tab filtered by document, Protocol column
Be aware: for a summarized comparability, see ImageKit’s “HTTP/2 vs. HTTP/1.”

Additionally, in case your web site continues to be utilizing HTTP/1…WHY?!! What are you ready for? There may be wonderful person help for HTTP/2.

Separating the CSS into particular person information is a worthwhile job. Linking the separate CSS information utilizing the related media attribute permits the browser to establish which information are wanted instantly (as a result of they’re render-blocking) and which could be deferred. Primarily based on this, it allocates every file an applicable precedence.

Within the following instance of an internet site visited on a cellular breakpoint, we will see the cellular and default CSS are loaded with “Highest” precedence, as they’re presently wanted to render the web page. The remaining CSS information (print, pill, and desktop) are nonetheless downloaded in case they’ll be wanted later, however with “Lowest” precedence. 

Chrome dev tools, Network tab filtered by css, Priority column

With bundled CSS, the browser should obtain the CSS file and parse it earlier than rendering can begin.

Whereas, as famous, with the CSS separated into totally different information linked and marked up with the related media attribute, the browser can prioritize the information it presently wants. Utilizing closed media question ranges permits the browser to do that in any respect widths, versus traditional mobile-first min-width queries, the place the desktop browser must obtain all of the CSS with Highest precedence. We are able to’t assume that desktop customers all the time have a quick connection. As an example, in lots of rural areas, web connection speeds are nonetheless gradual. 

The media queries and variety of separate CSS information will differ from challenge to challenge primarily based on challenge necessities, however may look just like the instance beneath.

Bundled CSS

<hyperlink href=" site.css" rel="stylesheet">

This single file incorporates all of the CSS, together with all media queries, and it is going to be downloaded with Highest precedence.

Separated CSS

<hyperlink href="" rel="stylesheet"><hyperlink href="cellular.css" media="display and (max-width: 767.98px)" rel="stylesheet"><hyperlink href="pill.css" media="display and (min-width: 768px) and (max-width: 1083.98px)" rel="stylesheet"><hyperlink href="desktop.css" media="display and (min-width: 1084px)" rel="stylesheet"><hyperlink href="print.css" media="print" rel="stylesheet">

Separating the CSS and specifying a media attribute worth on every hyperlink tag permits the browser to prioritize what it presently wants. Out of the 5 information listed above, two will likely be downloaded with Highest precedence: the default file, and the file that matches the present media question. The others will likely be downloaded with Lowest precedence.

Relying on the challenge’s deployment technique, a change to at least one file (cellular.css, for instance) would solely require the QA staff to regression take a look at on units in that particular media question vary. Evaluate that to the prospect of deploying the only bundled web site.css file, an strategy that might usually set off a full regression take a look at.

The uptake of mobile-first CSS was a very vital milestone in net growth; it has helped front-end builders concentrate on cellular net functions, relatively than creating websites on desktop after which making an attempt to retrofit them to work on different units.

I don’t assume anybody needs to return to that growth mannequin once more, however it’s vital we don’t lose sight of the problem it highlighted: that issues can simply get convoluted and fewer environment friendly if we prioritize one specific gadget—any gadget—over others. For that reason, specializing in the CSS in its personal proper, all the time conscious of what’s the default setting and what’s an exception, looks as if the pure subsequent step. I’ve began noticing small simplifications in my very own CSS, in addition to different builders’, and that testing and upkeep work can also be a bit extra simplified and productive. 

On the whole, simplifying CSS rule creation each time we will is finally a cleaner strategy than going round in circles of overrides. However whichever methodology you select, it must go well with the challenge. Cellular-first could—or could not—develop into your best option for what’s concerned, however first you might want to solidly perceive the trade-offs you’re moving into.

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here