{"id":57645,"date":"2018-12-22T04:18:53","date_gmt":"2018-12-22T11:18:53","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/"},"modified":"2018-12-22T04:18:53","modified_gmt":"2018-12-22T11:18:53","slug":"generic-first-css-new-thinking-on-mobile-first","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/","title":{"rendered":"Generic First CSS: New Thinking On Mobile First"},"content":{"rendered":"Generic First CSS: New Thinking On Mobile First<\/title><\/p>\n<article>\n<header>\n<h1>Generic First CSS: New Thinking On Mobile First<\/h1>\n<address>Alastair Hodgson<\/address>\n<p> <time datetime=\"2018-12-21T14:45:16+01:00\">2018-12-21T14:45:16+01:00<\/time><time datetime=\"2018-12-21T16:34:19+00:00\">2018-12-21T16:34:19+00:00<\/time><\/header>\n<p>I think it\u2019s safe to say that Ethan Marcotte\u2019s <a href=\"https:\/\/alistapart.com\/article\/responsive-web-design\">Responsive Web Design<\/a> was a welcome revelation for web developers the world over. It triggered a whole new wave of design thinking and wonderful new front-end techniques. The reign of the oft-despised m dot websites was also over. In the same era and almost as influential was Luke Wroblewski\u2019s <a href=\"https:\/\/www.lukew.com\/ff\/entry.asp?933\">Mobile First<\/a> methodology \u2014 a solid improvement that built upon Marcotte\u2019s impressive foundations.<\/p>\n<p>These techniques are at the bedrock of most web developers lives, and they\u2019ve served us well, but alas, times change, and developers constantly iterate. As we increase the efficiency of our methods and the project requirements become more complex, new frustrations emerge.<\/p>\n<h3>The Journey To Generic First<\/h3>\n<p>I can\u2019t pinpoint exactly what made me change the way I write my CSS because it was really a natural progression for me that happened almost subconsciously. Looking back, I think it was more of a by-product of the development environment I was working in. The team I worked with had a nice SCSS workflow going on with a <a href=\"https:\/\/www.smashingmagazine.com\/articles\/%3Ca%20href=\" https:>“>nifty little mixin<\/a> for easily adding breakpoints within our CSS declarations. You probably use a similar technique.<\/p>\n<p>This wonderful little SCSS mixin suddenly made it easy to write super granular media queries. Take a hypothetical biography block that looks a little something like this:<\/p>\n<pre><code>.bio {\n display: block;\n width: 100%;\n background-color: #ece9e9;\n padding: 20px;\n margin: 20px 0;\n\n @include media('>=small') {\n max-width: 400px;\n background-color: white;\n margin: 20px auto;\n }\n\n @include media('>=medium') {\n max-width: 600px;\n padding: 30px;\n margin: 30px auto;\n }\n\n @include media('>=large') {\n max-width: 800px;\n padding: 40px;\n margin: 40px auto;\n }\n\n @include media('>=huge') {\n max-width: 1000px;\n padding: 50px;\n margin: 50px auto;\n }\n}\n<\/code><\/pre>\n<p><strong>Fig.1.<\/strong> <em>Typical mobile first with cascading media queries<\/em><\/p>\n<p>This works nicely \u2014 I\u2019ve written <em>a lot<\/em> of CSS like this in the past. However, one day it dawned upon me that overwriting CSS declarations as the device width increased just didn\u2019t make sense. Why declare a CSS property for it only to be overwritten in the following declaration?<\/p>\n<aside data-audience=\"non-subscriber\">\n<div>\n<div>\n<p>Front-end is messy and complicated these days. That’s why we publish <a href=\"https:\/\/smashed.by\/perfpanelarticles\">articles<\/a>, <a href=\"https:\/\/smashed.by\/perfpanelbooks\">printed books<\/a> and <a href=\"https:\/\/smashed.by\/perfpaneltv\">webinars<\/a> with useful techniques to improve your work. Even better: <a href=\"https:\/\/smashed.by\/perfpanelmembership\">Smashing Membership<\/a> with a growing selection of <strong>front-end\u00a0&\u00a0UX goodies<\/strong>. So you get your work done, better and faster.<\/p>\n<p> <a href=\"https:\/\/smashed.by\/perfpanelmembership\"><br \/>\n Explore Smashing Membership\u00a0?<br \/>\n <\/a>\n <\/div>\n<div>\n <a href=\"https:\/\/smashed.by\/perfpanelmembership\"><\/p>\n<div>\n <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.smashingmagazine.com\/images\/smashing-cat\/cat-rollerderby.svg\" alt=\"Smashing Cat, just preparing to do some magic stuff.\" width=\"310\" height=\"400\"><\/div>\n<p> <\/a>\n <\/div>\n<\/p><\/div>\n<\/aside>\n<p>This is what lead me to begin writing <em> compartmentalized media queries<\/em> as opposed to the more common approach of media queries that cascade upwards (or downwards) like the example in Fig.1.<\/p>\n<p>Instead of writing media queries that cascade upwards with increases in screen size, I began creating targeted media queries that would encapsulate styles at desired screen widths. The <a href=\"https:\/\/include-media.com\/\">media query mixin<\/a> would really come into its own here. Now my SCSS media queries are starting to look like this:<\/p>\n<pre><code>.bio {\n display: block;\n width: 100%;\n padding: 20px;\n margin: 20px 0;\n\n @include media('>=small', '<span>medium') {\n max-width: 400px;\n margin: 20px auto;\n }\n\n @include media('>=medium', '<span>large') {\n max-width: 600px;\n padding: 30px;\n margin: 30px auto;\n }\n\n @include media('>=large', '<span>huge') {\n max-width: 800px;\n padding: 40px;\n margin: 40px auto;\n }\n\n @include media('>=huge') {\n max-width: 1000px;\n padding: 50px;\n margin: 50px auto;\n }\n}\n<\/span><\/span><\/span><\/code><\/pre>\n<p><strong>Fig.2.<\/strong> <em>An example of compartmentalized media queries<\/em><\/p>\n<p>This new approach just felt more intuitive to me, it cut down on having to reset styles from the previous breakpoint, and it was making the CSS easier to read. More importantly, it was making the media queries self-documenting in a more significant way.<\/p>\n<p>I still wasn\u2019t 100% happy with the above though, It seemed like there was still a major issue to overcome.<\/p>\n<div><\/div>\n<h3>The Problem With Mobile First<\/h3>\n<p>The issue with mobile first is that by definition you will most likely have to override mobile-first styles in subsequent media-queries. This feels like a bit of an anti-pattern.<\/p>\n<p>So \u2014 to me \u2014 the answer was obvious: let\u2019s take the idea of media query compartmentalization to its logical conclusion \u2014 we will also compartmentalize the mobile specific styles into their very own media queries. I know, I know, this goes against the common convention we\u2019ve learned over the years. \u201cMobile First\u201d is so ubiquitous that it\u2019s usually one of the \u201cskills\u201d questions a hiring manager will ask. So surely any alternative must be wrong, shouldn\u2019t it? This is usually the part where people shake their heads at me whilst uttering <em>mobile first<\/em> over and over.<\/p>\n<p>Okay, so we\u2019re going to break through the mobile first dogma and compartmentalize all our styles into the relevant media queries. What we\u2019re now left with is pure generic styles declared on a CSS selector, with all other device specific styles encapsulated in media queries that only apply to the relevant screen dimensions. We now have <em>Generic First CSS<\/em>:<\/p>\n<pre><code>.bio {\n display: block;\n width: 100%;\n\n @include media('>=0', '<span>small') {\n padding: 20px;\n margin: 20px 0;\n }\n\n @include media('>=small', '<span>medium') {\n max-width: 400px;\n margin: 20px auto;\n }\n\n @include media('>=medium', '<span>large') {\n max-width: 600px;\n padding: 30px;\n margin: 30px auto;\n }\n\n @include media('>=large', '<span>huge') {\n max-width: 800px;\n padding: 40px;\n margin: 40px auto;\n }\n\n @include media('>=huge') {\n max-width: 1000px;\n padding: 50px;\n margin: 50px auto;\n }\n}\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<p><strong>Fig.3.<\/strong> <em>An example of Generic First CSS<\/em><\/p>\n<p>Yes, there are slightly more media queries, however, I see this as a benefit, any developer can now looks at this CSS and see exactly what styles are applied at each and every screen size without the cognitive overhead of having to pick apart media-query specificity.<\/p>\n<p>This can be great for people unfamiliar with the code base or even the future you!<\/p>\n<h4>When Not To Compartmentalize<\/h4>\n<p>There are still times when media query compartmentalization is a burden, and in some cases a good old >= media query is fine. Remember, all we\u2019re trying to do is avoid property overwrites.<\/p>\n<div><\/div>\n<h3>Dev Tool Bliss<\/h3>\n<p>One major unintended consequence of writing compartmentalized Generic First CSS is the experience you will get from your developer tools style panel. Without the media query cascade, you will now have a clearer overview of which styles are applied \u2014 You won\u2019t have a style panel full of struck-out declarations from overwritten media query rules \u2014 <strong>The noise is gone!<\/strong> This \u2014 for me \u2014 is one of the biggest benefits of the Generic First CSS technique. It brings a little extra sanity to the CSS debugging experience, and this is worth its weight in gold. Thank me later.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1b90c5aa-5d8e-4d75-b005-1c3430521962\/console-css-inspector.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/console-css-inspector.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1b90c5aa-5d8e-4d75-b005-1c3430521962\/console-css-inspector.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1b90c5aa-5d8e-4d75-b005-1c3430521962\/console-css-inspector.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1b90c5aa-5d8e-4d75-b005-1c3430521962\/console-css-inspector.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1b90c5aa-5d8e-4d75-b005-1c3430521962\/console-css-inspector.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/console-css-inspector.png?w=900\" sizes=\"100vw\" alt=\"Before and after screenshot of how the generic first CSS approach affects chrome dev tools style panel.\"><\/a><figcaption><strong>Fig.4.<\/strong> How generic first, compartmentalized css can help bring joy and sanity to your dev console. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1b90c5aa-5d8e-4d75-b005-1c3430521962\/console-css-inspector.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<h3>Performance Implications<\/h3>\n<p>So all these Generic First CSS benefits are starting to sound pretty good, but I think there is one last key question that I think needs to be addressed. It\u2019s on the subject of performance optimization. Now I don\u2019t know for certain yet, but I have an inkling that fully compartmentalized media queries may have a slight performance benefit.<\/p>\n<p>Browsers perform a rendering task called <em>computed style calculation<\/em>. It\u2019s the browsers way of calculating which styles need to be applied to an element at any given moment. This task is always performed on initial page load, but it can also be performed if page content changes or if other browser actions take place. Any boost you can give to the speed of the process is going to be great for initial page load, and it could have a compound effect on the lifecycle of your websites pages.<\/p>\n<p>So going back to generic first CSS: Are there any performance issues related to the browser having to work out the CSS specificity of a multitude of cascading media queries?<\/p>\n<p>To answer that, I\u2019ve devised a test case that can be used to measure any speed benefits or indeed drawbacks.<\/p>\n<h4>The Test Case<\/h4>\n<p>The test case is comprised of a basic HTML page that outputs a \u201cbio\u201d block 5000 times, the markup is the same for each block, but the classes are slightly different (numeric differentiator), the CSS for this block is also outputted 5000 times, with class names being the only thing to differ. The outputted CSS is piped through a tool called <a href=\"https:\/\/github.com\/hail2u\/node-css-mqpacker\">CSS MQPacker<\/a>, this helps dramatically reduce file size of CSS that uses a lot of inline media queries by combining all the separate instances of a specific media query into one \u2014 It\u2019s a great tool that will probably benefit most modern CSS codebases \u2014 I\u2019ve used it as a standalone cli tool via a npm task in the test projects package.json, you can also use it as a postcss plugin, which is nice and convenient!<\/p>\n<p>The first test case is a mobile-first cascading media queries example, the second test case is a generic first compartmentalized variant of the CSS. The CSS for these cases is a little verbose and could probably be written in much more concise terms, but it really just serves as a rough example to test the argument.<\/p>\n<p>The test was run 20 times for each CSS variation in desktop Google Chrome v70, not a massive set of data, but enough to give me a rough idea of a performance gain\/loss.<\/p>\n<p>The test metrics I have chosen to use are:<\/p>\n<ul>\n<li><strong>Overall page load time<\/strong><br \/>A basic metric to check page load time using the Performance API markers in the the start of the <head> and very end of <body><\/li>\n<li><strong>The Recalculate Style<\/strong><br \/>Time from within the dev tools performance pane.<\/li>\n<li><strong>The Overall Page Rendering<\/strong><br \/>Time from within the dev tools performance pane.<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b0a1c456-6859-491b-92c2-e8829cb04070\/console-perf-inspector.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/console-perf-inspector.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b0a1c456-6859-491b-92c2-e8829cb04070\/console-perf-inspector.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b0a1c456-6859-491b-92c2-e8829cb04070\/console-perf-inspector.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b0a1c456-6859-491b-92c2-e8829cb04070\/console-perf-inspector.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b0a1c456-6859-491b-92c2-e8829cb04070\/console-perf-inspector.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/console-perf-inspector.png?w=900\" sizes=\"100vw\" alt=\"Table of results from the Google Chrome performance profiler\"><\/a><figcaption><strong>Fig.5.<\/strong> The key metric being measured is \u201cRecalculate Style\u201d. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b0a1c456-6859-491b-92c2-e8829cb04070\/console-perf-inspector.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p><strong>Results Table (all times in milliseconds)<\/strong><\/p>\n<\/p>\n<table>\n<thead>\n<tr>\n<th><\/th>\n<th>Mobile First<\/th>\n<th><\/th>\n<th><\/th>\n<th><\/th>\n<th>Generic First<\/th>\n<th><\/th>\n<th><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><\/td>\n<td>Load time<\/td>\n<td>Calculate styles<\/td>\n<td>Total render time<\/td>\n<td><\/td>\n<td>Load time<\/td>\n<td>Calculate styles<\/td>\n<td>Total render time<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1135<\/td>\n<td>565.7<\/td>\n<td>1953<\/td>\n<td><\/td>\n<td>1196<\/td>\n<td>536.9<\/td>\n<td>2012<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1176<\/td>\n<td>563.5<\/td>\n<td>1936<\/td>\n<td><\/td>\n<td>1116<\/td>\n<td>506.9<\/td>\n<td>1929<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1118<\/td>\n<td>563.1<\/td>\n<td>1863<\/td>\n<td><\/td>\n<td>1148<\/td>\n<td>514.4<\/td>\n<td>1853<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1174<\/td>\n<td>568.3<\/td>\n<td>1929<\/td>\n<td><\/td>\n<td>1124<\/td>\n<td>507.1<\/td>\n<td>1868<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1204<\/td>\n<td>577.2<\/td>\n<td>1924<\/td>\n<td><\/td>\n<td>1115<\/td>\n<td>518.4<\/td>\n<td>1854<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1155<\/td>\n<td>554.7<\/td>\n<td>1991<\/td>\n<td><\/td>\n<td>1177<\/td>\n<td>540.8<\/td>\n<td>1905<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1112<\/td>\n<td>554.5<\/td>\n<td>1912<\/td>\n<td><\/td>\n<td>1111<\/td>\n<td>504.3<\/td>\n<td>1886<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1110<\/td>\n<td>557.9<\/td>\n<td>1854<\/td>\n<td><\/td>\n<td>1104<\/td>\n<td>505.3<\/td>\n<td>1954<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1106<\/td>\n<td>544.5<\/td>\n<td>1895<\/td>\n<td><\/td>\n<td>1148<\/td>\n<td>525.4<\/td>\n<td>1881<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1162<\/td>\n<td>559.8<\/td>\n<td>1920<\/td>\n<td><\/td>\n<td>1095<\/td>\n<td>508.9<\/td>\n<td>1941<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1146<\/td>\n<td>545.9<\/td>\n<td>1897<\/td>\n<td><\/td>\n<td>1115<\/td>\n<td>504.4<\/td>\n<td>1968<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1168<\/td>\n<td>566.3<\/td>\n<td>1882<\/td>\n<td><\/td>\n<td>1112<\/td>\n<td>519.8<\/td>\n<td>1861<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1105<\/td>\n<td>542.7<\/td>\n<td>1978<\/td>\n<td><\/td>\n<td>1121<\/td>\n<td>515.7<\/td>\n<td>1905<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1123<\/td>\n<td>566.6<\/td>\n<td>1970<\/td>\n<td><\/td>\n<td>1090<\/td>\n<td>510.7<\/td>\n<td>1820<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1106<\/td>\n<td>514.5<\/td>\n<td>1956<\/td>\n<td><\/td>\n<td>1127<\/td>\n<td>515.2<\/td>\n<td>1986<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1135<\/td>\n<td>575.7<\/td>\n<td>1869<\/td>\n<td><\/td>\n<td>1130<\/td>\n<td>504.2<\/td>\n<td>1882<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1164<\/td>\n<td>545.6<\/td>\n<td>2450<\/td>\n<td><\/td>\n<td>1169<\/td>\n<td>525.6<\/td>\n<td>1934<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1144<\/td>\n<td>565<\/td>\n<td>1894<\/td>\n<td><\/td>\n<td>1092<\/td>\n<td>516<\/td>\n<td>1822<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1115<\/td>\n<td>554.5<\/td>\n<td>1955<\/td>\n<td><\/td>\n<td>1091<\/td>\n<td>508.9<\/td>\n<td>1986<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>1133<\/td>\n<td>554.8<\/td>\n<td>2572<\/td>\n<td><\/td>\n<td>1001<\/td>\n<td>504.5<\/td>\n<td>1812<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><\/td>\n<td><\/td>\n<td><\/td>\n<td><\/td>\n<td><\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><strong>AVG<\/strong><\/td>\n<td><strong>1139.55<\/strong><\/td>\n<td><strong>557.04<\/strong><\/td>\n<td><strong>1980<\/strong><\/td>\n<td><\/td>\n<td><strong>1119.1<\/strong><\/td>\n<td><strong>514.67<\/strong><\/td>\n<td><strong>1903.15<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<thead>\n<tr>\n<th><strong>Mobile First<\/strong><\/th>\n<th><\/th>\n<th><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Load time<\/td>\n<td>Calculate styles<\/td>\n<td>Total render time<\/td>\n<\/tr>\n<tr>\n<td>1135<\/td>\n<td>565.7<\/td>\n<td>1953<\/td>\n<\/tr>\n<p><\/p>\n<tr>\n<td>1118<\/td>\n<td>563.1<\/td>\n<td>1863<\/td>\n<\/tr>\n<tr>\n<td>1174<\/td>\n<td>568.3<\/td>\n<td>1929<\/td>\n<\/tr>\n<p><\/p>\n<tr>\n<td>1112<\/td>\n<td>554.5<\/td>\n<td>1912<\/td>\n<\/tr>\n<p><\/p>\n<tr>\n<td>1105<\/td>\n<td>542.7<\/td>\n<td>1978<\/td>\n<\/tr>\n<p><\/p>\n<tr>\n<td>1106<\/td>\n<td>514.5<\/td>\n<td>1956<\/td>\n<\/tr>\n<p><\/p>\n<tr>\n<td>1164<\/td>\n<td>545.6<\/td>\n<td>2450<\/td>\n<\/tr>\n<p><\/p>\n<tr>\n<td>1115<\/td>\n<td>554.5<\/td>\n<td>1955<\/td>\n<\/tr>\n<p><\/tbody>\n<\/table>\n<table>\n<thead>\n<tr>\n<th><strong>Generic First<\/strong><\/th>\n<th><\/th>\n<th><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Load time<\/td>\n<td>Calculate styles<\/td>\n<td>Total render time<\/td>\n<\/tr>\n<tr>\n<td>1196<\/td>\n<td>536.9<\/td>\n<td>2012<\/td>\n<\/tr>\n<tr>\n<td>1148<\/td>\n<td>514.4<\/td>\n<td>1853<\/td>\n<\/tr>\n<tr>\n<td>1124<\/td>\n<td>507.1<\/td>\n<td>1868<\/td>\n<\/tr>\n<tr>\n<td>1111<\/td>\n<td>504.3<\/td>\n<td>1886<\/td>\n<\/tr>\n<tr>\n<td>1121<\/td>\n<td>515.7<\/td>\n<td>1905<\/td>\n<\/tr>\n<tr>\n<td>1127<\/td>\n<td>515.2<\/td>\n<td>1986<\/td>\n<\/tr>\n<tr>\n<td>1169<\/td>\n<td>525.6<\/td>\n<td>1934<\/td>\n<\/tr>\n<tr>\n<td>1091<\/td>\n<td>508.9<\/td>\n<td>1986<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Fig.6.<\/strong> <em>20 test runs measuring key load\/render metrics of mobile first vs generic first CSS.<\/em><\/p>\n<p>From my admittedly small dataset, it does seem like my initial suspicion may be correct. On average, I see the Style Recalculation task take 42ms less time which is a 7.6% speed increase, and therefore the overall rendering time also decreases. The difference isn\u2019t mind-blowing, but it is an improvement. I don\u2019t think the dataset is big enough to be 100% conclusive and the test case is a little unrealistic, but I\u2019m very glad not to be seeing a performance degradation.<\/p>\n<p>I would be very interested to see the generic first methodology applied to a real-world existing codebase that has been written in the mobile-first way \u2014 the before after metrics would be much more realistic to everyday practice.<\/p>\n<p>And if anyone has suggestions on how to automate this test over a broader set of iterations, please let me know in the comments! I\u2019d imagine there must be a tool that can do this.<\/p>\n<h3>Conclusion<\/h3>\n<p>To recap on the benefits of this new development methodology…<\/p>\n<ul>\n<li>CSS that does exactly as intended, no second guessing;<\/li>\n<li>Self-documenting media-queries;<\/li>\n<li>A better dev tools experience;<\/li>\n<li>Pages that render faster.<\/li>\n<\/ul>\n<p>I\u2019d like to think I\u2019m not the only person espousing the writing of CSS in this style. If you have already adopted the generic first mindset, hurray! But if not, I think you\u2019ll really like the benefits it brings. I\u2019ve personally benefited greatly from the uncluttered dev tools experience, which in itself will be a huge positive to a lot of devs. the self-documenting nature of this way of writing your media-queries will also have benefits to yourself and the wider team (if you have one). And finally, these benefits won\u2019t cost you anything in performance terms, and in fact have been shown to have marginal speed gains!<\/p>\n<h5>Final Word<\/h5>\n<p>Like all development methodologies, it may not be for everyone, but I\u2019ve fallen into Generic First CSS quite naturally, I now see it as a valuable way of working that gives me all the benefits of mobile first with some positive new additions that make the tough job of front-end development that little be easier.<\/p>\n<h3>Resources<\/h3>\n<h5>Test Case Repo<\/h5>\n<p>If you\u2019d like to fire up the test case and give it a go yourself, you can <a href=\"https:\/\/github.com\/stikoo\/generic-first-css-perf\">find it on GitHub<\/a>, I\u2019d love to see some reports from others.<\/p>\n<h5>Tools<\/h5>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/css-mqpacker\">CSS MQPacker<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/eduardoboucas\/include-media\">Include Media<\/a><\/li>\n<\/ul>\n<div>\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/logo-red-15.png?w=900\" alt=\"Smashing Editorial\"><span>(dm, ra, yk, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Generic First CSS: New Thinking On Mobile First Generic First CSS: New Thinking On Mobile First Alastair Hodgson 2018-12-21T14:45:16+01:002018-12-21T16:34:19+00:00 I think it\u2019s safe to say that Ethan Marcotte\u2019s Responsive Web Design was a welcome revelation for web developers the world over. It triggered a whole new wave of design thinking and wonderful new front-end techniques….<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/\"> Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":57646,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-57645","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Generic First CSS: New Thinking On Mobile FirstGeneric First CSS: New Thinking On Mobile First Alastair Hodgson 2018-12-21T14:45:16+01:002018-12-21T16:34:19+00:00I think it\u2019s safe to say that Ethan Marcotte\u2019s Responsive Web Design was a welcome revelation for web developers the world over. It triggered a whole new wave of design thinking and wonderful new front-end techniques. The reign\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Generic First CSS: New Thinking On Mobile First | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Generic First CSS: New Thinking On Mobile FirstGeneric First CSS: New Thinking On Mobile First Alastair Hodgson 2018-12-21T14:45:16+01:002018-12-21T16:34:19+00:00I think it\u2019s safe to say that Ethan Marcotte\u2019s Responsive Web Design was a welcome revelation for web developers the world over. It triggered a whole new wave of design thinking and wonderful new front-end techniques. The reign\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2018-12-22T11:18:53+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2018-12-22T11:18:53+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Generic First CSS: New Thinking On Mobile First | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Generic First CSS: New Thinking On Mobile FirstGeneric First CSS: New Thinking On Mobile First Alastair Hodgson 2018-12-21T14:45:16+01:002018-12-21T16:34:19+00:00I think it\u2019s safe to say that Ethan Marcotte\u2019s Responsive Web Design was a welcome revelation for web developers the world over. It triggered a whole new wave of design thinking and wonderful new front-end techniques. The reign\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/generic-first-css-new-thinking-on-mobile-first\\\/#article\",\"name\":\"Generic First CSS: New Thinking On Mobile First | Design for Immersive Technologies\",\"headline\":\"Generic First CSS: New Thinking On Mobile First\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/console-css-inspector.png?fit=400%2C210&ssl=1\",\"width\":400,\"height\":210},\"datePublished\":\"2018-12-22T04:18:53-07:00\",\"dateModified\":\"2018-12-22T04:18:53-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/generic-first-css-new-thinking-on-mobile-first\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/generic-first-css-new-thinking-on-mobile-first\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/generic-first-css-new-thinking-on-mobile-first\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/generic-first-css-new-thinking-on-mobile-first\\\/#listItem\",\"name\":\"Generic First CSS: New Thinking On Mobile First\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/generic-first-css-new-thinking-on-mobile-first\\\/#listItem\",\"position\":3,\"name\":\"Generic First CSS: New Thinking On Mobile First\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/generic-first-css-new-thinking-on-mobile-first\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/generic-first-css-new-thinking-on-mobile-first\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/generic-first-css-new-thinking-on-mobile-first\\\/\",\"name\":\"Generic First CSS: New Thinking On Mobile First | Design for Immersive Technologies\",\"description\":\"Generic First CSS: New Thinking On Mobile FirstGeneric First CSS: New Thinking On Mobile First Alastair Hodgson 2018-12-21T14:45:16+01:002018-12-21T16:34:19+00:00I think it\\u2019s safe to say that Ethan Marcotte\\u2019s Responsive Web Design was a welcome revelation for web developers the world over. It triggered a whole new wave of design thinking and wonderful new front-end techniques. The reign\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/generic-first-css-new-thinking-on-mobile-first\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/console-css-inspector.png?fit=400%2C210&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/generic-first-css-new-thinking-on-mobile-first\\\/#mainImage\",\"width\":400,\"height\":210},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/generic-first-css-new-thinking-on-mobile-first\\\/#mainImage\"},\"datePublished\":\"2018-12-22T04:18:53-07:00\",\"dateModified\":\"2018-12-22T04:18:53-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Generic First CSS: New Thinking On Mobile First | Design for Immersive Technologies","description":"Generic First CSS: New Thinking On Mobile FirstGeneric First CSS: New Thinking On Mobile First Alastair Hodgson 2018-12-21T14:45:16+01:002018-12-21T16:34:19+00:00I think it\u2019s safe to say that Ethan Marcotte\u2019s Responsive Web Design was a welcome revelation for web developers the world over. It triggered a whole new wave of design thinking and wonderful new front-end techniques. The reign","canonical_url":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/#article","name":"Generic First CSS: New Thinking On Mobile First | Design for Immersive Technologies","headline":"Generic First CSS: New Thinking On Mobile First","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/console-css-inspector.png?fit=400%2C210&ssl=1","width":400,"height":210},"datePublished":"2018-12-22T04:18:53-07:00","dateModified":"2018-12-22T04:18:53-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/#listItem","name":"Generic First CSS: New Thinking On Mobile First"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/#listItem","position":3,"name":"Generic First CSS: New Thinking On Mobile First","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/","name":"Generic First CSS: New Thinking On Mobile First | Design for Immersive Technologies","description":"Generic First CSS: New Thinking On Mobile FirstGeneric First CSS: New Thinking On Mobile First Alastair Hodgson 2018-12-21T14:45:16+01:002018-12-21T16:34:19+00:00I think it\u2019s safe to say that Ethan Marcotte\u2019s Responsive Web Design was a welcome revelation for web developers the world over. It triggered a whole new wave of design thinking and wonderful new front-end techniques. The reign","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/console-css-inspector.png?fit=400%2C210&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/#mainImage","width":400,"height":210},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/#mainImage"},"datePublished":"2018-12-22T04:18:53-07:00","dateModified":"2018-12-22T04:18:53-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Generic First CSS: New Thinking On Mobile First | Design for Immersive Technologies","og:description":"Generic First CSS: New Thinking On Mobile FirstGeneric First CSS: New Thinking On Mobile First Alastair Hodgson 2018-12-21T14:45:16+01:002018-12-21T16:34:19+00:00I think it\u2019s safe to say that Ethan Marcotte\u2019s Responsive Web Design was a welcome revelation for web developers the world over. It triggered a whole new wave of design thinking and wonderful new front-end techniques. The reign","og:url":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/","article:published_time":"2018-12-22T11:18:53+00:00","article:modified_time":"2018-12-22T11:18:53+00:00","twitter:card":"summary","twitter:title":"Generic First CSS: New Thinking On Mobile First | Design for Immersive Technologies","twitter:description":"Generic First CSS: New Thinking On Mobile FirstGeneric First CSS: New Thinking On Mobile First Alastair Hodgson 2018-12-21T14:45:16+01:002018-12-21T16:34:19+00:00I think it\u2019s safe to say that Ethan Marcotte\u2019s Responsive Web Design was a welcome revelation for web developers the world over. It triggered a whole new wave of design thinking and wonderful new front-end techniques. The reign"},"aioseo_meta_data":{"post_id":"57645","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 22:43:37","updated":"2026-08-22 09:39:17","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tGeneric First CSS: New Thinking On Mobile First\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Generic First CSS: New Thinking On Mobile First","link":"https:\/\/www.taterboy.com\/blog\/2018\/12\/generic-first-css-new-thinking-on-mobile-first\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-eZL","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/console-css-inspector.png?fit=400%2C210&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/57645","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=57645"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/57645\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/57646"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=57645"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=57645"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=57645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}