Hi
I am surprised to see how many web masters / web designers are still writing "Desktop-first CSS", so I thought it might be useful to talk about Desktop and Mobile first CSS.
First of all, when we speak about "Mobile-first CSS" it has NOTHING to do, with designing a page layout in priority for mobile!
Mobile-first and Desktop-first CSS are only referring to the order in which you write your CSS. So it's purely technical consideration. (Mobile-first design is another subject).
Quick example, considering that Desktop is > 720px , mobile < 720px ( this is simplistic for the example only), let's take a div with a class "xyz" :
.xyz{background:red;}
@media only screen and (max-width:720px){.xyz{background:blue;}}
On Desktop the div will have a Red background, and on mobile a Blue background.
How does it translate for the rendering engine.
(1) xyz.background=red
(2) if(max-width<720px) then xyz.background=blue
So
- on dekstop, only (1) is executed, (2) is ignored.
- on mobile, (1) is executed AND (2) is executed.
So it means that on mobile, there are TWO "calculations/operations", before the class is defined.
Mobile devices are often less powerful than desktops, so what's the point to make them compute twice more things?
Now let's write the CSS in a different order:
.xyz{background:blue;}
@media only screen and (min-width:720px){.xyz{background:red;}}
This produces the exact same. Red on desktop and Blue on mobile, BUT, in that case, on mobile devices, there is only ONE "calculation", the second is ignored since the mobile device is not concerned by the condition.
Of course , in this example, this is extremely simple, but if you consider a real situation, you can see how much resources can be wasted on mobile devices, if the browser has to compute the desktop class parameters, and then again has to apply the mobile device parameters. You can see that this is in the interest of everybody to optimize how CSS are calculated, and avoid mobile to have to calculate things twice.
So writing Mobile-first CSS, can improve your first paint, and (may) make your page to start being displayed quickly on mobile devices, even if it's a matter of milliseconds, visitors can "feel" it.
(all optimizations all welcome)
ps: it' s again more true, if you have external CSS files, this will avoid extra file download and latency.
