{"id":283641,"date":"2019-03-05T08:36:06","date_gmt":"2019-03-05T15:36:06","guid":{"rendered":"http:\/\/css-tricks.com\/?p=283641"},"modified":"2019-03-05T08:36:06","modified_gmt":"2019-03-05T15:36:06","slug":"why-i-write-css-in-javascript","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/why-i-write-css-in-javascript\/","title":{"rendered":"Why I Write CSS in JavaScript"},"content":{"rendered":"<p>I&#8217;m never going to tell you that writing your CSS in CSS (or some syntactic preprocessor) is a bad idea. I think you can be perfectly productive and performant without any tooling at all. But, I also think writing CSS in JavaScript is a good idea <strong>for component-based styles in codebases that build all their components with JavaScript anyway.<\/strong> <\/p>\n<p>In this article, Max Stoiber focuses on <em>why<\/em> to write CSS in JavaScript rather than <em>how<\/em> to do it. There is one reason that resonates strongly with me, and that&#8217;s <strong>confidence<\/strong>. This is what styling confidence means to me. <\/p>\n<li>Anyone on a team can work on styling a component without any fear of unintended side effects.<\/li>\n<li>There is no pressure to come up with perfect names that will work now and forever.<\/li>\n<li>There is no worry about the styles needing to be extremely re-usable or that they play friendly with anything else. These styles will only be used when needed and not any other time.<\/li>\n<li>There is an obvious standard to <em>where<\/em> styles are placed in the codebase.<\/li>\n<p>CSS in JavaScript isn&#8217;t the only answer to those things, but as Max connects to other posts on the topic, it can lead to situations where good choices happen naturally. <\/p>\n<p><!--more--><\/p>\n<p>There are some reasons <em>why<\/em> I don&#8217;t buy into it. Performance is one of them, like choosing CSS-in-JS is some automatic performance win. Part of the problem (and I&#8217;m guilty of doing it right here) is that CSS-in-JS is a wide scope of solutions. I&#8217;ve <em>generally<\/em> found there is no big performance wins in CSS-in-JS (more likely the opposite), but that&#8217;s irrelevant if we&#8217;re talking about something like CSS modules with the styles extracted and linked up like any other CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m never going to tell you that writing your CSS in CSS (or some syntactic preprocessor) is a bad idea. I think you can be perfectly productive and performant without any tooling at all. But, I also think writing CSS in JavaScript is a good idea for component-based styles in codebases that build all their [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":275514,"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":true,"jetpack_social_options":[]},"categories":[17],"tags":[1535],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/css-vs-js.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283641"}],"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=283641"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283641\/revisions"}],"predecessor-version":[{"id":283761,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283641\/revisions\/283761"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/275514"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=283641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=283641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=283641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}