Mobile-First CSS: Is It Time for a Rethink?

The mobile-first design approach is excellent because it concentrates on what the consumer truly needs, is well-practiced, and has become a standard design practice for years. But developing your CSS mobile-first should also be fantastic, too…right?

Well, not necessarily. Classic mobile-first CSS development is based on the principle of overwriting style declarations: you begin your CSS with default style declarations, and overwrite and/or add new styles as you add breakpoints with min-width media queries for larger viewports (for a good overview see “What is Mobile First CSS and Why Does It Rock?”). But all those exceptions create complexity and inefficiency, which in turn can lead to an increased testing effort and a code base that’s harder to maintain. Admit it—how many of us willingly want that?

Mobile-first CSS may yet be the best option for your own projects, but you need to first determine how ideal it is in light of the physical design and user interactions you’re trying to create. To help you get started, here’s how I go about tackling the elements you need to watch for, and I’ll discuss some alternative remedies if mobile-first doesn’t seem to fit your job.

merits of mobile-first technology

Some of the benefits of mobile-first CSS growth, and why it’s been the de facto growth practice for so long, make a lot of sense:

Development order. A good development hierarchy is something you can definitely expect from mobile-first; you just concentrate on the mobile view and start developing.

tested and verified. It’s a tried and tested technique that’s worked for years for a cause: it solves a problem actually also.

prioritizes the smart see. The smart watch is the simplest and perhaps the most crucial because it covers all of the crucial user journeys and frequently accounts for more user visits ( depending on the project ) in terms of both simple and crucial aspects.

Stops desktop-centric growth. It can be tempting to first focus on the desktop perspective because desktop computers are used for growth. No one wants to spend their day retrofitting a desktop-centric website to work on mobile devices, but thinking about smart from the beginning prevents us from getting stuck in the future!

Drawbacks of mobile-first

Kind declarations can be set at lower breakpoints and therefore overwritten at higher breakpoints:

more complicated stuff. The farther up the target order you go, the more unnecessary script you inherit from lower thresholds.

higher CSS sensitivity Styles that have been returned to the default value in a class name charter then have a higher sensitivity. This can be a pain on big projects when you want to preserve the CSS candidates as simple as possible.

Requires more analysis tests. All higher thresholds must be regression tested if CSS changes at lower views ( such as adding a new fashion ).

The browser can’t prioritize CSS downloads. At wider breakpoints, classic mobile-first min-width media queries don’t leverage the browser’s capability to download CSS files in priority order.

Property price issue overrules its own.

There is nothing inherently wrong with overwriting beliefs, CSS was designed to do just that. Even so, inheriting wrong values may be laborious and ineffective. When you have to replace styles to restore them back to their defaults, which may cause issues after, especially if you are using a combination of bespoke CSS and power classes, it can also lead to more fashion precision. We won’t be able to use a power school for a design that has been restore with a higher precision.

With this in mind, I’m developing CSS with a focus on the default values much more these days. Since there’s no specific order, and no chains of specific values to keep track of, this frees me to develop breakpoints simultaneously. I concentrate on finding common styles and isolating the specific exceptions in closed media query ranges (that is, any range with a max-width set).

As you can view each target as a blank slate, this technique opens up some opportunities. It’s acceptable and can be coded in the default style plate if a product’s structure appears to be based on Flexbox at all thresholds. But if it looks like Grid would be much better for large windows and Flexbox for portable, these can both be done entirely freely when the CSS is put into finished media keyword ranges. Additionally, having a thorough understanding of any given component in all breakpoints upfront is necessary for developing simultaneously. This can help identify issues in the design more quickly during the development process. We don’t want to get stuck down a rabbit hole building a complex component for mobile, and then get the designs for desktop and find they are equally complex and incompatible with the HTML we created for the mobile view!

Although this strategy won’t work for everyone, I urge you to try it. There are plenty of resources available to support concurrent development, including Responsively App, Blisk, and many others.

Having said that, I don’t feel the order itself is particularly relevant. If you like to work on one device at a time, are comfortable with focusing on the mobile view, and have a good understanding of the requirements for other breakpoints, then you should definitely stick to the classic development order. It’s crucial to find common styles and exceptions in the appropriate stylesheet, which is a manual tree-shaking procedure! Personally, I find this a little easier when working on a component across breakpoints, but that’s by no means a requirement.

Closed media query ranges are used in real life.

We overwrite the styles in the traditional mobile-first CSS, but media query ranges can be used to prevent this. To illustrate the difference ( I’m using SCSS for brevity ), let’s assume there are three visual designs:

smaller than 768
from 768 to less than 1024
1024 and anything larger

Take a simple example where a block-level element has a default padding of “20px,” which is overwritten at tablet to be “40px” and set back to “20px” on desktop.

Classic min-width mobile-first

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

Closed media query range

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

The subtle difference is that the mobile-first example sets the default padding to “20px” and then overwrites it at each breakpoint, setting it three times in total. In contrast, the second example sets the default padding to “20px” and only overrides it at the relevant breakpoint where it isn’t the default value (in this instance, tablet is the exception).

The goal is to:

Only set styles when needed.
Not set them with the expectation of overwriting them later on, again and again.

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. We’ll be much less likely to introduce unwanted alterations, and our regression testing only needs to focus on the breakpoint we have actually edited.

Taking the above example, if we find that .my-block spacing on desktop is already accounted for by the margin at that breakpoint, and since we want to remove the padding altogether, we could do this by setting the mobile padding in a closed media query range.

.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 instead of adding a desktop media query and using unset or “0” for the padding value (which we would need with mobile-first), we can wrap the mobile padding in a closed media query (since it is now also an exception) so it won’t get picked up at wider breakpoints. At the desktop breakpoint, we won’t need to set any padding style, as we want the browser default value.

Bundling versus separating the CSS

Back in the day, keeping the number of requests to a minimum was very important because the browser's concurrent request limit (typically around six ) was high. In consequence, using image sprites and CSS bundling was the norm, with all the CSS being downloaded as a single stylesheet with the highest priority.

With HTTP/2 and HTTP/3 now on the scene, the number of requests is no longer the big deal it used to be. By using a media query, we can break CSS into several files. The obvious benefit of this is that the browser can now request the CSS it currently requires with a higher priority than the CSS it doesn't. This is more performant and can reduce the overall time page rendering is blocked.

What version of HTTP do you use?

Go to your website and open the dev tools for your browser to find out which version of HTTP you're using. Next, select the Network tab and make sure the Protocol column is visible. If "h2" is included in the protocol list, that indicates that HTTP/2 is being used.

Note: To check the Protocol column in your browser's dev tools, right-click any column header ( such as Name ), go to the Network tab, reload your page, and then check the Protocol column.

Also, if your website is still using HTTP/1... WHILE!! What are you waiting for? The HTTP/2 user support is excellent.

splitting the CSS

Separating the CSS into individual files is a worthwhile task. Linking the separate CSS files using the relevant media attribute allows the browser to identify which files are needed immediately (because they’re render-blocking) and which can be deferred. Based on this, it allocates each file an appropriate priority.

In the following example of a website visited on a mobile breakpoint, we can see the mobile and default CSS are loaded with" Highest" priority, as they are currently needed to render the page. In case they are needed later, the remaining CSS files ( print, tablet, and desktop ) are still being downloaded with" Lowest" priority, though they are still needed.

Before rendering can begin, the browser will need to download and parse the CSS file when using bundled CSS.

While, as noted, 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. Using closed media query ranges allows the browser to do this at all widths, as opposed to classic mobile-first min-width queries, where the desktop browser would have to download all the CSS with Highest priority. We can’t assume that desktop users always have a fast connection. For instance, in many rural areas, internet connection speeds are still slow.

Depending on project requirements, the media queries and the number of separate CSS files will vary from project to project, but the example below might look similar.

bundled CSS

This single file contains all the CSS, including all media queries, and it will be downloaded with Highest priority.

Separated CSS

Separating the CSS and specifying a media attribute value on each link tag allows the browser to prioritize what it currently needs. Out of the five files listed above, two will be downloaded with Highest priority: the default file, and the file that matches the current media query. The others will be downloaded with Lowest priority.

Depending on the project’s deployment strategy, a change to one file (mobile.css, for example) would only require the QA team to regression test on devices in that specific media query range. Compare that to the prospect of deploying the single bundled site.css file, an approach that would normally trigger a full regression test.

Moving on

The adoption of mobile-first CSS was a significant development milestone because it allowed front-end developers to concentrate on mobile web applications rather than creating websites for desktop use and attempting to convert them to work on other devices.

I don't think anyone wants to return to that development model again, but it's important we don't lose sight of the issue it highlighted: that things can easily get convoluted and less efficient if we prioritize one particular device—any device—over others. For this reason, it seems like the natural next step to concentrate on the CSS in its own right, always mindful of what is the default setting and what constitutes an exception. I've started to notice subtle simplifications in both the CSS of my own and that of other developers, and that testing and maintenance work is also a little more effective and streamlined.

In general, simplifying CSS rule creation whenever we can is ultimately a cleaner approach than going around in circles of overrides. However, the project must fit the methodology you choose. Mobile-first may turn out to be the best option for the situation at hand or not, but first you need to fully comprehend the trade-offs you're entering.