{"id":204067,"date":"2015-06-26T08:23:47","date_gmt":"2015-06-26T15:23:47","guid":{"rendered":"http:\/\/css-tricks.com\/?p=204067"},"modified":"2021-08-03T13:00:19","modified_gmt":"2021-08-03T20:00:19","slug":"the-debate-around-do-we-even-need-css-anymore","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-debate-around-do-we-even-need-css-anymore\/","title":{"rendered":"The Debate Around &#8220;Do We Even Need CSS Anymore?&#8221;"},"content":{"rendered":"<p>This has become quite the hot topic lately. It&#8217;s been talked about at a number of conferences and meetups I&#8217;ve been at personally lately. I&#8217;ve seen slide decks on it. I know people literally not shipping any CSS in production. Pretty wild, eh?<\/p>\n<p>I thought we could have a little campfire here and talk about it as rationally as we can, covering all the relevant points.<\/p>\n<p><!--more--><\/p>\n<h3>We obviously still need to style things<\/h3>\n<p>Nobody is saying we don&#8217;t need styles. We still need to style things, what&#8217;s being talked about is how and where we do that. I was just on a panel at <a href=\"http:\/\/brooklynjs.com\/\" rel=\"noopener\">BrooklynJS<\/a> and <a href=\"https:\/\/twitter.com\/jedschmidt\" rel=\"noopener\">Jed Schmidt<\/a> said:<\/p>\n<blockquote><p>The worst things about CSS are the &#8220;Cascading&#8221; and the &#8220;Sheets&#8221;<\/p><\/blockquote>\n<h3>What does anyone have against CSS?<\/h3>\n<p>These are the main arguments against CSS:<\/p>\n<ul>\n<li><strong>Everything is global.<\/strong> Selectors are matched against everything in the DOM. You need <em>naming strategies<\/em> to combat against this and keep things efficient (which are hard to enforce and easy to break).<\/li>\n<li><strong>CSS grows over time.<\/strong> Smart people on great teams cede to the fact that they are afraid of their own CSS. You can&#8217;t just delete things as it&#8217;s so hard to know if it&#8217;s absolutely safe to do that. So, they don&#8217;t, they only add. I&#8217;ve seen a graph charting the size of production CSS over five years show that size grow steadily, despite the company&#8217;s focus on performance.<\/li>\n<li><strong>You can be more dynamic with styles in a programming language.<\/strong> The argument goes something like &#8220;we&#8217;re already juicing up CSS with preprocessors anyway, might as well kick it up a notch.&#8221; You could for instance (if you <em>really<\/em> wanted to make this controversial) base styles off a User-Agent string or a module&#8217;s current width.<\/li>\n<\/ul>\n<h3>What is the alternative to CSS then?<\/h3>\n<p>The alternative is inline styles. So instead of:<\/p>\n<pre><code><\/code><\/pre>\n<div class=\"module\"><code><\/code><\/div>\n<p>We&#8217;re talking:<\/p>\n<pre><code><\/code><\/pre>\n<div style=\"padding: 20px; background: #eee; margin: 0 0 20px 0;\"><code><\/code><\/div>\n<p>I haven&#8217;t heard anyone yet argue you should apply these styles directly to HTML you author. The idea is you apply styles to elements through JavaScript.<\/p>\n<h3>React is driving a lot of these thoughts<\/h3>\n<p><a href=\"http:\/\/facebook.github.io\/react\/\" rel=\"noopener\">React<\/a> is a JavaScript library that helps with <em>view<\/em> concerns in websites. It&#8217;s developed mainly by Facebook, extremely popular, and gaining momentum. It&#8217;s had it&#8217;s <a href=\"http:\/\/conf.reactjs.com\/\" rel=\"noopener\">own conference<\/a> and is even growing into a framework for <a href=\"https:\/\/facebook.github.io\/react-native\/\" rel=\"noopener\">building native apps<\/a>.<\/p>\n<p>One of it&#8217;s core concepts is the &#8220;Virtual DOM&#8221;. You build the HTML you intend to use right in the JavaScript. Seemingly quite weird at first, but this coupling between HTML and JavaScript is always there and it appeals to people to just write it together from the get-go. I quoted Keith J Grant recently, and I <a href=\"http:\/\/keithjgrant.com\/posts\/against-css-in-js.html\" rel=\"noopener\">will again<\/a>:<\/p>\n<blockquote><p>This coupling is real, and it is unavoidable. We must bind event listeners to elements on the page. We must update elements on the page from our JavaScript. Our code must interact bidirectionally and in real-time with the elements of the DOM.<\/p>\n<p>&#8230; the mantra of React is to stop pretending the DOM and the JavaScript that controls it are separate concerns.<\/p><\/blockquote>\n<p>React has the ability to manage inline styles built right in. They call them what they are: <a href=\"https:\/\/facebook.github.io\/react\/tips\/inline-styles.html\" rel=\"noopener\">inline styles<\/a>. Here&#8217;s a basic example:<\/p>\n<p class=\"codepen\" data-height=\"500\" style=\"height: 500px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"PqOpEX\" data-default-tab=\"js\" data-user=\"chriscoyier\">See the Pen <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/PqOpEX\/\" rel=\"noopener\">Inline Styles with React<\/a> by Chris Coyier (<a href=\"http:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>The virtual DOM thing that React does is also important because of its speed. DOM manipulation stuff is generally regarded as slow in JavaScript, and thus managing styles through DOM manipulation would also be slow. But React has the magic dust that makes manipulation fast, so people don&#8217;t worry about the slowness issues when working with React.<\/p>\n<p><a href=\"http:\/\/codepen.io\/chrisnager\/pen\/MwOjqe?editors=001\" rel=\"noopener\">Here&#8217;s another example<\/a> by Chris Nager.<\/p>\n<h3>The style authoring is still abstracted<\/h3>\n<p>CSS is the abstraction of style away from anything else. Literally files you open and work on to manage styles. You likely aren&#8217;t giving that up when moving to a JavaScript-based inline-style setup. You&#8217;d just have, probably, <code>style.js<\/code> instead of <code>style.css<\/code>. You&#8217;d still be writing key\/value pairs and smooshing files together in a build process.<\/p>\n<p>It will be different, but the authoring abstraction is still there.<\/p>\n<h3>What do you get out of inlining styles?<\/h3>\n<h4>Cascade-less<\/h4>\n<p>The scary &#8220;global&#8221; nature of CSS is neutered. The cascade, tapered. I don&#8217;t think you could say the cascade is entirely gone, because some styles are inherited so styles can still be passed down to child elements and that&#8217;s one definition of cascade. But the module-ish nature of this style of development likely leads to less overlapping style concerns. A module over here is styled like this, a module over there is styled like that &#8211; probably no conflicts in sight.<\/p>\n<h4>All JavaScript<\/h4>\n<p>One sense I get is that some people just like and prefer working in all JavaScript. You could certainly attribute some of the success of Node.js to that fact.<\/p>\n<h4>Dynamic Styles<\/h4>\n<p>&#8220;State&#8221; is largely a JavaScript concern. If you want\/need style to change based on dynamic conditions (states) on your site, it may make sense to handle the styling related to the state change along with everything else.<\/p>\n<p>In <a href=\"https:\/\/www.youtube.com\/watch?v=NoaxsCi13yQ\" rel=\"noopener\">a recent talk at CSS Conf<\/a> (<a href=\"https:\/\/docs.google.com\/presentation\/d\/1pL8e2OC8iDUWCvGkixYB18bRXjiVRmSgwiWoxiQN3vQ\/edit#slide=id.ga1b311e93_1_22\" rel=\"noopener\">slides<\/a>), <a href=\"https:\/\/twitter.com\/colinmegill\" rel=\"noopener\">Colin Megill<\/a> used the example of the Twitter new tweet input textarea as a dynamic place that changes the state of other elements.<\/p>\n<figure id=\"post-204207\" class=\"align-right media-204207\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/06\/state-changes.gif\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<h3>Who&#8217;s actually doing this?<\/h3>\n<p>I heard Colin Megill say they are shipping literally zero CSS on &#8220;big stuff&#8221; and not seeing performance problems. I&#8217;ll update this with URL&#8217;s if I get them. I hear one big project will be live within a month.<\/p>\n<p>I know Jed Schmidt works on <a href=\"https:\/\/m.uniqlo.com\/us\/\" rel=\"noopener\">the mobile version of UNIQLO<\/a>, and you can see the inline styles at work there:<\/p>\n<figure id=\"post-204210\" class=\"align-right media-204210\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/06\/inline-styles-on-uniqlo.jpg\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p><strong>Update from Jed:<\/strong> This version of the site is all Sass and the inline styles you see there are from JavaScript animations.<\/p>\n<p><a href=\"http:\/\/blog.vjeux.com\/\" rel=\"noopener\">Christopher Chedeau<\/a> <a href=\"https:\/\/speakerdeck.com\/vjeux\/react-css-in-js\" rel=\"noopener\">has been talking about this<\/a> and is literally a Facebook engineer, so maybe Facebook a little?<\/p>\n<h3>Can this concept be combined with, you know, CSS?<\/h3>\n<p>Even if you bought into the concept of inline styles, can it live in harmony with some (do I have to say it) <em>regular<\/em> CSS? Is page layout appropriate as inline styles? Doesn&#8217;t base typography still make sense to do globally? I&#8217;m not sure if we&#8217;re far along enough in this world to see a best practice emerge.<\/p>\n<p>In the m.uniqlo.com example above, they are shipping a 57k CSS file as well, and you can see evidence of state-based class in the DOM as well (e.g. &#8220;is-open&#8221;).<\/p>\n<h3>A lot of people really don&#8217;t like this<\/h3>\n<p>Surprise! There are more arguments against this kind of thing than for it. As I was collecting opinions about this, I told Lea Verou &#8220;Some people really like this idea!&#8221; to which she told me:<\/p>\n<blockquote><p>You can find people in the world who like eating excrement it doesn&#8217;t mean it&#8217;s a good idea.<\/p><\/blockquote>\n<p>Let&#8217;s run through other arguments:<\/p>\n<h4>Styling is what CSS is for<\/h4>\n<p>This is the &#8220;religious&#8221; angle that probably isn&#8217;t going to take us very far.<\/p>\n<h4>The separation of concerns is inherent to CSS<\/h4>\n<p>Separation of concerns is a very useful concept when building things as complex as websites are. You get seperation of concerns automatically when writing CSS: it&#8217;s a file just for styling.<\/p>\n<h4>Inline styles are at the top of the specificity spectrum<\/h4>\n<p>Keeping specificity low in CSS means that when you do need to rely on specificity to win a styling war, you have it available as a tool. When you&#8217;re already at the top, you don&#8217;t have that wiggle room luxury.<\/p>\n<p>The <code>!important<\/code> declaration can still win a specific property\/value styling war over an inline style, but that&#8217;s a slightly different concept and an even grosser war to fight.<\/p>\n<h4>Some simple states are much easier in CSS<\/h4>\n<p>How do you do :hover\/:focus\/:active in inline styles? You don&#8217;t. You fake it. And what about media queries?<\/p>\n<h4>Adding\/removing classes is a perfect tool for state changes already<\/h4>\n<p>JavaScript is really good at adding\/removing\/changing classes on elements. And classes are a perfect way to handle state in CSS.<\/p>\n<pre><code class=\"language-css\">.is-open {\n  display: block;\n}<\/code><\/pre>\n<p>Plus you can change state on parent elements (by changing a class) to affect the state of lots of elements within:<\/p>\n<pre><code class=\"language-scss\">.tweet-too-long {\n  .tweet-button {\n    opacity: 0.5;\n  }\n  .warning-message {\n    display: inline-block;\n  }\n}<\/code><\/pre>\n<h4>Browsers aren&#8217;t made to deal with styling in this way<\/h4>\n<p>For instance, inline styles are literally data kept in an attribute right on the DOM element. DOM weight is a thing (it can cause browsers to be slow or crash). That styling information isn&#8217;t only just kept in the style attribute though, it&#8217;s also represented in the DOM in the element&#8217;s style properties. Is that the same thing, or is this kinda double-weighted styling?<\/p>\n<p>Are there speed differences between&#8230;<\/p>\n<pre><code class=\"language-javascript\">var thing = document.getElementById(\"thing\");\nthing.style.width = \"100px\";\nthing.style.height = \"100px\";\nthing.style.backgroundColor = \"red\";\n\nvar thing2 = document.getElementById(\"thing-2\");\nthing2.setAttribute(\"style\", \"width: 100px; height: 100px; background-color: red;\");<\/code><\/pre>\n<p>Has that been figured out to discover what&#8217;s best cross-browser? If this stuff takes off, will browsers need to evolve to handle things in a different way?<\/p>\n<p>The browser has this whole concept of the CSSOM. Can we use that somehow more intelligently through JavaScript rather than inline styles?<\/p>\n<h4>CSS is successful because of it&#8217;s simplicity<\/h4>\n<p>CSS is a fairly easy to jump into. A lot of people know it. You can hire for it. It&#8217;s portable.<\/p>\n<h4>Some of these &#8220;dynamic&#8221; styling concerns can be solved with regular CSS<\/h4>\n<ul>\n<li>There are demos that include measuring widths and subtracting fixed values from them. CSS can do that with <code>calc()<\/code>.<\/li>\n<li>There are demos that include setting <code>font-size<\/code> or <code>line-height<\/code> that depends on the browser width or height. CSS can do that with viewport units. Using JavaScript for this kind of thing is overtooling.<\/li>\n<li>There are demos that dynamically change colors on many different elements. CSS will be able to do that with native variables.<\/li>\n<\/ul>\n<h4>We tried this in 1996 and it was a bad idea then<\/h4>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/JavaScript_Style_Sheets\" rel=\"noopener\">Get off my lawn.<\/a><\/p>\n<h4>CSS is cacheable<\/h4>\n<p>The network is still the bottleneck. CSS files can be cached so the network doesn&#8217;t even come into play and that is smoking fast.<\/p>\n<h4>You can still use React<\/h4>\n<p>React is pretty awesome. Here&#8217;s an article by <a href=\"http:\/\/kittygiraudel.com\/2015\/06\/18\/styling-react-components-in-sass\/\" rel=\"noopener\">David Khourshid on Styling React Components in Sass<\/a>. Mark Dalgleish <a href=\"https:\/\/medium.com\/seek-ui-engineering\/the-end-of-global-css-90d2a4a06284\" rel=\"noopener\">doesn&#8217;t like the global nature of CSS<\/a>, and has working concepts to localize selectors. Glen Maddern expounds upon this in <a href=\"http:\/\/glenmaddern.com\/articles\/interoperable-css\" rel=\"noopener\">Interoperable CSS<\/a>.<\/p>\n<h4>Doesn&#8217;t anyone care about progressive enhancement anymore?<\/h4>\n<p>This is a wider conversation is perhaps out-of-scope here. Because sites (including React based sites using inline styles) can be rendered entirely server-side, it means they can be done with progressive enhancement in mind. Although &#8220;can be&#8221; and &#8220;what it actually encourages&#8221; are different things.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This has become quite the hot topic lately. It&#8217;s been talked about at a number of conferences and meetups I&#8217;ve been at personally lately. I&#8217;ve seen slide decks on it. I know people literally not shipping any CSS in production. Pretty wild, eh? I thought we could have a little campfire here and talk about [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/204067"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=204067"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/204067\/revisions"}],"predecessor-version":[{"id":345990,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/204067\/revisions\/345990"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=204067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=204067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=204067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}