path---tags-css-in-js-733b0b6ae26b107cf272.js

webpackJsonp([0xa78ed9a99209],{509:function(e,a){e.exports={pathContext:{tags:["tech stack","colophon","about","intro","gatsby","react","javascript","css","css in js","component styling","styled-components","glamorous","graphql","node"],tag:[{excerpt:"I’m a frontend developer specializing in all things JavaScript. Throughout my career, I’ve done a fair bit of everything: Angular, React, jQuery, you name it. Of course, I’ve also done a fair bit of everything in CSS land, whether it’s vanilla CSS…",html:'<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACWUlEQVQozy2SW0/bQBSENzR4795dr+04GMKtQLiUAOHStM+lUqVKtLQg1IdKfev//wHTSejDkSXv7ndmzhkhtYY0DoWJkLaC8gnKeihtEWNCXTfI+bXapkHfdWhzRsNq6xpd02LEWp6nqoYotEGhDJxtEcoJfMgoqhFrG3t7e7i9ucVi8YHfO1xcXOH4+AyeTWOoUCdCM6EEN/zGmCGksQQqWB95qUfwI9hokZuAcRfRjutV9xgSjI0YFB4DSTemooCEJlXoKoJZgXeEtLQrCbQBKfXwroVxhiqGLAXpA4Y6UXmNoSoxWHe0RSV6BFfSZohoOJqW4GVTYXy5UuhMQrA9mqbG9fsFLue3eDeb4+hsjt3Ta3w8eIsvhzv4erSLu+19rPst6LCJks5S+QrNMULYECDVcjEew8JgvNHhx+Mjnp5f8PDzBd+efuH+4Rmfzs/wdz7Fn8spfl+c4Pv5DC5t002G5dtIJ5ksYUmWWvGgRRm2aMNxuI7/LOdRYsjNC1qtU4PDjR3Oqse028Rssg8XJzwfYV16GO2R6FY4el8CrQ7s0nMmmdItKkYkb+6jIiS0PVw/hdy6gtq85KMeYshGpsfAjrHGJSnpUDoP4ZknZcwqd1rzQFmWhi5rtJMD5H4XaTxBtTNDdXqP6uQzinzExSyVd1zOBgaq5hsCuWBRMkOaQGlLvCl7GIJSKlfhHrDB2n/LwrQQLdV1C4hAoGoIZZDVmNCOggJKRpBAKrR2pdBTvmfWAuOiOGhJeBFHWHOEWgLyCYE3EJFAM+KM86tKM+ZSmUMC/wEx2A8SS5T2WwAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="0"\n        title=""\n        src="/interpreter/static/01-0-b1fbc18c3ebdc59d31748d1555f3e50a-83a8b.png"\n        srcset="/interpreter/static/01-0-b1fbc18c3ebdc59d31748d1555f3e50a-8992e.png 163w,\n/interpreter/static/01-0-b1fbc18c3ebdc59d31748d1555f3e50a-ae0a7.png 325w,\n/interpreter/static/01-0-b1fbc18c3ebdc59d31748d1555f3e50a-83a8b.png 650w,\n/interpreter/static/01-0-b1fbc18c3ebdc59d31748d1555f3e50a-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>I’m a frontend developer specializing in all things JavaScript. Throughout my career, I’ve done a fair bit of everything: Angular, React, jQuery, you name it. Of course, I’ve also done a fair bit of everything in CSS land, whether it’s vanilla CSS, LESS, SASS, CSS Modules, and (of course) the gamut of CSS in JS solutions. I’m from little ol’ Omaha, Nebraska, which I think most people looks a bit like this.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAC10lEQVQozx2SS1PaZxTG+RidTjftGDXJWIncEYRIqjReooL+RQEBuUflKrcoFFBEgkYkEmsX7aKddrpqp+2qM1101U0/06+n/8Uz572d5zznOa/m6v4beqMHbj48cDu6ZyD794L+7dd0rkbUu0NOOkN1fXF1p8ZWb8h5b0C3P6B1cU29/ZbG+TXt7gBN/aLP2bshbbm8vP1AvdPltNOnenZN/rTLQalBOnfMXixJ7DBPvtagcTmg07+lKWS1Vp9y/ZJ89ZxksY1mw21kd8PO5rKJVHiFVGyDYjbCWbNCJh0gHfWRO/CTjKzxhWMc/bNxXHNzeNbd+LbtKIoNj9fM8rKWhcUnaDJbBjKbBgrbZtKvpvhx1OLfv//gr1+/5Z8/f+b3H97x2/c3/HRXwzM/hXNGSy/qIfRynpeOCRLex+yvTxKXmFaeoikGZjkWlIP/Rwtfpd3cX6QZnSd5W/Hxvh3jTnCamMdl1rLmsPBL8zXdbBS3bYZ6ZJY3YSvVoImy34CmsGvl2C/YMVAJWiQaacRd3LUSfHdT4aGXoXmwTG1/Dp/bilM7w1VcIbG2irJo5CRskTwzJb+RWngWTSnooLrvIrepI6cYKAXtFHfMNJJLDJspbuoxCvKmFHFS9Aupw4zXYiLw3Exh10J+65lAx5FnmsqeVTwU/zJeHVnFSGpliqwQh12PyG1bOPDIuU8S/TZKew5y0k1eipXDTjW56NNT3ptV16Vdo6pUE10cZ3/hEaH5MbJbRgqKntTq56ra3JZehmXgJP5C7nTk1Q6s4rdV2rPJMLWUAyZqkTkKYlU1ZEcTdn2qKou8GCO9NEnE9RmH61riX06QF7Jjn4FTISz5RamiFeIZjjamqQYMvAmZyaw9lq5kLwUK23o0keefkFgcoxxyypRtBG0fE1sYQzF+RGppQopMqCpzik48k++1Y1JJ61G7EBo4Wpnk8NUTXq8+Jeud5j9ogdbRveZ32wAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="about me"\n        title=""\n        src="/interpreter/static/02-about-me-ca17484b9a37dfb8926469b2fa32f0ce-83a8b.png"\n        srcset="/interpreter/static/02-about-me-ca17484b9a37dfb8926469b2fa32f0ce-8992e.png 163w,\n/interpreter/static/02-about-me-ca17484b9a37dfb8926469b2fa32f0ce-ae0a7.png 325w,\n/interpreter/static/02-about-me-ca17484b9a37dfb8926469b2fa32f0ce-83a8b.png 650w,\n/interpreter/static/02-about-me-ca17484b9a37dfb8926469b2fa32f0ce-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAC7UlEQVQozx2Q2VpaBxRGeYhe585W29jExDjURGVQIAoN8ywgyCCJA4mKmIYiWgS1CoE0MYpGxE+GA0Jo7deXWz3txb7be/3/XpJ6s8WXmkC50aTaaiPctqnd3tLsdGh1vnIttNjaPiJZuiF20SBdabIrzmGtw/taC/+5gOGsgfGiTl64RXJ5U+O8KnBZb9IQ4S0RJghNTq+uqTSb7JyWUeki5C5rnAptCpU6x+UahdNL0mfXvL2o8e6qTqkl3rXbSO7u7uh2v/LXn12qjf+adfn4qcS7ZJbWP39TvKigsy6znT5mLrRBcDVB7iBHyBvhVWCV9aVN3q4lKF3fUGg0kOQO83TaHYRanWwmzx/FUxLLG4Ttfg5iv5CKJzFagwzLZukbkqIzOcnvZfA5/HgdPlxmDwH3IpVqFaHbQeJWa1l2L/DS4WVFTPXYfBikKp7dH8Q7Po1ba0EzY2JSaeThqByVWkM2mWLBOY/X5sHv9BHxv6Lw4YST8y9IoqEwAbMd7dNJzOoX6HVKLPpJVFIlpufPCbtNBH1OdOLOuGIKi8XI4U6SsNNLNLLMZfn6f+fFz2VSh5+QzA6PohoZx2N1EgouYjbLsNkfsRJyYzErRNBP6AwyAj4b0agdl0eOSS/HqrcQXIoS20pSfP+Bs89X7GVOkFh/thBdmSeR8HOcySCbGkAxNcjrl0HmbAY0agXKmV7kyj5MRhkLC2r8AS2Z39KsvNnEbHHiFZtG1uKsJ9JItrZDzIflBIIa/CElk9P9jI1/z9OJJyhUUtGdHKNlkOnZe7hsaiJLUuzzIyLwDcV8ikL+d/YPsmwmkixuxJForAM8m7rP6EQfY9Ie+h/0YjL3s7MfZbdQxrG5x4huBr3+BUeZXwmHlVhdD3F4hlFpHhBdtfHxaJd0MkE8tiY6dP3AkPRbenrvYbQ/Ri++FdsYE2HHhFNFdOtZvpnQMm1QUS6lOEi7cPh+xDL3hIHH3zE01sP6ax/7qTg5EfwvLlMBmnEDLQYAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="nebraska actual"\n        title=""\n        src="/interpreter/static/03-nebraska-actual-29ffa558d8876c596975d258325ad683-83a8b.png"\n        srcset="/interpreter/static/03-nebraska-actual-29ffa558d8876c596975d258325ad683-8992e.png 163w,\n/interpreter/static/03-nebraska-actual-29ffa558d8876c596975d258325ad683-ae0a7.png 325w,\n/interpreter/static/03-nebraska-actual-29ffa558d8876c596975d258325ad683-83a8b.png 650w,\n/interpreter/static/03-nebraska-actual-29ffa558d8876c596975d258325ad683-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>I work at a great company called Object Partners. We specialize in JVM and frontend development of all sorts. Between Omaha, Minneapolis, and Chicago, we have about 100 excellent consultants.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACH0lEQVQoz0WSyW7bQBBEhzs5nOG+k5ItWoiRQ06JggABsloBnMDQIf//LeVqSkEOjZ4hm6+qu6n2+x12ux3GscM4dJiY+65mNKibGnVdYZpG7HcL6xbM84RpaDFKTSvRoGO0DXNZQEnh0DcbMMss6jJHUxWomPvKYBgaHI9HrOsD7g8rDocHNBTKsxRlnqFglEWOlsItv1fWpMhTjSSOEDO01oh5j8MAlYnQinrfYRhHwg7Y391RrESq4w3UtS1hImBh+K0yNuXDiqAEWW4x0t1sNHQqYTATdqhLrMuMru/peEAjAGs38SAIEEcRfM/j2YeqCFimnjNp4cQx/vKjp6LGu0+f8fz8gl/fv+H84T3OH0/4+fULXv78xvnpBy6XC06nE0J24vseXM+F57pQ0qbHSxKFcH0fM9XSMIbNcwxdxzHE8F2PDvzNydDL8lrOuUTFlmUpNc8yMsPxbcBAFNybguNAERB6DgIKObxvIe+UQsi2TJqgLLPNRCT3JOQYSszTAKX5MCU0Y0Q8+65AFHQUbED1D+jcgL6LwiQorMZQ51jGBm/WBW8fVzwe76EaLsWyoGdO43CbhUA9DllAAtnCuWaXOWJHnusgo9P93GPmL9fUBTnc8mDN1oJJYuR0KS1F3JwJxaGMgu4IurpU/wUYsgzpQkTcWyeq5/+TZQYh2xWwDFfWb3R0dXLbns9i7+ZYzgIQccsazc5k21L7Cra/AbX2jaH4AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="object partners"\n        title=""\n        src="/interpreter/static/04-object-partners-973c2d8b90e61e6b47537ad232dd341b-83a8b.png"\n        srcset="/interpreter/static/04-object-partners-973c2d8b90e61e6b47537ad232dd341b-8992e.png 163w,\n/interpreter/static/04-object-partners-973c2d8b90e61e6b47537ad232dd341b-ae0a7.png 325w,\n/interpreter/static/04-object-partners-973c2d8b90e61e6b47537ad232dd341b-83a8b.png 650w,\n/interpreter/static/04-object-partners-973c2d8b90e61e6b47537ad232dd341b-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Every presentation has this prerequisite sponsors slide, but they truly deserve so much credit. Without their support, we wouldn’t have all gotten together for this great conference, so it is <em>sincerely</em> appreciated. Thank you so much!</p>\n<p>❤️</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABWklEQVQoz61S0UrDMBTdt6kPKkgZ81e2p4k+qLDPEMSJgg4dip/g2LNs+uJgbrPtlrVpmrSkOSYdHZ1bwQcPHC65yT05N7kl5KCUWsaMMFHnpJQrTJIkZf68Qel3QgmONQiBImR1GdYE5XgE0bqFeH6AeGkjbt+D9t5wdHyCWq2GarWKer2ORqOBq2YzrTFOVxwuRBf2k9EQ4voC0eMd+M0lkqcW3I93HJTLOKxUYFkW9vd2sbO9hfOz082CeYcx54jNIZM3jn0fkvqglMKbExCPYjLzMRhP4Xhh8Rtm8Wvq4XNMYBMGO4wxnHyDRVGqzoMAVN/2Oowx8PRaplUr77gmOA0ihJwiETPMOh0QTa/bheM4sB0bjuvC9RiITzAP3bQLFDk0t4WRRBxrR5KD9XuafQSapmVDxoJ0n3GmnQebW14m8+OAv6FwbDKZ/FAr83sZldrIQof/hR8a+0iqHlYRVQAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="sponsors"\n        title=""\n        src="/interpreter/static/05-sponsors-a830cb18e795252ef3539f8a0f4b8110-83a8b.png"\n        srcset="/interpreter/static/05-sponsors-a830cb18e795252ef3539f8a0f4b8110-8992e.png 163w,\n/interpreter/static/05-sponsors-a830cb18e795252ef3539f8a0f4b8110-ae0a7.png 325w,\n/interpreter/static/05-sponsors-a830cb18e795252ef3539f8a0f4b8110-83a8b.png 650w,\n/interpreter/static/05-sponsors-a830cb18e795252ef3539f8a0f4b8110-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>I feel like some of you <em>may</em> have a pretty negative perception of CSS in JS, or at least not an overtly positive perception. This can be for a variety of reasons, but I think paramount for some is that it goes against the “separation of concerns” that have been ingrained in our minds and regularly re-enforced. It can feel weird, it can feel unclean, and it can even feel like a solution looking for a problem.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABG0lEQVQoz2P4Xxr0Hxv+B6JLAsH0PxANZcPEcOljwCoB1ATXWAg1FIkNkyfeQGQD+sL+/z+bDMZgdiEJLvwHtRXmzf+Vwf/f7Iz6//hENBiD2P8rguHeh6tHci0DsmEIAwP//ykGssuD/n/YG/t/1xIfMH6/JxYsBpJDNgSrgSiSZUB2ZQgwnIB0f/j/n3vj/v8C4v+TIv//Lw4CuxKkBtkRWF34F2xY8P+LKR7/t0c5g+mvuf7/d8a6/N8e4/x/d4Tz/1kBtv9XhTr8v5LqSaSXgTY/zPL5fybJ/f+ddK//L3N9/59McPt/Hsi/DDQEZMnJRLf/z3N8SfFyMMRb5RCv/a8IgfDhOIQ4LyN74S8UI7P/ookT5UJKMQCpZ13Eq3k3RwAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="from here"\n        title=""\n        src="/interpreter/static/06-from-here-1898ec85332b65a355fcd0aae3a64685-83a8b.png"\n        srcset="/interpreter/static/06-from-here-1898ec85332b65a355fcd0aae3a64685-8992e.png 163w,\n/interpreter/static/06-from-here-1898ec85332b65a355fcd0aae3a64685-ae0a7.png 325w,\n/interpreter/static/06-from-here-1898ec85332b65a355fcd0aae3a64685-83a8b.png 650w,\n/interpreter/static/06-from-here-1898ec85332b65a355fcd0aae3a64685-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>My goal is to take you from this initial <em>possibly</em> negative stance to cautious skepticism. I hope you leave here with an understanding of why CSS in JS exists, and how it can solve some very real developmental problems. Perhaps it might not be the perfect fit for your application at this point, but you can understand why someone else would adopt some of these technologies.</p>\n<p>A stretch goal is that many of you will leave here fully convinced that CSS in JS is the solution to some of your CSS problems, and you’ll adopt these techniques for your next application.</p>\n<h2 id="agenda"><a href="#agenda" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Agenda</h2>\n<ul>\n<li>\n<p>Discussion of the problems of CSS</p>\n</li>\n<li>\n<p>Defining what CSS in JS is, and how it can solve some of these problems</p>\n</li>\n<li>\n<p>Discussing some various CSS in JS libraries, and real world examples of the usage of these</p>\n</li>\n<li>\n<p>Finishing up with some discussion of drawbacks of CSS in JS and some quick demos</p>\n</li>\n</ul>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABhElEQVQoz62STUsCURSG/W9mpJWNo5ROmqJpmpLZ+FH5CwxaB0HUpkVugqBFJGVRIFJQLRIpWrjJFhlEiQ563+581QyNrVoc7pn3nPPMe2auCRkWukg7fk4aRMlJmpXiWxefNTV13qQFEQVGUnJOsjRfZJRmWssyIDlW0sVc1GSYwxiowrA2CVzNAndhYJOjGiO56YR9aOdDaCdDEKKcDMywxg7lggx9P/SiUfXi9SaAxrEHyLtAVlm0CxH09xPo7sTRKQSBFXmGZAYBReu8A0LJj8dLDg9nHryce+mgE6DAVsWP4nYcB3sRCKczUi9RZn+vrELFldfd6JUDQIW62KLAJfFFtGeDQ23XhWbRLfUgpXend6is2+EZXExbcB0cwZFvCKUpM96SdrQW7Kj6hnEbs6IcsODEY0aXZ3SzhsAeXaMetaGZGMd92IranA2f9Kd8pCbwFBvF8/yYpNepLvCOwUBdIUe/mXg1lp1yrvYY6FqYoUPx7Ct3sq/JB+l/OvyP+ALiRmGmtxbzCAAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="to here"\n        title=""\n        src="/interpreter/static/07-to-here-10cde59ff47df9958225f63e5f3cdf51-83a8b.png"\n        srcset="/interpreter/static/07-to-here-10cde59ff47df9958225f63e5f3cdf51-8992e.png 163w,\n/interpreter/static/07-to-here-10cde59ff47df9958225f63e5f3cdf51-ae0a7.png 325w,\n/interpreter/static/07-to-here-10cde59ff47df9958225f63e5f3cdf51-83a8b.png 650w,\n/interpreter/static/07-to-here-10cde59ff47df9958225f63e5f3cdf51-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Let’s start with a brief discussion of some of the problems of CSS. An important caveat here, these problems tend to be focused on real-world examples that every-day developers have run into, or have run into without even realizing it and resorting to hack-y work arounds. This is not to say that problems “at scale” are not important, but if we can narrow the scope to problems that every-day developers, and myself, have faced, we can more clearly define the problems in more approachable terms and concepts. In illustrating these real-world problems, the foundational basis for the creation of these CSS in JS techniques will be made evident.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACrUlEQVQozx2T2WsbVxjF9dqH0t1ETqx19lWzSzOaGS0jSxrbWmxjVaQ1geKqEAqBlrRgKCVQkqf+y79e+ng/Ps4959zfbXR6FoH0kmqo8rALOBxrLtoKu4XNcmzR+vaM7aXH7npGpPVQ1QGOohNbLsvLW8ZZRRmOyKZLyskLGq6tEfkDbucWm3lEXRfIWsxOnN8+2Ax0iYnfZ7lYErs+VeozDmyS3hml1iYOU2J7gBeFDJImjel4yGKeM8tHuL0LxlFEUdbsNnuu5pP/BUurxeu1zdVyxfdxi+syolSb1G6TTNXZTyUO9zGh6tAI5C5xEBGMVhRJTBXKHFceh7pi5Kc4tiqcDzgudLamysJSKQuTu3XI0zbBOPuGzWXE8d4gfyEcTkyZ0FTIQ4Vi6PLr6ZFPf//G+9Nrnt//wV9/PvPvx098/OcDp8MtH55/55fTibdPj7w7/YjU7YpeddqdDq1zIRj5Hp6qMIslMrcvXIn+VlNq4dR1AvY3B27LgjdVyNZuMZ3WZEnGJDDQNRNNs7gpDVFPiCy9ouEYLrExIAo86rVGGtscK42HywDNH5KORHy/yc74jh/ScyZpQquvY0sXKB0JSTGxzB6a0Re7logcxwwTgUSYM/ZV5qnL/bpglZUMVw/MxNK74DM20UueftowUtuU8jk763NK30DpvkK3IjTxIIq4qDEcZuyvS1bzKUa/zdSSebO5IxdcRX2J/OILtnlCVV0TOTZ3hsG632GcCBqShJuRgROnyF0Fuyki58LJz4877nc3GAKbiaVwJcSSKCETUTxNxtRd8nyFJeoZOTqh7VGIeaKron+ZtqSiyCaDVptGOanJ0wJF0B86BtVsTTHdEzgWmtTjcvskBALxOzTGk42Y6RjNr7nKbGKBlfrlVyTBiMDTMS2P/wCIY23c2RPYJgAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="the problems"\n        title=""\n        src="/interpreter/static/08-the-problems-fa6db80ef14cfc6d39cf44af42f90402-83a8b.png"\n        srcset="/interpreter/static/08-the-problems-fa6db80ef14cfc6d39cf44af42f90402-8992e.png 163w,\n/interpreter/static/08-the-problems-fa6db80ef14cfc6d39cf44af42f90402-ae0a7.png 325w,\n/interpreter/static/08-the-problems-fa6db80ef14cfc6d39cf44af42f90402-83a8b.png 650w,\n/interpreter/static/08-the-problems-fa6db80ef14cfc6d39cf44af42f90402-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>For these first examples, let’s say that we’re a team of front-end developers working on a component library to be used throughout a company’s internal application suite. We get business requirements from users and they’re filtered through our UX department, who weeds these out and gives us the truly important requirements.</p>\n<p>Our first task from the UX team to design a button component that has a hover state and raises slightly on hover. We design and build this with vanilla CSS and HTML. This button looks great, meets every current need we have, and the code is quite succinct, to boot. This is a <em>great</em> component!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABcUlEQVQoz42SS0/CQBSFScQKnb6mb6CvYEzR0lBEUAJEYUuiiTHxT5i4U+PCxL+h0R2/8zgtsVYChMXJaTsz3z13bkuiKEIQhEzpcyqO49B7uMXd4h3zjydcf79i/vWC+eczbhZvuHi8R7VSyff/MlIvFV8IL8CwKVqRj5plQxYlaJSCK++D2yvnXuEOsBpkLZDnedTrNcxml5hOr9BqhTBNE7IsQ5KkXPmZXYC2bWMyGaPXO0Uct0EIAc9ECipCtgLTzZZlYXA+QLebIAxDGIYOVVWgaRpzlYlmiVdBGxN6bppwiNF4hCiK0Gz6OGw68H0fnufCdV1WxMiK7wAkqNkW+v0zlrDLWo6RJAmDBVkxvspnXoRtBaZOWXu6pUChIgyTwmRTt2z932DWJVufsErg+SbG0wSDYQftzhGOYw8nkYcgCOA4Ttb2zi1nQzF1OI0Ga70OqqgQiAiJra39bbYB/6DC8r6Ylt+EfL2oTXf4AyrPEiYzxaWEAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="first button"\n        title=""\n        src="/interpreter/static/09-first-button-5bff0108aa2868c0761df3babf65b777-83a8b.png"\n        srcset="/interpreter/static/09-first-button-5bff0108aa2868c0761df3babf65b777-8992e.png 163w,\n/interpreter/static/09-first-button-5bff0108aa2868c0761df3babf65b777-ae0a7.png 325w,\n/interpreter/static/09-first-button-5bff0108aa2868c0761df3babf65b777-83a8b.png 650w,\n/interpreter/static/09-first-button-5bff0108aa2868c0761df3babf65b777-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Our UX team makes another request of our team. We now need a secondary style, and the previous button will be considered the primary style. So… we add this secondary class, we complete the objective, and we’re still feeling fairly good about our button component.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABIUlEQVQoz62Ry0rDQBSGp0jbJHNLMhFBhGyCm+DG1stTKFgfo63SBqtLfRTxLlQQStd9st/R1Di5tRsXH2dm/nP+OXOGcM5hwth3ZMu9qCHNSXPzkNSE4S+m63a7hVZzI6NpREtrvxfna5eG5gHXibZl4er6Dm8fC9w/zfD4Osfz+xwPLzNMPxdau4XjWCjVljvkEFIL0sbZeQ/jyQTDyzH6wwSDiwT9wQij5AYnpz1QxymMipUNKWXwA4HdvW1s7VBEsQ9/0wYhJEejQTKTyiebh67robPfRbdzgKPDY8RxjCiKEIYhhBA/upQyM1ttqDtUykcQKCiN67nwNEopHb3crNZ2aAqU0kqqcmt/ufhbVZh63bo0w+KNq4zXdvgffAG/QBRtda6TFQAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="second button"\n        title=""\n        src="/interpreter/static/10-second-button-b7eda9637902ec22b11c6ad608d75cd4-83a8b.png"\n        srcset="/interpreter/static/10-second-button-b7eda9637902ec22b11c6ad608d75cd4-8992e.png 163w,\n/interpreter/static/10-second-button-b7eda9637902ec22b11c6ad608d75cd4-ae0a7.png 325w,\n/interpreter/static/10-second-button-b7eda9637902ec22b11c6ad608d75cd4-83a8b.png 650w,\n/interpreter/static/10-second-button-b7eda9637902ec22b11c6ad608d75cd4-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>We get another request that the button is far too large for certain applications, and the request has been made that we add a button with reduced padding, font-size, etc so more can be displayed on screen. We add this <code>tiny</code> class, and we complete the business requirements. This is fine…</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAA7klEQVQoz62Syw6CMBBFKw9BoFVi3NqNCkqikhhjovgNGj9IXfnZ1ylGRKivxMXJDLRzpgxlnHMogiAoYjkXQqDTCXNU/mrf3cOqsnIDJbBtG4yxHJWXpbpa9ljgpc6cCtuwLBubbIvj+YITsd5kJLUK6YcT3jaINi2IFkUPbquJwWCI3f6APRHHY7iu+yTUnvD+4PsBuj2B1TZBuhwiXSSQfQnTNGAYDTiOQ83ez7E2w5CGP5vOEUdjIkaSTBBFI0gpqaFffNr3wjCk6OfFCs/zaoVVtELdgKu8k9X+8ifZq/XqO6a71L+ivYf/4grQrgRUrO7XMwAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="third button"\n        title=""\n        src="/interpreter/static/11-third-button-c2c759cfcfd593c6ae07837fb4bc5cbe-83a8b.png"\n        srcset="/interpreter/static/11-third-button-c2c759cfcfd593c6ae07837fb4bc5cbe-8992e.png 163w,\n/interpreter/static/11-third-button-c2c759cfcfd593c6ae07837fb4bc5cbe-ae0a7.png 325w,\n/interpreter/static/11-third-button-c2c759cfcfd593c6ae07837fb4bc5cbe-83a8b.png 650w,\n/interpreter/static/11-third-button-c2c759cfcfd593c6ae07837fb4bc5cbe-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>We get a final request that the button neds to a have a hover state for accessibility and more intuitive feedback on desktop screens. We add this class, and our button is “completed,” for now. This is <em>not</em> fine 😫</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAA90lEQVQoz62S22oCMRCGc7FZdjen3YogFKxFwbQab0QQDzd9BKv0bXq48rF/sxFtukZDwYuPzJDJN9nZECEEajjn59WPpZQoy8pRx9fqTh7SlPkNagGlFIQQRx370tBZ8rshvM7CHlRIEorFYo3P7z2+fvZYrtZWmpylkRseC6SyGyq3FMgZxcho7D622LxvMdQaWZb9EQZveEoY42i1FWYrjelcY/k2xuOzRKuT2ZoCaZpG59iYIUNVPWA8MjBmgpfhK566PfT7A5sbKKUu5hcRcius3MpY4TjGzOFLop8cGnCTW7KLvxyT3Wri5yT0qP9L8B3eiwPJCwTOOKrTJwAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="fourth button"\n        title=""\n        src="/interpreter/static/12-fourth-button-f5d5908dc0a38d52a1eff144eda56b7a-83a8b.png"\n        srcset="/interpreter/static/12-fourth-button-f5d5908dc0a38d52a1eff144eda56b7a-8992e.png 163w,\n/interpreter/static/12-fourth-button-f5d5908dc0a38d52a1eff144eda56b7a-ae0a7.png 325w,\n/interpreter/static/12-fourth-button-f5d5908dc0a38d52a1eff144eda56b7a-83a8b.png 650w,\n/interpreter/static/12-fourth-button-f5d5908dc0a38d52a1eff144eda56b7a-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABLklEQVQoz42SW0/CMBzFeXOXtusu3R5gJJuI4g0UGQ+SGIgJzyZGjTExPijf/xMcuy6FMSr4cHLatD35/c/WopSiLtt10BMdFN1zjNI+Rp0+btJTDNsnuE3PcJddYCLPeiJVd5vvW/UNk7LkpWF8jEUxw/vrG+azB3x9fOLl6RnLxSNW3z9Y3s9xLXJYxFFvjIGEkDVhHrUxSQcoJM1YUk2zS0zzK7UedweKPpN3/iTUYaUTUoVajo0j21q7Xms5rrsFYiZkFB5n8DwpxsDYxpvVmMKMI8dJjDgWSKQHQSDDPRVoenyYULoQAlEUIQxDpU0VZjVDdwLrYb7vK0JKqzNWG1/7XsKyr2rcRLkODsMAnHsqXFfAOTdWsUNYUtVV9qhJ/z3y9m+zv69DH+UXdtEKP54BCboAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="the globals"\n        title=""\n        src="/interpreter/static/13-the-globals-be69fd3cbbe98db7835c23f48b88c94d-83a8b.png"\n        srcset="/interpreter/static/13-the-globals-be69fd3cbbe98db7835c23f48b88c94d-8992e.png 163w,\n/interpreter/static/13-the-globals-be69fd3cbbe98db7835c23f48b88c94d-ae0a7.png 325w,\n/interpreter/static/13-the-globals-be69fd3cbbe98db7835c23f48b88c94d-83a8b.png 650w,\n/interpreter/static/13-the-globals-be69fd3cbbe98db7835c23f48b88c94d-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>  Let’s consider the usage of this button component by a developer who comes on the project long down the road, far after the team that designed the component has left for greener pastures. This developer is relatively inexperienced, and is just trying to add in style that makes a link look like a button. This seemingly simple task is more complicated than it appears at first glance. These globals make the job <em>far</em> more diffiult than expected, and the developer resorts to messy hacks and the use of <code>!important</code> in an effort to ship and meet a deadline.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABb0lEQVQoz5WSWU/CUBSESdRu97a9LV0EhLI3ygNoBJVFQOVfGCUSTCQSlwcf/evjbbFRlhJ9mMxJm/NlpqcJVVURiFIKTdMgiiIKRR+9/gjtzgCd7hXa3SH3QejBs8v+DcplH7IsIdqPlIhgC1fBmIb+aIj52wcmjzM8TJ9wP3nGePqOu8krbsdzzF4+OfwagrAXhvjNWAIqioJMJsMTZpHLppBO2TzFLmRpB4os8lmAJAmgJEhGsRxmA5ASCsNScVAwkS1ZyHF3LYO/0yCTRQOVJ6LfbaK9WCAhBI5jo9s7x9lFE6cNH62ah8O8g1JKg5NkICuQ7Qm5m6YBw9SgM34kQwdlDGZSh8lU/r3WU20FEl7ZdhlOznw0WlUc11006xYq1X0YOj8YFw1h9K9AAtuyUTuqoVrxUcp7KHo5eGkX5RRF2g4q/wMYuSRJoWRZCaUoJDxK0CCARQeJBW6CruvnX43m1d3YhJvmVcVV/gJKxhFC22c+kwAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="global problems"\n        title=""\n        src="/interpreter/static/14-global-problems-efc9f88347058f4c18d091c005e776a5-83a8b.png"\n        srcset="/interpreter/static/14-global-problems-efc9f88347058f4c18d091c005e776a5-8992e.png 163w,\n/interpreter/static/14-global-problems-efc9f88347058f4c18d091c005e776a5-ae0a7.png 325w,\n/interpreter/static/14-global-problems-efc9f88347058f4c18d091c005e776a5-83a8b.png 650w,\n/interpreter/static/14-global-problems-efc9f88347058f4c18d091c005e776a5-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>But wait… we’ve invented techniques to solve these problems!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAA+0lEQVQoz82ST0sCURTF5+tFNv4Z2rgQAy2M0tFsFFxoWBpCNNknEMSVK4mMwEWLom2f6Ofc7jxldLCNixaHee/c++6958y1uM6wT1gRop4Oz45+PSf+oeFX+ZsFJWCC1SNwE3CVgsqh3mvJAHaIpPJyjikanVCS+yUYXEIrC8MG3J9DJw83J3BbhHYu4D3oFrTxxkBWREb5AF7H8PMJEx8WU3hw4WUE3+/w9QYfM5gHOX4dGsd/eCgyHmvw3NTp7k6Vl8mePJ1cGgjfOwvuF2rNTg9Fhnjkin+28tLol0sojJ9Ve4dkExDpBlt/1llvwNZmxEne+x7+x4JL+G1qXftzLxwAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="but wait"\n        title=""\n        src="/interpreter/static/15-but-wait-8783d3472cfa53637a49def8b3c7a1a1-83a8b.png"\n        srcset="/interpreter/static/15-but-wait-8783d3472cfa53637a49def8b3c7a1a1-8992e.png 163w,\n/interpreter/static/15-but-wait-8783d3472cfa53637a49def8b3c7a1a1-ae0a7.png 325w,\n/interpreter/static/15-but-wait-8783d3472cfa53637a49def8b3c7a1a1-83a8b.png 650w,\n/interpreter/static/15-but-wait-8783d3472cfa53637a49def8b3c7a1a1-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>CSS naming methodologies like BEM exist to solve this exact problem re: name collision and CSS globals. Also consider other solutions like Atomic CSS, OOCSS, SMACSS, SUITCSS, Object-oriented CSS, etc.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABLUlEQVQoz41T21LCMBDlldxTSqnYq5UCpQpWFP//x45JHKakE0YedjbZzZ49e8mMcw4rjDGjmdHj+eq7+qcyxo3vZrdGC2aBhBCgRIDMKSilYM4mwSWHVAJKSfhxYwIPkBKGVSbQvicoNzGeK41klYAQgv22wXBusOue0HcZ+kPukkyZeoDEAKa5xHbQOHwv8NpWEFw5wGqzxOWnQ1OnKIsEOsAyDJgptKcIu2GBuk2RNxpSSmR1jPNlj7JcI4qUYfdAyVbrSLs+CcGMZohi4XqaLDXePjIcjyW+PitTdm76y+AP9QZwmu1PuAuygymKNfpTjebFlpxCa+1N2AOcGqfimBsApTTmZvKE0CCBYMmhvXMbYNeHUfxHYBZiFGI43lnQFyz5HlDol9z7Lb8NEwSXhnz7OAAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="bem"\n        title=""\n        src="/interpreter/static/16-bem-cd2d8e4883e8b55a3afdc37ab619f23f-83a8b.png"\n        srcset="/interpreter/static/16-bem-cd2d8e4883e8b55a3afdc37ab619f23f-8992e.png 163w,\n/interpreter/static/16-bem-cd2d8e4883e8b55a3afdc37ab619f23f-ae0a7.png 325w,\n/interpreter/static/16-bem-cd2d8e4883e8b55a3afdc37ab619f23f-83a8b.png 650w,\n/interpreter/static/16-bem-cd2d8e4883e8b55a3afdc37ab619f23f-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>I am very much not a fan of these methodologies. They introduce cognitive overhead and introduce naming concerns. Is this particular thing a modifier? An element? A block? Naming is already notoriously hard; this technique certainly does solve the class name collision problem, but I contend it imposes extraneous concerns on behalf of the developer that can be solved in other, cleaner ways (as we’ll see soon).</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAAu0lEQVQoz2P4Xxr0Hxv+VwLCgWD2XyQ2jMaFGfBJwgz+X4pq2D+SDQRqBGn+B2XfyQ34/6XAH2EoHlfidCHMsH+VYf+vruz8f7Eh4f+/Yn+43D9yDPxXHPD/f0PM/2nzqv5PmV76/39VGDA8ES4n2csg9s9C//8zYn3/z04K/P+sKBgcnuBIIsvLQM2fSoP/Py+EuPYTNIL+kWMgTCMshjHESPIykgv/IaXDf5S5EBqWSDFOKM0SlbBJxQALc192/jzEVgAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="run"\n        title=""\n        src="/interpreter/static/17-run-8f5ac6ba4b750abe9def79e933a97f97-83a8b.png"\n        srcset="/interpreter/static/17-run-8f5ac6ba4b750abe9def79e933a97f97-8992e.png 163w,\n/interpreter/static/17-run-8f5ac6ba4b750abe9def79e933a97f97-ae0a7.png 325w,\n/interpreter/static/17-run-8f5ac6ba4b750abe9def79e933a97f97-83a8b.png 650w,\n/interpreter/static/17-run-8f5ac6ba4b750abe9def79e933a97f97-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACtElEQVQozyWTW1MaWRSF20QM0PQFumnoFkEuAQIqKqASLpqYKCExQjSiRCsxD8lMUslTpuZhamb+zNTUTE1NVVL5gV92tw+nunqfPt9Ze+3VSqfTYTAYsLu7K2vAoN+j19lmc32NRr1Ma61CLpdjs1GnvVamlM/hLi5SrZZZrZXJukkWYjpqPIntpFGarTa9bldA/QA26HXZam1QKRdp1Ips1vKsr9b59PEDV1eXTGeXnEwv5PmK5uYGTjJBRDMIGzaWD1xtNGj50Psd+t0OO1tNpqenXF1esdfvsl4RdfW7nE+nPJ+cMHp2xPT8nMGDfTJLWdy0g6rpLGgJEskUSq12j/rKCtvtJr2dFo/3H/Lt63f+/usfpmczqbWpl3JczGbsD0ccDIccj8cU7q0yH9XwPA/dMLitGuiWg5IvFCgUi+JJlU57gxfjCf/9+z+///aHtPmZX778SrlU4PWbNxyfnHEu4JPTl3j5uyihCKZlEdVugFHTRjGTaeyUh+MtUa+WeHF8JLA/GT+f8PP7j7x/9xOul2EsFz05PGAyGcuasL7VwUwvooRV5qI6t2Mmd/QEyrwWx0o6aIkkmUyGvW6LM/Hw8aMh1XKFJS/NSr3G9fU1ry6mvL1+zWx2wUsZjrO0zFwkFsAWhBM2LBQlaqCaFnHLRhdoo1aiIp5ZSRfXdcl6DjvNDY6ejhgdPgoitTfo0WhtB5CQROaWtOtDQ/KuKJGbgm3bhPU4uWyWdqOKk/ZkamkyorB/f5uj0VCSsENaYuJYpgxElMlQ/DOKtOy37bMUJRwLCjEjQcxMBCpXxMtCfhktCGuKRTdFxhVbVBVD10gYejDheRES9n2T86GYwS0fqtxRhXyzGZHbIvJBUf4GH2pYKfS4HUSjsJwTta4AdeICDKmaQExisj8ntgWDEcYPlFJHfORcutQAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="safety through-automation"\n        title=""\n        src="/interpreter/static/18-safety-through-automation-4e498ca52628fe0f5a85c34b9bacbf20-83a8b.png"\n        srcset="/interpreter/static/18-safety-through-automation-4e498ca52628fe0f5a85c34b9bacbf20-8992e.png 163w,\n/interpreter/static/18-safety-through-automation-4e498ca52628fe0f5a85c34b9bacbf20-ae0a7.png 325w,\n/interpreter/static/18-safety-through-automation-4e498ca52628fe0f5a85c34b9bacbf20-83a8b.png 650w,\n/interpreter/static/18-safety-through-automation-4e498ca52628fe0f5a85c34b9bacbf20-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Consider this quote by Kent C. Dodds. Why would we not use tooling to automate trivial naming concerns? Development is oftentimes all about automating hard problems, and is naming not one of the most (unecessarily) difficult ones we face?</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACjElEQVQoz12S3W4bVRSF/Qy0IUntsWPP/5wzf+ecmXFiOw5NhJCaglQhWiehEXJUqaCqbhMEquhFL5G46GvwDrzbx3YkbrhYF6M5e+211l69w2bCrAtZHKUsZzEn8wmPFz4nh2MWNuCoDOjyCW0RMWs0R21Ba0u6WuHSkDoaY7KARh8QD7+gt2xHLDqfeZfKQERXHVApj6Yc0xVjnB7TVgmm1FTWUpgapXKy4ZDi0R7K28eGA1wyZjzYoXeYD6j1hDTz0ToizhK+Wi75ZjGXBQajQ5bzKZdXl6yufuSH1Yqn59/x7Mk5J3VJtf+AbviAOukT+x69rhhhRIlSPpkKmE5nfP7td/756xOzvKQsLWdnp7y/u2Oz2fDzL2+4vl5zfXHJY1eh+l9SertkwQCbDum1klEuRH6WkRQ5x8enfP71jr8/bOi21lIhrR3v3m24vb3lp/Urbm5ec/3igmLoMdp9hC/WE39CoUJ6rggpi5RUK7JC03Yz3r5c8+f6inAUE4QaVTe8ebvhwx8fWV1c8ULw7PwpZvCQPBhS6QyTJ5J3RM/mvlgOBJEgptAxx7MzLr59jufFhEnC8usnfP98xcv1DfPlKdEooNrbxUx2cK7ElgUuHNEEfVGYeVglOco1jfbvUakJKtkuSsh1QG0sleuwkm/TtnJ1QzeQ68q7tk5p1AFN4uH8fXp1HorcEFv8hwhXRjIUUwlhoRPJMZKjpdICLf8UU6Ml3+1cgL3vqFRL9WkyIWykGs4ZrFzMmgJb5wKNrTKBEmjqSiw1Fts20sUad3iEm4piKXMVi1Jx2aS72GSP3rSz/B9da2ma+n5BLUGbPMXU1T1ZlnpoKfn222V9TLJPKaRuSxjv8C+7n2MFd6oWHwAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="hard stuff"\n        title=""\n        src="/interpreter/static/19-hard-stuff-5e6bae4d5b66836b7cd47c5205a302ce-83a8b.png"\n        srcset="/interpreter/static/19-hard-stuff-5e6bae4d5b66836b7cd47c5205a302ce-8992e.png 163w,\n/interpreter/static/19-hard-stuff-5e6bae4d5b66836b7cd47c5205a302ce-ae0a7.png 325w,\n/interpreter/static/19-hard-stuff-5e6bae4d5b66836b7cd47c5205a302ce-83a8b.png 650w,\n/interpreter/static/19-hard-stuff-5e6bae4d5b66836b7cd47c5205a302ce-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>But others still will note that this problem of globals has been solved with tooling in other areas. CSS Modules and Shadow DOM (a staged spec introduced in web components to isolate styling to a particular subset of the DOM) <em>both</em> are intended to solve this problem.</p>\n<p>CSS Modules is an implementation of CSS in JS, so if you leave here with nothing else, consider integrating CSS Modules support into your application. It’ll generate a unique hash based on a user supplied class name. Shadow modules are similarly going to be great, but I’m not quite sure they’re ready for primetime yet (nor are web components <em>quite</em> there in my opinion).</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABYElEQVQoz2PgkVb4D8PcUvL/kfnEyiFjBnQNIJoLiLmhmEsSIs4vp4yB+WSVMCxjQHeFgLzKfxEl9f9Cimr/hRRUwTRInIFXCKhYEELzCf9n4OQDs2H6YIZiGCgINAREc0rIgl0gDDRQGGhBXEbe/7SC0v9JOYX/E7Ny/9e0tP9PyMoD+kAOu5dBmBMoKaGm/V/H0u6/uonlfzYx6f8c4jL/JdR1/r/78OP/v////7//+OX/xfPn/q9YtvR/S3vHfzGgepDlWA0EaZbXNfrvGRLx38kv6L+ascV/TTNrILb6P2P23P/LV6/9P3n+yv8Ll6/+HxEb99/Awvq/iLIGiitRXQi0SVpT77+po9t/I3vn/6ZObv/NnT3+qxiZ/WcUFPvPLCTxn4Ff/D+zsAQ4aEDhCzMMIwxhAiAFIJfCMDvQ2+xAmldGEYz5ZSE0SB26YVgjhZi0hqKHXANJTtjUwgAs3TdMG/tOQAAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="alternatives"\n        title=""\n        src="/interpreter/static/20-alternatives-91fe98c79e11d63e562a388896838f36-83a8b.png"\n        srcset="/interpreter/static/20-alternatives-91fe98c79e11d63e562a388896838f36-8992e.png 163w,\n/interpreter/static/20-alternatives-91fe98c79e11d63e562a388896838f36-ae0a7.png 325w,\n/interpreter/static/20-alternatives-91fe98c79e11d63e562a388896838f36-83a8b.png 650w,\n/interpreter/static/20-alternatives-91fe98c79e11d63e562a388896838f36-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Shadow DOM, and web components as a whole, are certainly something that I think will continue to grow in popularity in the coming months and years. That said, the web component implementations are still slightly in flux, and for full browser support, you’ll certainly have to ship a polyfill.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABj0lEQVQoz62S2yuDYRzH/X1yHFeKuEBS05hjJDTEhVK7kYSipSGnmchxkzAzIZtkb3PcstlWys378byvvbaV4cLFp9+p59v3eZ5fFo06MBYiC7RcQ06BTIgzckqepTYUocRA1uqmImgu/kTkWj8No+7LiJKnCaoNMQzOmpH25njYniG4P8+zc57w4RJxt52Yy8br8YqIK4RP7USXR77caaaSDhODu41JfFdO/N4D7iS3ymPATfTFSyziI6ZEQTTuJ35iSzj8TlBpCpcvm6M83rt4kk4JXu4SOFojLF3w5j8jdHFE6MZFyOvgWcSIYyH51hkdLo7isZjxtFRiadOht5ZxeDLMkMPE3HQ257YBtsytWC2dnO9OQMMPgsogtDrG7fo0vj4jC6Zy2h0Gdg5KGdxrx3nWQ+B4imvxhm6fHWlrXJzTZRDUfrm7HIb00F/Ne0cJbz2lYKqC3mpBnejXqjP6aqCrIrluqYJpe1ifj1yXg2zIFdcpUGsMeaJWyEmQ+0l9XtLIb3v4Z75bm//kA9tzgLKfb/MQAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="shadow dom-support"\n        title=""\n        src="/interpreter/static/21-shadow-dom-support-178dea1d30838a7b090ae876340a50d1-83a8b.png"\n        srcset="/interpreter/static/21-shadow-dom-support-178dea1d30838a7b090ae876340a50d1-8992e.png 163w,\n/interpreter/static/21-shadow-dom-support-178dea1d30838a7b090ae876340a50d1-ae0a7.png 325w,\n/interpreter/static/21-shadow-dom-support-178dea1d30838a7b090ae876340a50d1-83a8b.png 650w,\n/interpreter/static/21-shadow-dom-support-178dea1d30838a7b090ae876340a50d1-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>The bigger your application gets (and the more CSS you write), the more globals you will create which is quite simply making your application harder to maintain and use. In order to work around these scaling issues, naming strategies or tools—LESS, SASS, etc.—are often utilized.</p>\n<p>CSS in JS solves this problems cleanly, clearly, and simply.</p>\n<p>Also I’d like to note here that, in general, I tend to think “does not scale,” is a perjorative used by people who are just not fans of that particular technology. That is not the case here though, as most advocates of CSS in JS <em>love</em> CSS. You’ll also see soon that when you’re writing CSS in JS, you’re using all the functionality that we know and love in CSS.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACgElEQVQoz02S20tUURSHD2h0ASkNxXpQssxbWThiXiITNc17NGqjjY46zqjnts8+5ziTihURSRIYUQ9FEmTQS3/j1zpHCx9+rLU3e3/rajiOi51fwpybxF5eRHka5Qe4cu+6Lios4iRHyLY1sTrQj5Vbx9WbKB3iOAprw8IyLUzTFlkYruthm3nM9DirnU2s3GrEWcniF4oC9/Hmn5KrryRZYjBzzmD+ejWZ3g6WhvvJL61I8E1ihuXi2CoCqjgreyXNcqKBSfk4Xn6J9Ogoa2OPmD1v8ESUqjLIXCshe6OUpVoD6+5ZFpvKeXqvi/X8Bl4gYMfDUMrDU1rkketsJOy4zX56ni/aZO/5MB9Xk3wLMhzt5Pgs9r2zyNE7X+Twcqyd6eozjF+pIDUwiCscI4Z5AToM2UgOUexq4c3IIPvLExxYo/z+EPDzrcvh1jLfX5kc7ub5c7DNrz2HnbE2cq1lpK5IFYk7OMoXoPRJ2RbrU/1krpYxK32aqathursdf6KPr7uKT8ECP16bAjYlUC/2g8uYfXUkGyuYarjI9KP7mJaDioDKNrFmB1jvbGCtK4GzuEBY3CKYS5JtqedZopX5vnZSPc2kErVM3Sxn9mYFo1UXGG6uYWFuWobix1Wq4wylZGsDLdZ/sYMuvBBfHtj2cW/Ft6XZ6Z4EQ6UG/ZUVJEcesyADyz7sJijuxG9UrABDyz5pGb2W3dJRL3WkED8oiDZjG0gw99k49sM2lKxUuL2LLwF1NiPTLcTAOEMvPAFGgEh+pM1Y2j8JFCuCBwSy5H4YVRDiyb0XFPHknyfJeJ4suygG+v8/hqdAhWPpoui0Fbj/zxeQjjIsxFbJ+S/hfdWbGEnbYwAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="it does-not-scale"\n        title=""\n        src="/interpreter/static/22-it-does-not-scale-1dec955f9e822381d0a58351dda4945f-83a8b.png"\n        srcset="/interpreter/static/22-it-does-not-scale-1dec955f9e822381d0a58351dda4945f-8992e.png 163w,\n/interpreter/static/22-it-does-not-scale-1dec955f9e822381d0a58351dda4945f-ae0a7.png 325w,\n/interpreter/static/22-it-does-not-scale-1dec955f9e822381d0a58351dda4945f-83a8b.png 650w,\n/interpreter/static/22-it-does-not-scale-1dec955f9e822381d0a58351dda4945f-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Your class names and styles (i.e. <code>.css</code> files) are separately located to what is being styled, typically JSX with <code>className</code> or in non-React projects, as separate HTML files. Additionally, as previously mentioned, as CSS is global by default, your styles could be styling unrelated functionality in your application. Jointly, these two concerns make it incredibly difficult to re-factor unused CSS.</p>\n<p>Removing styles can be a spooky endeavour 👻, and many regression tests, QA, or manual testing is often required to validate with certainty that only certain functionality was impacted. Each of these techniques requires manual testing and validation, and is not something that every developer has available to them.</p>\n<p>CSS in JS gives you confidence that by removing this particular component, you’re removing style code applicable to this component <em>only</em>.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACvElEQVQozx2S62/TZhTG82lTm7RJfEnia+w4dhw7jnNxLk0Ju4iiCvgAH1AFHxDT2ChD7WBrNVg70LQhjQ5V06RN2l/726GffPz6+DnPeZ9fSWnUqDcqNEwV1zWJQg/fd2lLbTsqvchmkHgMUp9sYLPYDbh5Z8JqkdGPuxi2jtqso7XqeH6TUsP4eLCN52qkocN0nOJaKt2gTbOpU6ttoShVqVVUeSaZx81bY7K0i+M6V0KV7U1qWgXTalBqWbpMUSkGAUtpur2/h2dqTEcDLLtBubxBvV6l1dKpVMr0+ibzRSTvTXEf0jDq1NQKuqFiSn9JN+u0OyaL2YR8kPDlZ2se3r/Lh4v3HD77mqOj5xwc3Oerx484PHzK6Q/fc/b6lAcPDljtLGj7NlW1jGYoIqiJQ1fFF8FZUTCfjdldFRwfP+PN29ecvTnh8vKCJ08e8/Tbb3j16ifenp9x/vPp1dlyWeB4LbaqG7J6jZalUMoGPv3MZ7JImU5C7uxf57d3v/Di5JA/PvzK3/9c8O79OX9e/s7R8XN+PDni5cl3/PvfX6yu53R6Nk1Hx/FNAsmg5LmKCLqMl33yYchynvH53oQv9uesbxSs9wpu7E8l3ZThSL5fS7h9b5fd9YDZPMYXwY/BaJJ0U1yW/K5F0FEYTSNJMKAoInZmCYFnEwtCq2VKltl05cd0EpHPYkbjgLajYJg1CUNS3toQ7DQMcVrq9oW5tiKpbQqHVRbLHutVzjDvMRx0BKOQMLZlNRkcS29oYVhVXF/BCQwJo47SELSEZ11YLlWrm1TKn6ILR0HUYiQOZ/OQ+U585ToveqTiqCf8xVmHQAyEqUcig2IZ6kUurmwZJl3agdyhrinYZoukaxJGBn6oY1uf0PG3sW2FsQhPrvXI5W7H4jxfDKXO8bo27Z6L2TZF0JVBAcmoz/815FIMf3revgAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="dead code-elimination"\n        title=""\n        src="/interpreter/static/23-dead-code-elimination-e262a4ad50b63007003b171aee9e86e5-83a8b.png"\n        srcset="/interpreter/static/23-dead-code-elimination-e262a4ad50b63007003b171aee9e86e5-8992e.png 163w,\n/interpreter/static/23-dead-code-elimination-e262a4ad50b63007003b171aee9e86e5-ae0a7.png 325w,\n/interpreter/static/23-dead-code-elimination-e262a4ad50b63007003b171aee9e86e5-83a8b.png 650w,\n/interpreter/static/23-dead-code-elimination-e262a4ad50b63007003b171aee9e86e5-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Theming, stylistic concerns (e.g. padding, line-height, etc.), and other possibly shared constants are a natural and intuitive fit to be colocated within your JavaScript. Want to re-use that branding color in your header for a button? Sure makes sense to share that with your CSS and JS. Media query breakpoints? Another intuitive and obvious fit.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAC2ElEQVQozx2SWU+bRxRAxzHUVQhpAoLYeMFsxhsGbAz9bGOMzed9wyt4wwY7caEp7UNLhSoVSpUKpU0XiURqm8f+ztOBh9Gd0cycOffOFbZoEXuyzGquztZ+k0itS7p1QuGoT7E7oNx7Re3klMPBlzRe3o/XtIdf0f3inNLxEONOGo3VwSOzDTFlRSxGClij+9hTNXyFJoFyh917aPOEfGdApt2n0B3Ky6fUBmcP0IO+jPKBloQHq13E/CpiwoBOP4sISYgv38ASq7CUrPF5qU2s0Sda7xEutwlV2oSrRw/rvXqXrLSvS2BbGt6b5o/PsAZUbBsKFu82YmYzzvTqNvZogbVCm1xnyJq6T+nV19x++MjFm9+4fPsXv9z9zfXvdzL+Q214TqLaItPq403IkkUyTLoVRq1exPRGDM1zI95QjKC03cw1MHnDFBs9/vz4Hxc/v+Xm9h23d/9ydvED3/14w9H5BUtBldlAnLlwlieeHWkm0zZ5EJ95wmhezKNd3GBMbozOLLJT7XD6/RXf3PzKt1dveH15LU3fcf3He4ZyfiXjy8uf2K70MG/n0C5toZlaQDyzIIRD5u2O8NifZD6cQa8kmAxmsGVbLGebLKgV1otdwgd9lPoAX7lHqH6MUunKs0km3AH0zk1GnkwgxvWIEU8M4YoiVmKM++M8VTJot3KMK3kMkTIW9QCreshy6hBbqoEj28Gbb7ESzeAKRjE4fOhmbGgmpd0L2TrCHkY4ZA1Womi8e4g1FbGaRGxkeawUeB4qMbtbwZOqEyo1UXJVAvEMJqePZ3Mr6MwuhOG+B+ck1CyBCwGELcQDWNbw0XqUT71xppSU/PkcSqqAWiyxl82j5ovMOr2MmZbRWdyMmJx8Ynai1S8wOm1lbl2yhNkvgcEHqNYRwODfYW03RSiRJl4okimXiKTTGG0unhqXJMzOmMWFzuRg1GhnRA6tNDO6/SiJPP8DlY6B/Dhgm00AAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="sharing constants"\n        title=""\n        src="/interpreter/static/24-sharing-constants-ca3771fc4b28fb4d4e871ed07bbb0d15-83a8b.png"\n        srcset="/interpreter/static/24-sharing-constants-ca3771fc4b28fb4d4e871ed07bbb0d15-8992e.png 163w,\n/interpreter/static/24-sharing-constants-ca3771fc4b28fb4d4e871ed07bbb0d15-ae0a7.png 325w,\n/interpreter/static/24-sharing-constants-ca3771fc4b28fb4d4e871ed07bbb0d15-83a8b.png 650w,\n/interpreter/static/24-sharing-constants-ca3771fc4b28fb4d4e871ed07bbb0d15-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Oftentimes, I know I’ve needed to share things like colors, breakpoints, etc. between my CSS and JavaScript. I’ve oftentimes resorted to using a brittle build process, which inevitably can fall out of sync or require tweaks at some later point.</p>\n<p>Why not use one source of truth for all application constants, and why not make that source of truth a JavaScript file with CSS in JS? Sure makes sense to me!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABCklEQVQoz41Sy3KDMAzkbNnG4ITg8pgBQnrqoaeUmfT/P2srQ5whjNNw2JEQ1npXcqKUgoeUPso5LvkzpJQz1D3O+bp+P5eEYiDTKUEbghAEIno06EDM0DrlXD8RhTxZf3gSVx1xnb4x9APatnkcProK/fiJru9RNw3S1OwgJAFXfuA8jMjzHMaYRTlJuKHC1/XMF3Wo65r/pe8IfaNCZiWKSs1k5Os6WCOGYBcL1jN8qdAryWyObuxR1S1OpUNxKtieji5rSxaZoUDD8/m93TBNP7hcRpSlxeFgeUEySvS/Qo7WWmSZYVXLjJZtx59IDMn2Vv9UPMG28R1R1HKsKbbJXQpfzWSv1YA/6l0B7/lr310AAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="sharing constants-example"\n        title=""\n        src="/interpreter/static/25-sharing-constants-example-cce7156abf3a1cbc2ca02850606a3298-83a8b.png"\n        srcset="/interpreter/static/25-sharing-constants-example-cce7156abf3a1cbc2ca02850606a3298-8992e.png 163w,\n/interpreter/static/25-sharing-constants-example-cce7156abf3a1cbc2ca02850606a3298-ae0a7.png 325w,\n/interpreter/static/25-sharing-constants-example-cce7156abf3a1cbc2ca02850606a3298-83a8b.png 650w,\n/interpreter/static/25-sharing-constants-example-cce7156abf3a1cbc2ca02850606a3298-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Much credit where credit is due, many of these problems were identified in a formative CSS in JS presentation by <a href="https://twitter.com/vjeux">Christopher Chedeau</a> (a developer at Facebook), who delivered a great presentation highlighting many of these issues way back in 2014!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAAs0lEQVQoz52S6wqFIBCEtTKsFCu7ib7/a+5hFgxOBJU/BnVxP2YvQghBT6qqiqSU9OavuAsiOUOglBIdx1EObJqGvPe0LAufSimOtW1Lfd+zuq57D4SQ5Jz7SzTGkNaa3dd1/Q0IZ/u+MwTuciuKSs4OrbXs6Ap7AN/D0L+scRzZ8TzPNE0T3z/1cBiGEwDYuq60bdsJxhut+FRyLguQEALFGPleVPJ1hbA2WJk8nKKhlOoHbhrkHLTOEesAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="facebook problems"\n        title=""\n        src="/interpreter/static/26-facebook-problems-30b37796995fdbbea2bcdefb7920aaec-83a8b.png"\n        srcset="/interpreter/static/26-facebook-problems-30b37796995fdbbea2bcdefb7920aaec-8992e.png 163w,\n/interpreter/static/26-facebook-problems-30b37796995fdbbea2bcdefb7920aaec-ae0a7.png 325w,\n/interpreter/static/26-facebook-problems-30b37796995fdbbea2bcdefb7920aaec-83a8b.png 650w,\n/interpreter/static/26-facebook-problems-30b37796995fdbbea2bcdefb7920aaec-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Early in my career, I was in a meeting where I criticized a proposed solution that I thought to be poor, and left it at that. Another person in the meeting said “If you can’t bring anything to the table, then don’t say anything at all.” While the character of the message was delivered imperfectly, the content of the message still resonates with me. It’s easy to criticize something. It’s far, far harder to criticize something, and propose something better, or that could be better.</p>\n<p>At this point, the discussion will shift into what CSS in JS is, and how it can fix some of these aforementioned problems. In other words, let’s bring something to the table!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAADBUlEQVQozx2T20+TBxjG+8dsJroNGNQevx74oC2Vnii0sSD0AD1z6OmzpZRKS0UdpYpKNcBwzgmCimyRzKhZ5pJtZovzZktczHa1i/0Xv33ZxZP37nl/z/vmUeQrOVrbDVKVJKK7D1/Qy0QminQ+QX25wLnsDOKAkX7fEIu1IvO5IK5ggEHfGQwWA3pRR5/TTK/diMqkRiFV8izfbJCoNBgcj+MLBfDEJvhqOc52dQKTx44gGzo9/TxbnaGwGMMbH8MmLzfaDBiseixuEfOAgFLoQZHI5RhONRiONxlJNAmkmzjji+xciNHKuHHEQ6TzCX79vMTe7lUyrSU8EQdWVy99DpMsI+KgGZ2opkvdicLqzyD6JExDM2jsSVZvbhEqX+N6scBa3oN93Mdvu3n+fN/ih3frvPvrFcV6HNFhwOoR5WmUSQW0vWo6VbKhZiCKbjCN1S8RnC6TzkqMhEtclXLsriQ4vjTFy+fTHP1R5OmbPM/eLrDxIInd20e/HLVXphQsOk7Lcf8n7BaG6BBGySy0WG1fx+8JszEh8V05xz9fpHm1medp08+9R1G+fl3k8Kc8zS9DDAyJ8u3MmGQ6fb8OjUlFj64bxakuIx9/akQtBtBZgyi1NoLOEZ7XM/z9uMjKjsT9lo+NWz4WNry0H07SfpBgdGoYi0tEYzwtS4XQp0djVqHoULv4qFPNyQ5Zn6jRmsyMSWFub+X599sLVFoBwkUTxdUzlFsOGm0vjdtnqa6FsHlsaEUVeosWQf620qBE0SUE+PCUmRMnlXxwopvOHjPR8ymWWyneH69Ra8eYrVnINGxkL1qYX3dz41FENpzEfdZFfj5Fdi5Cci5MrjqLwugK4Y6FiNQihKpTOILnWFmXKF2OUaxNc2Vnivqmn+beODeehLn3/TQHr+c4enKRO9USh5cqHFQL3G3V2D3aQeGMRll/u8Wt3/dovtmm/uIKk9eSjCyOya2xsyTHu3x3lM3jGPs/z7H/4yyPf8nxzWGZg/kC+3LT9ktZ7n+2xJ29Nv8BXVzsXy++jUoAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="benefits intro"\n        title=""\n        src="/interpreter/static/27-benefits-intro-cb5196bc690b85743a91570dd3f365d8-83a8b.png"\n        srcset="/interpreter/static/27-benefits-intro-cb5196bc690b85743a91570dd3f365d8-8992e.png 163w,\n/interpreter/static/27-benefits-intro-cb5196bc690b85743a91570dd3f365d8-ae0a7.png 325w,\n/interpreter/static/27-benefits-intro-cb5196bc690b85743a91570dd3f365d8-83a8b.png 650w,\n/interpreter/static/27-benefits-intro-cb5196bc690b85743a91570dd3f365d8-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>It’s not CSS in JS <em>or</em> CSS. It’s CSS in JS <em>with</em> CSS.</p>\n<p>The CSS you’ve formerly written can continue to be written with this paradigm shift. The best parts of CSS are maintained, and, for the most part, the ills of CSS are remedied with these new approaches.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAC+klEQVQozx2S7U+aVxiHn2VtzbQztmK7rU67qugYoGhFKIvIqAh1sy0oRes0Wl8Z8uYDogiKiA+Igta02M66JW0ak37bl33eX3bt2A93cuck5zr377qPJN3VIn2v4UpHH9cejPCldYyGx3NoI3ma5jZpnE1iTh5h26nwa+GM+4lD7PIeL8rnPC//ha/4J49FWVIlflyIIV3VmqjSmpHUvVT1P6Vlfp2h3Qou5RRX9hXD2ye4988YLf3N2OE5I6J37J3yJH8qzt/iLp3THszQs5bHnjtBqh4co/FFjLY/0uhieQwxhZ5IlqcH53Sul1HHivRnXtG9UcYQyeERoPGT99hyFRomQtz7PYQtdYgmkKJ3+wjpq6FnXDE5uTcTRZs4QB3YoitRxLhZxpQ6xpgs076SRSPgrf4MIwJkiu6hW1VQL6f45qFHAEs8KpzSGUwhdcyE0c7LWNYUDOEdMUGF5LsLgpUPTG4qhHJllisfWTz7xOt//yP69gL53SeyH/8h8OZCPFjCLiYzrmbRB9NC3fgifeEtBjcKWJMHNE+H0cxGcSpv0Mh5bnmWqDG6+PrnJ/SkjugNZ2kfXaJ1bp1eWUET2kEnFGnFnc7wNtK31mF+kXcYiCvo/Jvc8S3TErqMWKI78xp9psIP4wGavX66YgVahNPLX3DTNYVVqHmYeUl3ZBfL1jFakVD6TgD1CzItszLVAx5uOCdoW0yKhZQwCY9t3iXq7T5ujwUwyAWaxleo94Xoj+fxigU5k8L3TITrfQ5UJjtSg2WIOvMg6oU1al2TXBd1071Iw3ScWyMz1BmHuNHvRuWcosb2jPuhXewbBwyIuF6lwnC6hCuewzYxT63OhHStVY9Uf4eOqSB1AlZlG/0MrtJa+EJvQ+UN0DgZxeBP80CocG2/xL5exJbY/1xWMalDzhLM7DO/mkCSalVIqibuume57fAhmX+j2jVNjaZPCO7g6mXv8WOOF+hZydD8PIojfcwjAbZtFBlIFBhe2yOcztH2Uxf/Ay/wxV7ltd5tAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="not broken"\n        title=""\n        src="/interpreter/static/28-not-broken-d3629887e93a711793bcb09a860bf148-83a8b.png"\n        srcset="/interpreter/static/28-not-broken-d3629887e93a711793bcb09a860bf148-8992e.png 163w,\n/interpreter/static/28-not-broken-d3629887e93a711793bcb09a860bf148-ae0a7.png 325w,\n/interpreter/static/28-not-broken-d3629887e93a711793bcb09a860bf148-83a8b.png 650w,\n/interpreter/static/28-not-broken-d3629887e93a711793bcb09a860bf148-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Maybe by recontextualizing the problem and bringing the power of JavaScript to CSS we can solve some true problems with CSS.</p>\n<p>Maybe there’s actually some validity to this practice.</p>\n<p>Maybe it can really improve the quality and maintainability of your application.</p>\n<p>Maybe we will see!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAAmElEQVQoz2PgkVb4T03MAGNwS8mTZQC6PgZckiA2umJkMVxsBnQBLigbGXNCMbIBfIRcCJOw0tH8H2Ci999ZX/u/pbbmfxsg3xqInYB8KyjbUU/rvwMQWwDlCRooKqf4X1xe6b8IkBaWVQTTIDExOSUwXwgqJghlYzUQ2Stg70lCaC4k74LEuJDEYGysYUizWKZqOhy0BgIAxx4b1Q3eoigAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="but maybe-it-is"\n        title=""\n        src="/interpreter/static/29-but-maybe-it-is-2d0f9cafcc11b614484c2e1021c468c6-83a8b.png"\n        srcset="/interpreter/static/29-but-maybe-it-is-2d0f9cafcc11b614484c2e1021c468c6-8992e.png 163w,\n/interpreter/static/29-but-maybe-it-is-2d0f9cafcc11b614484c2e1021c468c6-ae0a7.png 325w,\n/interpreter/static/29-but-maybe-it-is-2d0f9cafcc11b614484c2e1021c468c6-83a8b.png 650w,\n/interpreter/static/29-but-maybe-it-is-2d0f9cafcc11b614484c2e1021c468c6-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p><em>But</em>, <em>But</em>, <em>But</em>, you exclaim! This goes against everything we’ve been taught about seperation of concerns. HTML in my JS was already enough of a shift, but this is just too much!</p>\n<p>It goes against this hyper-modularization we’ve seen in the JavaScript ecosystem.</p>\n<p>It just <em>feels</em> wrong.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACWElEQVQoz2WTS08TURiGhzlz6dw6M22Z3qDVtggVSqVQBRMBqaGNHSFlIeGmjTYRol2IG9dC3JjoTtmQGJYm/gw3/gnXxh/x+s0ZKF4W75zJmXOe75v3PUdQNQOyEuGSZAW6YcKyXTixBCqT11GfvYHyeAljxSu4RhrJJBGPu1DUcL0sqzSqYJLCJUj0uACqER1m1KFRps1pLN6Zx3RlEtXJcUwRvFgsoVatYKxUIJCCIVFCsF/6AyokvWFk0inYjgPdjELTNYxNN9F5/AFtfxfVqXEs3r6F/Wc9vHh+gKdPuni0t4OZWo1DmSTzZpgUQoXc6Ajyo1lYVhSiNIRyZRWvjn/g+OQXTg8P4Tc7yOdGsbe7g93tLaytPUCn08HKSgOO41KXLLTrEphFOuWRLwkwJqC9/gbvP/7E2Zfv+Hb2CS/3XyNKnvq+j1arhdVmC0tLy0hnshwW+ngOJAleIk6VbIImUSxkcX+1i6ODI3w9PcHnd2/R9e9ifmEBvV4PDzc3sbW1jUbjHmZn56iJYYhMOQ/03MO468AwdCS9BCV5FVMTBdQLGawv1LFcKaMyUUK72UC/3+eduW6MnwRBEDlEVrQBTGQShFTSg0sd6prGpZEiFExQJJtNIeZYuDk3g42NDnK5PIVmwCC/ddPipyIMJIQFAQkepZyg3xbJDxaIBUeBkiPZpg7XNrkUReZ+2bHYPzB5AOOh6LoewgIIbZAk+sjkwcIAoigqvcswTRNxKh6hLpWI9h+MA0UxnJC1oCJNMsY7ZNIl9AJs2zZBLb7uL9jgpqn4DZDQJyKUUMKKAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="lesh tweet"\n        title=""\n        src="/interpreter/static/30-lesh-tweet-2a07cdc492855c5b083a33076d144b7e-83a8b.png"\n        srcset="/interpreter/static/30-lesh-tweet-2a07cdc492855c5b083a33076d144b7e-8992e.png 163w,\n/interpreter/static/30-lesh-tweet-2a07cdc492855c5b083a33076d144b7e-ae0a7.png 325w,\n/interpreter/static/30-lesh-tweet-2a07cdc492855c5b083a33076d144b7e-83a8b.png 650w,\n/interpreter/static/30-lesh-tweet-2a07cdc492855c5b083a33076d144b7e-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>However… seperation of concerns is not the same as seperation of technologies. It is incredibly likely that the rendering of a component will require intermingling between HTML, CSS, and JavaScript, and if we can make this intermingling as clean as possible, that’s a win for code clarity and maintainability, not a loss.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABG0lEQVQoz62S7UvCUBTGB0VWFpaQlptumWWOvIoZfQqCInszanO3bbmiZQwi6Ev//9M9Y4qssH3Yhx/nnOfce164V1qRNRDZkhoyjpMSvyNNi2SXtyoh0/4s4sNI8U5rag3r2i5y5aqwNeSFT1ougnKk5bf3hL7z94RjqOO15cALPsBfR3BGAZy3APfuM24MC9aTB9t/hyt0//MLPYMnX3lVxHPFMo4adXyfdjE8Zrht65gvKMgmXZk4ueqjbw9xKbqfP3A8cg7f5rAHJlzvBRemjbM7Az2Th2fjj/mroNxgqLa60NghtGYHJb2FjXoTm/sMKmmsg8pBG6rIKTqbvTKxWFSwUJCRiaB4KSIz0ZVJ7t+VU/mHaZJ6wR9dAC0w47XBOQAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="seperation of-concerns"\n        title=""\n        src="/interpreter/static/31-seperation-of-concerns-9b96cd9af72f4fe75f362e95d8fe1361-83a8b.png"\n        srcset="/interpreter/static/31-seperation-of-concerns-9b96cd9af72f4fe75f362e95d8fe1361-8992e.png 163w,\n/interpreter/static/31-seperation-of-concerns-9b96cd9af72f4fe75f362e95d8fe1361-ae0a7.png 325w,\n/interpreter/static/31-seperation-of-concerns-9b96cd9af72f4fe75f362e95d8fe1361-83a8b.png 650w,\n/interpreter/static/31-seperation-of-concerns-9b96cd9af72f4fe75f362e95d8fe1361-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Consider this great slide by <a href="https://twitter.com/areaweb">Cristiano Rastelli</a>.</p>\n<p>The component driven model blurs the line between HTML, CSS, and JavaScript beacuse there will inevitably be shared concerns between a single component which is composed of these “disparate” parts.</p>\n<p>Consider also Vue’s single file components, which are a perfect encapsulation of this model.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACMElEQVQoz3VSUUsUURSeKEKDkB5677kHEaKCEsQQwxcjgoxge9DAoHoI6sENAisSCrFM3dZcNIcVa9HWIp/8A71UEthTYQ9tie427szsvXfmznyde2emlqIPPu6Ze8/95pxzPwMEz/PgCQ6EkhjQTggEPq0qpq8wRBBEseAMrmPDsatgNVfH6m5ybqhkBZt5+LKxjfXNKjFavxJ9SlQ5vu/rvIrDsVll2LJZtFY5xRyJjuH5UgcPX6/C6BzBjjMZGKcnYJwaQ0NPFt/KTlQZdaFwq7CC3uwi+qeKuJRbonUJ12aX4Yro3PBlVOrC2zUcuTmFjrsmTtwx0Tb4DF1DearA1SPgQui8gcUCUrlJ9M7kfvPynEmCIq5QRspjq49hPDKw50kjGjK7sWtiJ/Y9bULJLQHUBKPZKaRXhnFh4QYuFgfQV0xrXn1zG67H4gqDaDYvPxVwfPoQuubacTLfhg6zFd3znSjXtuh9AvBYcP5VGuOzKWTzfZqTxOkXV6gDNxKU9EJqSqE5DhwwgJYmoHkvcLAROLwfwUYJggbOWU1fWMtcx7vBHry/l9L8QPw43A/JYsHA96C6l8vPIbubIc+3Qp47huDsUYhUOyrrn1G2LPz4XkLlpwWrkIWVG4I18yDmfWznRxGKuGXECGPX/UPypZQSgoauvKY8yznXFELFAowxygv/+DDx0P9Q70P1OLbjwHFdvafEGK/zYRIkwn9TQVWWCCo4JKiqTu7V//gXX7n7xEQnydcAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="seperation of-concerns-image"\n        title=""\n        src="/interpreter/static/32-seperation-of-concerns-image-fdc023a930634b0e90efc577635217fc-83a8b.png"\n        srcset="/interpreter/static/32-seperation-of-concerns-image-fdc023a930634b0e90efc577635217fc-8992e.png 163w,\n/interpreter/static/32-seperation-of-concerns-image-fdc023a930634b0e90efc577635217fc-ae0a7.png 325w,\n/interpreter/static/32-seperation-of-concerns-image-fdc023a930634b0e90efc577635217fc-83a8b.png 650w,\n/interpreter/static/32-seperation-of-concerns-image-fdc023a930634b0e90efc577635217fc-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Let’s start with a definition by contradiction, or in other words, what CSS in JS is <em>not</em>.</p>\n<p>CSS in JS is not, or at least not exclusively, inline styles. While inline styles are certainly an example of what CSS in JS can look like, they’re not necessarily the best implementation for a variety of reasons. First and foremost, only a subset of CSS is supported, so things like pseudo styles (<code>:hover</code>, <code>:focus</code>, etc.), media queries, and a number of other useful and <em>required</em> CSS functionality is not supported with this implementation model. Additionally, inline styles can be difficult to override, which makes components that use them historically harder to extend.</p>\n<p>You can certainly go this route, and several libraries exist to allow for this implementation while adding some of these needed features back, of particular note is <a href="https://github.com/FormidableLabs/radium">Radium</a>.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABCklEQVQoz2PgkVb4T03MAGNwS8mTbQiyXgZkARDNJSn3n1NCFojl4GwOMB+CQWpgbA5xGRS9GC7klVH8L6So9l9EWR1M88kq/RdT0fwvpqr1X1RZ47+wkhpYDUheGCgvoa4NVoPhQhDmBWI2Uan/2SXl/9v7J/6vbGz539Y34X9aftH/pJz8/xFJaf9rW9v/hyWk/G/o6ALibrCcgLwK2CdYvQzympSG7n9lA9P/WuY2/00dXf/L6xr+l9Mx+C+jpfdfw8zqv5K+CRirGpuDXQgzDKuXYYayi0mDXcsiLAEMJ0T4sQHF2YHhxi4mA1bDiWYYioHoEqCwAmFkeWQ+L47UwUCzdDhoDQQAZ5woeYAtIEsAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="is not"\n        title=""\n        src="/interpreter/static/33-is-not-78258f166929d11641c453cd30f0342a-83a8b.png"\n        srcset="/interpreter/static/33-is-not-78258f166929d11641c453cd30f0342a-8992e.png 163w,\n/interpreter/static/33-is-not-78258f166929d11641c453cd30f0342a-ae0a7.png 325w,\n/interpreter/static/33-is-not-78258f166929d11641c453cd30f0342a-83a8b.png 650w,\n/interpreter/static/33-is-not-78258f166929d11641c453cd30f0342a-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>This is an example of an inline style, and one of the first methods advocated for CSS in JS.</p>\n<p>This is <em>not</em> what I’d consider the best way to write CSS in JS, although it does have its place (particularly if props change very regularly, or in other instances when performance may suffer with rapid changes).</p>\n<p>As noted, you lose out entirely on some of the best parts of CSS, so this doesn’t seem, to me, to be the best implementation of CSS in JS, or the one to reach for most readily.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABOElEQVQoz41SbW+CMBg0MXNCXynIMJsMjMw3RIeLM/HLlhn3/3/RrUXdCBPlw+Wg5Tmu12sxxkApRcGEwPEf0M/WCMcJRrGP6XSM4XAIpZy/70pcXWtVN2zLwlMcY7nOIIREu32HTucetk0LVMVqBQ0fnxk4o9jsJvj43GGRzZEkI/QHDh4jAc55M4dltrTL5zDWx50gGjtIsh48X0DI008JPeKC8D+HBt2uhTxf4ftwwNt2jln6AsEUuKCFqHQ0FMMlMzWCXaTpHPv9F943W6xyfew0QLKUGC0UwkTqCLRjwZtkSCGlRBAE+mZVAS4teAGD8ngB49K2zMwRJvdaQaKr47ouZrMpwnDwe1GEXM/uqqBxl+eviOOoeC/HUW7DTUEz3Ot58H1fd45cHGhc7DOfe1YndkvwBzzPB3J7K2bhAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="inline styles"\n        title=""\n        src="/interpreter/static/34-inline-styles-821e9a64959793e04b1684f2b3fff8d8-83a8b.png"\n        srcset="/interpreter/static/34-inline-styles-821e9a64959793e04b1684f2b3fff8d8-8992e.png 163w,\n/interpreter/static/34-inline-styles-821e9a64959793e04b1684f2b3fff8d8-ae0a7.png 325w,\n/interpreter/static/34-inline-styles-821e9a64959793e04b1684f2b3fff8d8-83a8b.png 650w,\n/interpreter/static/34-inline-styles-821e9a64959793e04b1684f2b3fff8d8-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>It’s high time to begin talking about what CSS in JS actually <em>is</em>. We’ll go over some high level goals of CSS in JS, as well as some common patterns and coding techniques for what it can do for a modern application.</p>\n<p>Additionally, detail will be provided for how it actually solves the aforementioned “problems with CSS”.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABQ0lEQVQoz2PgkVb4D8LcUvL/YWxSMbJeBmQBGM0rowhXAGLzyhBnGIqBMAl2Men/TELi/znEZf5zSsj+ZxWV+s8GFOOSlPvPBVTDARQDsUFyIHF0/QzINoEUhiem/s8tq/yfVlD8PyQ+6b9XaOT/yOT0/2GJKf9dA0P+l9U1/je0dQSLpxeW/BdWVAPrQ3EhCPPJKv1nFBT7n5ST/3/OoiX/Kxtb/ndPmvq/b+qM/71Tpv33CY/67xsR87+8ofm/mZPb/7beCf/r2zr/C8irYBqIHIYgDPKOhLr2fyffwP/23v5gbOXm9d/JL+i/S0DIfykNnf9iqpr/+YGOQA9/BvTAhXkdFBliKpr/RZQ1/osoqf8XVdH4L66qBcZ8sorAsJaBuwxrGKLHGMylyJgDSqPHLEayIZQUSFHDQG5ixoWpbiAA/cgzbOfxQDAAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="is"\n        title=""\n        src="/interpreter/static/35-is-76bc4f37feb628ee58f63f3baead9f18-83a8b.png"\n        srcset="/interpreter/static/35-is-76bc4f37feb628ee58f63f3baead9f18-8992e.png 163w,\n/interpreter/static/35-is-76bc4f37feb628ee58f63f3baead9f18-ae0a7.png 325w,\n/interpreter/static/35-is-76bc4f37feb628ee58f63f3baead9f18-83a8b.png 650w,\n/interpreter/static/35-is-76bc4f37feb628ee58f63f3baead9f18-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>CSS abstracts style to the document level.</p>\n<p>CSS in JS abstracts style to the component level.</p>\n<p>In a similar way that React, Vue, Angular, et al. are abstractions on JavaScript, CSS in JS abstracts upon the base model of CSS and fixes some of its inherent issues!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAAnUlEQVQoz2P4Xxr0n5qYAUT8KwkEY2Q2sRhdP9xAdAliMbp6BmwSf4HsX8UQPoj+g+Si38UQ+i+aC3F6+WyS+//NEU7/98e6/D8U5/r/eILb/70xLmD+hWSP/3uA7GNAsWPxbv9PJbpjuBTDy98KA/5/LfT//7MIRAeAXfgdyv5RBMHfkWh0VzLgCgtyw5EBXYDUWMbpQqqmw0FtIADGrVudQ804BgAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="abstractions"\n        title=""\n        src="/interpreter/static/36-abstractions-e1b82cc34970af4ee11349f29e1a5c45-83a8b.png"\n        srcset="/interpreter/static/36-abstractions-e1b82cc34970af4ee11349f29e1a5c45-8992e.png 163w,\n/interpreter/static/36-abstractions-e1b82cc34970af4ee11349f29e1a5c45-ae0a7.png 325w,\n/interpreter/static/36-abstractions-e1b82cc34970af4ee11349f29e1a5c45-83a8b.png 650w,\n/interpreter/static/36-abstractions-e1b82cc34970af4ee11349f29e1a5c45-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>With naming methodologies like BEM, we can get pseudo encapsulation. With Shadow DOM, we can get true encapsulation at the component level, but this requires a polyfill in many browsers and isn’t quite at a point where it’s the perfect solution for any application.</p>\n<p>With CSS in JS, we can get true encapsulation at the component level, today. Under the hood, a unique hash will be generated for the class name, and a real stylesheet will be created with this class. This allows us to target a unique element (a component!) today, without polyfills and in an automated way so we never again need to waste cognitive cycles constructing meaningful, isolated class names.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAAsElEQVQoz2P4Xxr0n5qYAUT8KwmEC4DYpGJkMxiQDSLGBejq0PkoLgTRP4sD/v8B0n+RMEj8VzHCNb+BbBD+i6QPxYXIAkfj3f5vjnD6vz3K+f++WJf/G8Id/++Mdv6/HkhviXT6vx8otjva5f/aMMf/h+NcUQzFaiDI5q+FAWD8DYi/FPoD2f7/vxVB2F8K/P//KILIfQfSOMMQZziWobHL8IcrhgupFstUTYeD2kAA231aqZ6hYlkAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="scoped styles"\n        title=""\n        src="/interpreter/static/37-scoped-styles-d8568b580e63e52ea959d69c93aef929-83a8b.png"\n        srcset="/interpreter/static/37-scoped-styles-d8568b580e63e52ea959d69c93aef929-8992e.png 163w,\n/interpreter/static/37-scoped-styles-d8568b580e63e52ea959d69c93aef929-ae0a7.png 325w,\n/interpreter/static/37-scoped-styles-d8568b580e63e52ea959d69c93aef929-83a8b.png 650w,\n/interpreter/static/37-scoped-styles-d8568b580e63e52ea959d69c93aef929-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Leveraging the full power of JavaScript lets us extend CSS in new, interesting ways. We can create a “mixin” just like we can in SASS, LESS, etc. We can use helpers to lighten a color, darken a color, share style code, etc. We can, of course, easily share constants and modify them, as needed. We can do all of us in a language each of us are familiar with (JavaScript!), and without learning/remembering syntax for doing so in SASS, LESS, etc.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAAnElEQVQoz2P4Xxr0n5qYAUT8KwkEY2Q2sRhdP9xAZJoUjK6HAZvEXyD7DxCD6WIIhrH/QtUhs5H1Yrjwaqrn/70xLv+3Rzn/3xrp9P90ojuYvSHc8f82IL072vn/pRSP//uAao7GuxH28o+igP/fCiH4a6H//5/FEPYXIBsmDlLzHYrRg4sBV1hg4DLiwhHDheTEMlYXUjUdDmoDARckW0TptERbAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="powerful"\n        title=""\n        src="/interpreter/static/38-powerful-4e8acac3f61bdfdd13defddfc5d83442-83a8b.png"\n        srcset="/interpreter/static/38-powerful-4e8acac3f61bdfdd13defddfc5d83442-8992e.png 163w,\n/interpreter/static/38-powerful-4e8acac3f61bdfdd13defddfc5d83442-ae0a7.png 325w,\n/interpreter/static/38-powerful-4e8acac3f61bdfdd13defddfc5d83442-83a8b.png 650w,\n/interpreter/static/38-powerful-4e8acac3f61bdfdd13defddfc5d83442-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>A real stylesheet gives you the best parts of CSS (media queries, pseudo styles, flexbox, etc.).</p>\n<p>It lessens the bad parts of CSS (globals!) by scoping to a class name</p>\n<p>If you already know CSS, great! CSS in JS presumes that you do; the properties, rules, etc. of CSS that you already know and love continue to function just as they do in vanilla CSS.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAArklEQVQoz2P4Xxr0n5qYAUT8KwkEY2Q2sRhdPwOy6TBBUjC6HgZ0id/FgWAMs/VHUQAYg9h/oOJ/oOIgdeiGYnh5WYj9/35v6/8Lg+z+n0p0B/P3xbr8XxJs/39xkD2YnuJr/X9VqMP/HVHOGC5lQOaA6C+F/v8/Fvj//5Dv//870BXfoS4BiX0uQMj9gMoh68Xq5f9lSBg5vMpwy2H1MjkxjB7TGLFMtXQ4qA0EACdoWVrPEitzAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="real styles"\n        title=""\n        src="/interpreter/static/39-real-styles-a4451a88b5301e8c08d9efa5929d7f49-83a8b.png"\n        srcset="/interpreter/static/39-real-styles-a4451a88b5301e8c08d9efa5929d7f49-8992e.png 163w,\n/interpreter/static/39-real-styles-a4451a88b5301e8c08d9efa5929d7f49-ae0a7.png 325w,\n/interpreter/static/39-real-styles-a4451a88b5301e8c08d9efa5929d7f49-83a8b.png 650w,\n/interpreter/static/39-real-styles-a4451a88b5301e8c08d9efa5929d7f49-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>As an example, here is how styled-components (a library we will soon talk about) constructs a real style sheet. A template string is passed to the library containing the CSS styles. From these styles, a unique hash for a class name is created, and applied to a style tag in the head tags of your application. This constructed class name is automatically applied to your component!</p>\n<p>It’s an automated process to a previously manual problem, and you get the benefit of writing <em>real</em> CSS!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABcUlEQVQoz41S226CUBD0sQLnxh1BQATUppoqpq3FSxv7/780XbA1rRr1YTObnN3JzOzpMMZgGAZa1HVIx4WdZEjiGEk2hAxC+H2GIGWIC9mW7UjaYbRz2PvL0TkjtB24RDYaFQjDAGmcIs9KZIMcgkt0H/SfeaPF4+5lQgPSlJhtAlQfPTxvfKSliwFVL7Jphh9VNQpvExIKQdZygWQkECQc0VBAKFLF9LPlOwk5dLKua0aLGhXnRCrkSWZ3EpqmicAPYToCvmfDtRR814OSFuWntTO6fmeGjSLHtTB/G2BcWZi+eFjUPiZzB8PCx3QWwqV3pcQ/kqsKlZJISok+5RgTphPKcywQptQXCnHiIgqdVuWlLE8IGV2ZjlIy5I8eWe2BGRKCKcpQUX/IsslUKXXbcrerIc0irL+esKqXqOt3LKo5drsN9vtPbLdrLJcVVqtX+qdlG9FVy82ATR97XE4gSUmjgnMOKeWxhLis7rf/BgmlDD+ewhIgAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="real styles-example"\n        title=""\n        src="/interpreter/static/40-real-styles-example-5a0d73b416bf52c4d1120e609d6150ba-83a8b.png"\n        srcset="/interpreter/static/40-real-styles-example-5a0d73b416bf52c4d1120e609d6150ba-8992e.png 163w,\n/interpreter/static/40-real-styles-example-5a0d73b416bf52c4d1120e609d6150ba-ae0a7.png 325w,\n/interpreter/static/40-real-styles-example-5a0d73b416bf52c4d1120e609d6150ba-83a8b.png 650w,\n/interpreter/static/40-real-styles-example-5a0d73b416bf52c4d1120e609d6150ba-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>CSS in JS brings CSS into the component era.</p>\n<p>We’ve removed globals from our JavaScript, why should we not do the same with our CSS?</p>\n<p>We’ve established the component model for our JavaScript, why not bring CSS into the fold and enhance upon this model?</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAAjUlEQVQoz2P4Xxr0n5qYAUT8KwkEYogAhE08RtaDYiA+GptF6AahGIiuGd3QP2hyIPwXzTIML8Po62me/48nuP0/l+T+/xiQPp/s8f8CEF9K8QCzL4IwkH0WKH811RPDUAwDfxQF/P9aGPD/O5QG8X8WQ/jfChE0SBzEJtrLpGC8XiYHY3UhVdPhoDYQAK6/XIiQzqoVAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="component styling"\n        title=""\n        src="/interpreter/static/41-component-styling-8692895783772a30e0390d51b0c99f99-83a8b.png"\n        srcset="/interpreter/static/41-component-styling-8692895783772a30e0390d51b0c99f99-8992e.png 163w,\n/interpreter/static/41-component-styling-8692895783772a30e0390d51b0c99f99-ae0a7.png 325w,\n/interpreter/static/41-component-styling-8692895783772a30e0390d51b0c99f99-83a8b.png 650w,\n/interpreter/static/41-component-styling-8692895783772a30e0390d51b0c99f99-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Using JavaScript to write styles feels incredibly natural and intuitive, especially when considering the previous arguments we’ve made concerning sharing of constants, using JavaScript functions as mixins, etc.</p>\n<p><em>Additionally</em>, we are creating distributable, single import components that are entirely encapsulated. No configuring of loaders, no loading of additional stylesheets. One import, highly shareable, highly consumable, and highly simple!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQoz2P4Xxr0n5qYAUT8Kwn8D6NJxcj64AZiMxSb7chq0NViGIgsiKz4Lw4L/qKpxenlq6me/08kuP0/k+T+/1i82/8rQP7FZI//55I8/l8A0iDxyyke/08nuoPVohvKgO7070UB/78U+oNpEP5VHPj/B5T9DYpBbJgY0V4mBeP0MjkxjdXLVE+Hg9pAALpbXI+rHHI/AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="java script-styling"\n        title=""\n        src="/interpreter/static/42-java-script-styling-30988cb19901d846b065e67c25e55eaa-83a8b.png"\n        srcset="/interpreter/static/42-java-script-styling-30988cb19901d846b065e67c25e55eaa-8992e.png 163w,\n/interpreter/static/42-java-script-styling-30988cb19901d846b065e67c25e55eaa-ae0a7.png 325w,\n/interpreter/static/42-java-script-styling-30988cb19901d846b065e67c25e55eaa-83a8b.png 650w,\n/interpreter/static/42-java-script-styling-30988cb19901d846b065e67c25e55eaa-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>CSS in JS gives us truly unlimited semantic elements.</p>\n<p>HTML5 gave us <code>header</code>, <code>footer</code>, <code>section</code>, <code>aside</code>, and others.</p>\n<p>CSS in JS gives us truly unlimited semantic elements that are semantically clear at a glance: <code>Logo</code>, <code>Branding</code>, <code>Toolbar</code>, <code>Copyright</code>, the possibilities are endless.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAAr0lEQVQoz2P4Xxr0n5qYAUT8Kwn8D6NJxcj64AYiG0oqRteH4cK/SBjE/1kU8P9PMYL/Byr3Cyj2uzgQw1AGdIGd0c7/FwTa/V8f7vh/VajD/00RTv9PJrr/3xLp9H8DUGxpsP3/JUC8Dsg+Eu8KNhzZDAb0MPhaGPD/U4H//89A/BGIfwBdCHLll0J/uDiI/g4V/4fNQIzwKEPCyGGGQxyrl6kR0xgupFo6HNQGAgCaQFoMJsClKwAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="semantic elements"\n        title=""\n        src="/interpreter/static/43-semantic-elements-3f5bf969151e06e2669ade791254e03e-83a8b.png"\n        srcset="/interpreter/static/43-semantic-elements-3f5bf969151e06e2669ade791254e03e-8992e.png 163w,\n/interpreter/static/43-semantic-elements-3f5bf969151e06e2669ade791254e03e-ae0a7.png 325w,\n/interpreter/static/43-semantic-elements-3f5bf969151e06e2669ade791254e03e-83a8b.png 650w,\n/interpreter/static/43-semantic-elements-3f5bf969151e06e2669ade791254e03e-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>At a glance, each element’s intent &#x26; purpose is incredibly clear. On the left, <em>some</em> of the element’s meaning is clear. It’s clear that semantic elements have meaningful value, and the fact that CSS in JS gives effectively unlimited semantic elements is an underappreciated win!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABR0lEQVQoz4WSUW+CMBSFfaWtiGQgFBUGKKJgq3Fxm5lZtv//m87aLjg0dj7ctLnt+XrvuR0Mh0MwxkzoPaUUhBJQQi85veocIcScu657pelWHYNuo0MLkvQZYt9gsykhZItpwuGOPGzkFmJboW0bFEV+gT4ExnEMIRpUuxD7lxxFzlWeYr1e4/XtiNl8Bs/z0NdZgZQy8NhH05bIlwEWVYh0Hpl2q1WG41FV3uSIowiO4+DWrh7wz78g8LEVK5R1gFUdK+BEiQnm6RTfX59YLktT4Xg8vgJZK5yEPrJshmn2hLQIkKUTuOpMQ87nD2WHAOccSZI8BjKmhCOGnaxxOEjwJMKizFU1nnokw+n0rrysjdc6rC33pzVSE5VSIgxC83X6xv+C6N1hWCpk5jt0U+xevye892WugP0LNogN9m/LNqHtzm38APQDCrQsXarlAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="semantic comparison"\n        title=""\n        src="/interpreter/static/44-semantic-comparison-40e6d6c7710f74a6f3893c5542da204d-83a8b.png"\n        srcset="/interpreter/static/44-semantic-comparison-40e6d6c7710f74a6f3893c5542da204d-8992e.png 163w,\n/interpreter/static/44-semantic-comparison-40e6d6c7710f74a6f3893c5542da204d-ae0a7.png 325w,\n/interpreter/static/44-semantic-comparison-40e6d6c7710f74a6f3893c5542da204d-83a8b.png 650w,\n/interpreter/static/44-semantic-comparison-40e6d6c7710f74a6f3893c5542da204d-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>The left is the mental model we must keep in our minds when writing CSS centered around HTML. We must be aware that a class we apply in HTML is styled with a class name. We must be aware that these class names can cascade and stack, sometimes interfering in unforseen ways. These cacading rules then become stylesheets in our DOM that can themselves conflict.</p>\n<p>The right is the mental model when writing CSS in JS. Write HTML (JSX) that is encapsulated with component-scoped styles. No stacking. Never worry again about CSS rule specificity (and no <code>!important</code> hacks), and truly think in components!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABAElEQVQoz2P4Xxr0H4T/lQSi0P/LgyEYmxwezIDMgWn4C6Rvpnv9v5bq+f93McIwEP4LxchiWA1ENuxnUcD/x1k+/2+kef7/XOCPqhHqcmyGYRpYFvT/XZ7f/7NJ7v/vZXj/vwV05Tkg+wnQcJAhIMMvpXj8vw60iGgX/gHSDzK9/z/J9vl/G2jgHSD+VhgAtgxEg/h3gZb9xRGuDNgiBWTgrmjn/ytCHMDh+BVqIMj1xxPc/p9P9vj/p5iAgSiSQM0vc3zBBiPLwSIF2at4XQiT/AW0/RjQJacS3f+/y/dDkkeNALyRgs2VYIwWHP+IdSE2jX/xaCQ6YWNzDSkGAgCd/Fj9jvOqawAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="style cognitive-load"\n        title=""\n        src="/interpreter/static/45-style-cognitive-load-5a12c703bfbe7706a1188dea833d88fd-83a8b.png"\n        srcset="/interpreter/static/45-style-cognitive-load-5a12c703bfbe7706a1188dea833d88fd-8992e.png 163w,\n/interpreter/static/45-style-cognitive-load-5a12c703bfbe7706a1188dea833d88fd-ae0a7.png 325w,\n/interpreter/static/45-style-cognitive-load-5a12c703bfbe7706a1188dea833d88fd-83a8b.png 650w,\n/interpreter/static/45-style-cognitive-load-5a12c703bfbe7706a1188dea833d88fd-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>The case for CSS in JS has hopefully been made apparent. These techniques solve real problems of CSS. But, how do they solve them? What libraries exist to implement these CSS in JS techniques, and what does writing code in each of them look like?</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAADEElEQVQozw2S3U+aBxTG3yWORrEKuNZ2cQitK2JARIqUClYQ0KL0i62I0taJiF+I4BhVCrzyaW1t17pMu6RrFrdmH4m7XJosZt3NdtMt2T/023txcnJunvye5zlCn+ZD1B8o6G1vZlynJGQ6Tdh0hoixjWmDdHe3clPbhF/diLejCedZOd5OBSMaJcOdSpxqFd1tJxkxdFG9exPBp1VyZ+A8maCLnZUIX+VW2U4tkB3RsmpVMmNUMecwkBqzkvCaiQ8ZuN19iuvnFATOKxnVKiRhFXpVM4E+HcJSKIi4OMtuZhFxLsTyDQ/3fHZi1nbCOjmhThnJ8WHuR+9RyXxBPZdnbnQIl1Jg4iM5ExKQTy0Rd51hPhZF+NQ/yifOfkb79bgudBB0XGTaaeLr1DRPF26xGzTzZNJGfX2R7785YH9nh71yibXgVRJuC9c1rbhPyZgdc7Lz5CnCZzYt4R4Fd/QtxHQnOMze5Xh/k3dH+/z32yF///glf/28xx/Hb/n33T+8/f2YP9+84ejbfV6J64Q1MqZ6O9jKbfDw0WOEmLWHqEnNcm8LKZOcg7khft2a5nXmFj+kr/I64eRlLsJ35TS/VJMcbiV4mYnwLD5ONeRgXt9AaXWWZ/sv2MxmEOKWsyT7W8hfbqA83MTWoAzx0nts2Ruo2gTmLylY7TzNtl1Pyj9AxtNDwdFM1iiQ1AmsmWQU11fIl8oUxSJCxf0+dV+TNHJq7ka2Pa1su5spOFWUvO2MOazMmgy8SsZYGrvM4oiZ+5MeMrelooJ2MhNmxHyOgiS2USwgPHC38XlolKJLSfWKjJKzkeqQtMM2pjyDGLrOYdZpsfabOcguEx934rb14r3mJxCZIpFOU6nV2cg/oFavI6xFxvCGZvB/3MKClGHGcoLS8EnEaxqiNjU+o5qlgJeZGxM8TC/zIh0lYDfSbTFhGbyIWCySF0WKkuVKrYaQGu/G0GdF26bAr1GwYmwiZ5VRdrWz6++UshR4Hg1wtFvnp8cl9uKTlCW7Dum9Bq4MUa/W2CwUKFWqVCXS/wEnpbOvFJtEPgAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="libraries intro"\n        title=""\n        src="/interpreter/static/46-libraries-intro-7dbb0e8a59141dfb98f7009d8fa2c311-83a8b.png"\n        srcset="/interpreter/static/46-libraries-intro-7dbb0e8a59141dfb98f7009d8fa2c311-8992e.png 163w,\n/interpreter/static/46-libraries-intro-7dbb0e8a59141dfb98f7009d8fa2c311-ae0a7.png 325w,\n/interpreter/static/46-libraries-intro-7dbb0e8a59141dfb98f7009d8fa2c311-83a8b.png 650w,\n/interpreter/static/46-libraries-intro-7dbb0e8a59141dfb98f7009d8fa2c311-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>First, a caveat: most of these libraries are tied to React. However, not <em>all</em> of them are tied to React, and I’ll specifically point out libraries that do not require React.</p>\n<p>In general, libraries that simply export a className hash (which can be used as a <code>className</code> in the consuming component) are typically framework agnostic. Some of the most interesting libraries expose several libraries, some of which can be used in any framework, and others that specifically target React.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACpUlEQVQoz1WTS3MaVxBGLzMwAwMDg0AMmiEgIxAgCRj04ikJZPS0BUocVWS7ZCuPTbKzvUlcrsSVSsU/+6ShskgW36Zv93dP3+6rBtffML69Z//4FN9N01h3qT3xmFxccffjL/RPxuh6RGSiaRGRgVIarcMBl9+94eTmjuHVnMHFDfuTC1RwPKV3eUuttUtRDA8aJSpemt1OkxcPj7Q7HUwzRiikL43DYZOQGNZbAZPZt/TOnjG6nNGdXtPuH6Mq7QPaR2dsNtvUijmCsovnRCmXhPJc4pUSZlgXKvU/be40CUYT0Sk9MVuo1RuhCvU2xZ19KsEh5fUCz54OmV9NeXzziruX97yYX3N20iO3muNY2u92ewRBh/u3P/Dqp59pdod0huOlebt/hMqXG2x39tio1cllMzw+vObDu3d8//aB2e2Mv7984a8/PzO7PufTb7/y4f17fv/0kY9/fOZmPqfguUyODtntD6m291BrGw0KBR8nmcSyEuhhg1jMwrZi2HaC6fk5p0+nfH1zwXh4gGFEyXs+O51dnhQ9qv4KnWCb2tYWiaQjhKUKtpjFxCxup7DiNvF4gmg0IcOwWPM8kikHN5smk3ZkOBEiRoxqs0O1XiebtPD8AuuVTZLpDMotlkmlUhhSvEg0ZKJ6OIqSQhUKy5kYrfn4xa8wrThKzhaXZ3J5nExuOfW4QGRXV8lKTGVcj0gkiiZ7lrDTrEowLTclBX9hlnLSVAolihLLREwKCRvf93HzHpmsy8pKdgljCIzjSMu2FJr/UpU3qgyGIwIZUrfbpT8Y0Nja5nk+z9iyODJNbvMue7KbrSBgOBrR6/eX9Urp8uY2KmbZQhgjLIoY1pJWlzaUChGSnxGNWkSFSmmyi6GFtP/so7Z8Gk0LL/N1Pcw/wo01uLap8fgAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="caveat"\n        title=""\n        src="/interpreter/static/47-caveat-01eefdff70857264c7de7cd2ad7b5604-83a8b.png"\n        srcset="/interpreter/static/47-caveat-01eefdff70857264c7de7cd2ad7b5604-8992e.png 163w,\n/interpreter/static/47-caveat-01eefdff70857264c7de7cd2ad7b5604-ae0a7.png 325w,\n/interpreter/static/47-caveat-01eefdff70857264c7de7cd2ad7b5604-83a8b.png 650w,\n/interpreter/static/47-caveat-01eefdff70857264c7de7cd2ad7b5604-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>styled-components is what I would call the “gateway drug” to CSS in JS libraries. You author using template strings, so you can write CSS not as an object, but as a string and dasherized just like it’s authored in CSS.</p>\n<p>This means that styled-components is probably the easiest to get up and running, and I would recommend it to get your feet wet with CSS in JS techniques. In addition, it’s a great choice for beginning to move off of a formerly vanilla CSS code base, because you can generally re-use most of your existing CSS, with some small modifications here and there.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAAxElEQVQoz6WSvQ6CMBRGeWJQA4I4aBx0MaICovgz6GJ8HifaEsOLfLYVTYNKQhlO2n63OblNr0E6IVQyay1R91Wq91SMaqCKSTcC6cWcqCSW2S9RrfAlC8H8PWg/AbWPoC7fu1uZido/qVHXHRukyLmATca4OwE/H8C8rexWW0jtDYq5BTKcgTqp7FJf6O2Qj058PYNYMTJz2VLopygWNxTBFY/pRcq0hG8pdZKPRHQrEFmjX/6aNVOwKmk7h3W1pk/W5QnV1XgAp9rIXQAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="styled components"\n        title=""\n        src="/interpreter/static/48-styled-components-c2c599d50e53d903f245aae8cc039c62-83a8b.png"\n        srcset="/interpreter/static/48-styled-components-c2c599d50e53d903f245aae8cc039c62-8992e.png 163w,\n/interpreter/static/48-styled-components-c2c599d50e53d903f245aae8cc039c62-ae0a7.png 325w,\n/interpreter/static/48-styled-components-c2c599d50e53d903f245aae8cc039c62-83a8b.png 650w,\n/interpreter/static/48-styled-components-c2c599d50e53d903f245aae8cc039c62-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>The css helper constructs a “mixin” that can be re-used and applied when needed. This can be particularly helpful to encapsulate rules, and then use them conditionally, when required.</p>\n<p>Additionally, you can see here another of styled-components’ great features. Prop injection! This means that props can be passed to these styled components, and then parsed and style rules can be conditionally applied/removed. Very cool!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABK0lEQVQoz5WSW0/CQBSEeZSevReoIqUtbltKuagxStQn/v9/GpdFkEJRfJicZDP5dubsdjjnYIxhP4VUYMJAyxCh6UMrAyk0GImG71jHjE4DGBB0FKFcW7xvKnxsFqhXGeqnFOUqcj5y4t57DL4AZN4sBUM8YbhLCcOMwGXXJe5CGTp4tvMK4G4qYxwkdJV7kFzD6NCp56cQP7WvAxJBDQaYPFq8fc5QLRMsn3O8rGeYrwoopf4D3NURgmAXAsmUo3pVuI3dOb/x1YOAvJeIzkAXKwvBkU37uE8MxtZVNwpKapdO+4Raa6+2+u07VBJFXiJNMsSjMax9QFHkyHPrVZYF5vMao3jokgZ/A6UDbm/fG0/31Uh1ePUW4KVP+7v49+5ZE3ga+1q1+b8AVGoFv1U3VXkAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="styled components-example"\n        title=""\n        src="/interpreter/static/49-styled-components-example-59b7638d205ca64217a0f641fbdc9585-83a8b.png"\n        srcset="/interpreter/static/49-styled-components-example-59b7638d205ca64217a0f641fbdc9585-8992e.png 163w,\n/interpreter/static/49-styled-components-example-59b7638d205ca64217a0f641fbdc9585-ae0a7.png 325w,\n/interpreter/static/49-styled-components-example-59b7638d205ca64217a0f641fbdc9585-83a8b.png 650w,\n/interpreter/static/49-styled-components-example-59b7638d205ca64217a0f641fbdc9585-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Glamorous built on some of the ideas of not only styled-components, but also glamor, the library that powers much of Glamorous’ underlying functionality.</p>\n<p>The central difference with Glamorous is that is expects objects (similar to the kind passed to inline styles), but that can also be merged with subsequent objects <em>and</em> that can also accept things like media queries, pseudo styles, etc.</p>\n<p>It might seem more natural to begin using styled-components, but as of late, I’ve found myself increasingly drawn to and really liking the functionality available in Glamorous, particularly with the style objects. Merging, conditional applying of rules, etc. feel very natural with Glamorous.</p>\n<p><em>Note: glamor, the underlying library, is framework agnostic!</em></p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAAl0lEQVQoz82SSwuDMBCE/f+/qwepUKHXeijS2gcWjEm0mOp014AoqPg6ePiYZLMZMmwcpCm2xOkrVkI02ke7Z5ohq7BamyRMYlli2LmgJJBllm9OezVoNh5Za8SXALnrofROMP4ZxeGI3zWkMzUzMjdLCf16w9wjVI9nTXmjdfxZEZlMOWIDvYxryyK3poy1U978H+7K8A8wNVQQTbCzygAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="glamorous"\n        title=""\n        src="/interpreter/static/50-glamorous-2e3b3dd3d895fd97f60f0ec952984e23-83a8b.png"\n        srcset="/interpreter/static/50-glamorous-2e3b3dd3d895fd97f60f0ec952984e23-8992e.png 163w,\n/interpreter/static/50-glamorous-2e3b3dd3d895fd97f60f0ec952984e23-ae0a7.png 325w,\n/interpreter/static/50-glamorous-2e3b3dd3d895fd97f60f0ec952984e23-83a8b.png 650w,\n/interpreter/static/50-glamorous-2e3b3dd3d895fd97f60f0ec952984e23-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>We can begin to get a solid feel for Glamorous’ API. The function takes 0 to n objects (or functions that return an object). Any function is injected with the current props passed to the component, as well as a global theme prop if tying into Glamorous’ exposed theming capability.</p>\n<p>The code here is using the object rest spread syntax, which makes the code slightly more terse.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABK0lEQVQoz42SX2+CMBTFfSO0tOWvtCQgUNxUeJJlJjNZMr//dzprkam4TXkgp8Dtr+fc2wVjDJ7nwSolBGEqIWsNrWtkKkOjG6ybNeoqg64VOOeXequ3a6uLy8v4gbguVkWO7XaDXfeK9UuNRHHI3NaxX7B/gZ5Re7rjOGi7FqevE9o3hf2nQhj58EM+cffc4ai+76MwDoMgQBD6Zw1CUHoFnWtnAq2LsixxPH7gcHiHUtI4DEFMfykxLSHevB7e/qCUIs9zNI0etMhXWKYJspJDFQL3Jh46HKZtgDZq3/fYtBrdvkSyjBCnDIkUEII/B97HqKoKUkoDd8EEGQ6hJi6dG/nHWRxHA8gORwgxbmKTgcy6NldgPIDs+npFvAng/nkYeQpiD0F/Rf8G1nMFUeZ+NyAAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="glamorous example"\n        title=""\n        src="/interpreter/static/51-glamorous-example-61655a75222e7dffbefd0e9ef4fb8953-83a8b.png"\n        srcset="/interpreter/static/51-glamorous-example-61655a75222e7dffbefd0e9ef4fb8953-8992e.png 163w,\n/interpreter/static/51-glamorous-example-61655a75222e7dffbefd0e9ef4fb8953-ae0a7.png 325w,\n/interpreter/static/51-glamorous-example-61655a75222e7dffbefd0e9ef4fb8953-83a8b.png 650w,\n/interpreter/static/51-glamorous-example-61655a75222e7dffbefd0e9ef4fb8953-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Emotion is another excellent library that feels very similar to styled-components because it also allows for template literals to inject styles. The key difference, and a particularly interesting idea, is that it ships with a babel plugin which attempts to pre-compile the styles that aren’t dynamic, thereby reducing the payload of the resulting bundle.</p>\n<p>In general, I think the ideas of minimizing (or removing entirely!) a runtime are particularly interesting, and will remain an area to keep an eye on as the community matures and develops further processes and tooling.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAAxklEQVQoz6WSQQrCMBREe2DXHkDQC3gDFy7cKILu3VhLr6C21UVstd0INvlJO2KwEiQWGhdDPgP/McOPxwXhWyUXWuZs82y7ns00wVJVUKpGVdV6/gVqBTYJBEkwliI6J9jHB7BLqr3OCc2FYxIjWAfYLneITol75WapBuAPpwgHM0gBcBKttVsTkiQUOWEy6mM+7iG/kvacEwopUdzuCFc+gsUGGctBSnVPaEI5ka79kiByu/IH9n4fJdcyvb+Ato/tVNlFT7WvVBz8GKevAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="emotion"\n        title=""\n        src="/interpreter/static/52-emotion-6be1ebaaafa157b649360350337a269a-83a8b.png"\n        srcset="/interpreter/static/52-emotion-6be1ebaaafa157b649360350337a269a-8992e.png 163w,\n/interpreter/static/52-emotion-6be1ebaaafa157b649360350337a269a-ae0a7.png 325w,\n/interpreter/static/52-emotion-6be1ebaaafa157b649360350337a269a-83a8b.png 650w,\n/interpreter/static/52-emotion-6be1ebaaafa157b649360350337a269a-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>As you can see, the code feels <em>very</em> similar to styled-components. If you’re looking for a similar API but with some other benefits (and trade-offs), consider emotion as it’s a very solid alternative.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABMElEQVQoz42SSW/CMBCFuRJ7xkvKUpaEgJOAwtIeuqjtif//n16HCFSSsh2exrKePs+bcYeIoLXGqbKx0OzhTIzY9+Csh2EHrbjhO9c5o9MARgpuMED5GfC1X+F7v0G1y1C9pih3A/EpEdXec/AVoK7NhjWmc43nmcIoUyATgTiC9f8B9zuUar0XSCyRn2DISTUS28JYgnUGbf9toFKw/T7mLwEfPxVW2wTVdojd2wSLjcNwHINJZkn68cjMCmHDSJeE1bvFMBGA3Bmr0e1GUPLoQW3Q1cjMhGzZwzj1SIJEdxJXNm8l9uHsnKvF/Lf12zO0BkVeYpZmmE4ShLBAUeTI81CrLAus1xUm05F0Gt0HGgEeXj8Z21+k0dVxTBeB1z7tbdFx9roJbLf9qC75fwHM0QWBa4jxtgAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="emotion example"\n        title=""\n        src="/interpreter/static/53-emotion-example-03214a7dd2b7616aad3d774c4e850ecc-83a8b.png"\n        srcset="/interpreter/static/53-emotion-example-03214a7dd2b7616aad3d774c4e850ecc-8992e.png 163w,\n/interpreter/static/53-emotion-example-03214a7dd2b7616aad3d774c4e850ecc-ae0a7.png 325w,\n/interpreter/static/53-emotion-example-03214a7dd2b7616aad3d774c4e850ecc-83a8b.png 650w,\n/interpreter/static/53-emotion-example-03214a7dd2b7616aad3d774c4e850ecc-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Polished is a <em>framework agnostic</em> collection of utility methods for CSS in JS functionality. Some have described it as the “lodash of CSS in JS,” and that’s a very fair comparison.</p>\n<p>Many helpers/mixins are provided for usage in any CSS in JS library, and functionality such as <code>lighten</code>, <code>darken</code>, <code>rgba</code>, etc. can be utilized in your application to do some really useful things.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAA10lEQVQoz62RwQ7BQBiE+6QouxyEkIgrRyEcJSJpbYlGnDg6egIOErvdSBPeY/y06lJtlMNk/+zm/zIza3Dl4JOYFNFcjrmLk5EGKkgbhbON/NmCSfPr/RPYSHPY8TcYXXcYkrr+NhGWCHwt1fUKVb1Gk86at/wlskBJUnfSwsDrgWsHpnLB5QwsocuEyII6m6OtJtC3HPqHKSonl2Azgn7rMASyxyKpdRmjt3fROC5Q9MT3wCB2CKW5SE5NTRWoAMZUhk95Owz65KFbpjI6fEKi5b8As+kOOq950dmhTlUAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="polished"\n        title=""\n        src="/interpreter/static/54-polished-cd279f2abf3c2e6227429e47ced60feb-83a8b.png"\n        srcset="/interpreter/static/54-polished-cd279f2abf3c2e6227429e47ced60feb-8992e.png 163w,\n/interpreter/static/54-polished-cd279f2abf3c2e6227429e47ced60feb-ae0a7.png 325w,\n/interpreter/static/54-polished-cd279f2abf3c2e6227429e47ced60feb-83a8b.png 650w,\n/interpreter/static/54-polished-cd279f2abf3c2e6227429e47ced60feb-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Polished is particularly useful in adjusting color (hue shifting, adjusting transpraency, darkening colors, lightening colors, etc.), but contains a number of other additional utilities.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABU0lEQVQoz4WSX2+CMBTFfVRKaZF/ImgyhSlKHIpOp9NlyR62ff/vc3bbLIwZlIfmtmnOr+ee2w7nHKZpQlVmMLhRgEk5Q5rFyPMFkiTBeDxClmWIRzGS6QRBPIIdDmEypnV1Rqd+UFX2LTgDjjByYXEJwzDASNjr9fReVcYMghl/IFqNQEaC/iBEvjtiu89RPKdwHFffW5ZVuam7Mtsccm5iXRRIZjHSQsC2RXXfCPynvXZIrQW+j+nDBH4o4EckYPdhd4EqZNvzYVKbwzCiReHbfZ1bt9vVD6pVh7QCpetitd3haTXHyyFHWa6wWMyxXC7heR49YOs8r0HNLaspS4G3y4WAKT7eH/F6KHE67vH1/Ynz+YTNZt0IupmhciGEoDO5lRZNXrnhtJeVO/b7/9pbpipI6LgeHMrScX34waCCNOXXClRVORRCariUduOEbzn8AcdyCT0BPpeMAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="polished example"\n        title=""\n        src="/interpreter/static/55-polished-example-d29cdc87766ad646e96e1647ddb8cda7-83a8b.png"\n        srcset="/interpreter/static/55-polished-example-d29cdc87766ad646e96e1647ddb8cda7-8992e.png 163w,\n/interpreter/static/55-polished-example-d29cdc87766ad646e96e1647ddb8cda7-ae0a7.png 325w,\n/interpreter/static/55-polished-example-d29cdc87766ad646e96e1647ddb8cda7-83a8b.png 650w,\n/interpreter/static/55-polished-example-d29cdc87766ad646e96e1647ddb8cda7-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>These are just the color methods, but polished contains a bunch more including:</p>\n<ul>\n<li>\n<p>em/rem helpers</p>\n</li>\n<li>\n<p>radial gradient generators</p>\n</li>\n<li>\n<p>normalize.css injection (CSS reset)</p>\n</li>\n<li>\n<p>shorthands for common things such as text-overflow ellipsis, font-face, etc.</p>\n</li>\n</ul>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAA8ElEQVQoz41SyQqFMAz0qLjhhidFEcR99+L//1ceE2gp6nuvhzFplsmk1nBdlxzHobvVwVuvgY8asG1b+p7nkcirZ9g3UkmoJlBcFAV1XUd931NVVdS2LU3TRE3TcA5+nueS+KFQVZemKY3jyE3DMDDxeZ4yBnscBw9JkoR7fq5smibVdU37vnMzVG7bxuTwEccAEFqW9XtlTIuiiK7ronVdGcuyMDEIgXmeOQaVXxWqhHEcU1mWUpW4S5xBAosBWZbx8L8ro0AoDYKAfN/nyw/DUMYA1N/JXv+ySIjnIyAGCdyFPBTeC3TwVmvoNuviA+NvDzO91FsfAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="polished methods"\n        title=""\n        src="/interpreter/static/56-polished-methods-41e970c0352d4df07ac5322edcad1525-83a8b.png"\n        srcset="/interpreter/static/56-polished-methods-41e970c0352d4df07ac5322edcad1525-8992e.png 163w,\n/interpreter/static/56-polished-methods-41e970c0352d4df07ac5322edcad1525-ae0a7.png 325w,\n/interpreter/static/56-polished-methods-41e970c0352d4df07ac5322edcad1525-83a8b.png 650w,\n/interpreter/static/56-polished-methods-41e970c0352d4df07ac5322edcad1525-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>If I had more time, I’d love to cover <em>every</em> major library that can be used. Unfortunately, in the interest of time, I’m only able to cover a few. That said, there are <em>so</em> many libraries in the frontend ecosystem that can be utilized.</p>\n<p>Also note that every single one of these libraries is framework agnostic!</p>\n<ul>\n<li>\n<p><a href="https://github.com/cssinjs/jss">JSS</a></p>\n</li>\n<li>\n<p><a href="https://github.com/callstack/linaria">linaria</a></p>\n</li>\n<li>\n<p><a href="https://github.com/rtsao/styletron">styletron</a></p>\n</li>\n<li>\n<p><a href="https://github.com/rofrischmann/fela">fela</a></p>\n</li>\n<li>\n<p><a href="https://github.com/Khan/aphrodite">aphrodite</a></p>\n</li>\n</ul>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABpklEQVQoz4WSwUsbURDGxZuH3iwoFHr33L+hh+LNq8ceC4VeROm1t9qD0lNRJBfB9BKKoKgHaWnTIggloBiTbATburvZ3WQ3iXH3vV+fL7vZbVl04DHzZpjvffPNGyM2KSPte14ZpzZH52Ie35jFtzdVEfrHZwzqvxnUfjGoXupYChH3ygSGsRQw1L7rlOidPyCoTuNWxrEaSwxUSbgewu+r0yNqd7WXQuYD3iYShkFrm5vmFGvvHvLy+QSvX82wu/dV16JMY0rk31zMMAUM/R0aPx6xsfKYD28nWX7zjP2DIWCoRtSPK2ZCxSK+Z4FjhmnCC3p4roHvNWi7VYLOnyEzz4frkDzLHTnxrtHCs3xMy8E0Xcwrm1brCuvI4EtTclI/5/PhId/KZSqVCqlkGYZkEgjFQo0vpRie+OX364KtTwLTNihufaRQKFAsFomiKGfkkY5SxzLR4XYRdkC/9JPa6hGdmp9IPtIw/9skI2fYJn9MnFo0nq7y/cki1B10Vsj7tpwjdNwUNR3shRLGi01E0x3VEt1yt3zX5jRwqHgJcj/y//YXaBRBLajdvJYAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="other libraries"\n        title=""\n        src="/interpreter/static/57-other-libraries-7acd62a1b65cb8954a9c79ec2dd7d27c-83a8b.png"\n        srcset="/interpreter/static/57-other-libraries-7acd62a1b65cb8954a9c79ec2dd7d27c-8992e.png 163w,\n/interpreter/static/57-other-libraries-7acd62a1b65cb8954a9c79ec2dd7d27c-ae0a7.png 325w,\n/interpreter/static/57-other-libraries-7acd62a1b65cb8954a9c79ec2dd7d27c-83a8b.png 650w,\n/interpreter/static/57-other-libraries-7acd62a1b65cb8954a9c79ec2dd7d27c-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>It <em>can</em> be helpful to consider library downlaod count, but that is in no way, shape, or form indicative of a library’s quality or usefulness for your application.</p>\n<p>That said, it can be valuable just to get a baseline of relative support, community activity, etc. which can be a metric to consider when targeting a CSS in JS library to use in your application. </p>\n<ul>\n<li>\n<p>styled-components and glamorous are two of the most popular and “hot” choices</p>\n</li>\n<li>\n<p>glamorous requires glamor, so a lot of the glamor downloads are likely from glamorous (but note: glamor can be used outside of glamorous)</p>\n</li>\n<li>\n<p>aphrodite and radium were huge players (and may still be a good choice in certain scenarios), but I tend to like the others a bit more</p>\n</li>\n<li>\n<p>radium is inline style based, but adds pseudo styles and other expected CSS functionality while still using inline styles; however, it’s not quite as utilized or “in vogue” as it may have once been</p>\n</li>\n</ul>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAB2UlEQVQoz52S3WtScRjHhaaWLzfLfDnqNiUpZibqdNvJtbG3BKXRBra5Naa0SjHPHOZWYxfRTRQURHQ96CaIrdhFRPfd7MaL/qBPv3NmNg+0qIuH73m+5/f9cM7veQw27wBWqZ9fanJ6OXPejdHhwezyCZUwXpDoEb1J6FnVE6r6ZnFWzZ1kGPRGKJ5CnskQvTZOKJYkfn2SyOgYQxNTDKZkglcTXBlJa/6loZF2rr8D7gKqtbC2TrHepFBRGL+VZ01pcHdzi0pzl5LSZL50n/XNbYq1R+QKq1g8fR1YF1Ati9uPIzpK5OYSsbllFmu7BGfnccgZVnYek6lUcaazJBdX2XjzEncizTlxBX8Eqi+lmMznvUM2tl9w8KlFYCKLLSLz7tt7qq+fYXBdZrZ8j/0fX3BGh/8CFF/oCic4OvhOvfGcj/stQmM36A2nePt1D+XVU6azKyw36nxoHeIMx7XMqUBJHFJqO2TzRe6Un5CcyTE8nWPuQYmppds8LG8xuZCn0KjSe3EQ62l3qA7F7g9i9Pix+AYwub1YVN8XECvjF2vUR4/4RbPLL3ofVi2nDlMPbE+4A217dm9AU+3Zdxywt4PH/e+cTb+HJ3fxX0qf6QLa/gOoz/wE811NDE9fepYAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="library download-count"\n        title=""\n        src="/interpreter/static/58-library-download-count-0c7c0f18489ca0831d5c29680e14a1d7-83a8b.png"\n        srcset="/interpreter/static/58-library-download-count-0c7c0f18489ca0831d5c29680e14a1d7-8992e.png 163w,\n/interpreter/static/58-library-download-count-0c7c0f18489ca0831d5c29680e14a1d7-ae0a7.png 325w,\n/interpreter/static/58-library-download-count-0c7c0f18489ca0831d5c29680e14a1d7-83a8b.png 650w,\n/interpreter/static/58-library-download-count-0c7c0f18489ca0831d5c29680e14a1d7-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Similar story here, styled-components and glamorous are on the rise, while the others are relatively constant.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABvklEQVQoz5WST08TURTFG+O0paUR03aYTjsjMf5JCgItFgxkKi1QSZoKDRhsAymlhRSIVLuQBTGRjcalSz+CK038DG404Sv9vB07Wkfwz+LkvndezjnvvXs9g/ERHAT1a3YdiJkoUZ3LkRg+NY7Sq929EhE+HMOvGb9oHHgc8oeZlkC/PUY6m2fq/gI3JjOkrBy30jPM5AuMz2aZzi1hJifwDydw6z397iGBXw7uiLBc36PSekJ1/4jW8xNWa7usN/dpdo5pvzhltljGp5m25rcbOhiQRG3K4tWbd1gbTcJzy5j5FQyBubBCfL7E0PQimlVkpLCOmpoj0Hv6xYYT9zj79JVitYVvLEMkM8+QhFxNZYlmcizWGhjWA67czRKW82DsT4aSpibTfPnwmc1Gh9J2G+thhfzqFqXWLss7dd6ffaT2rMPr07dEkykCfzPUR9M8bZ9Q2tihdij1UZ3K5gHlgwaFrSprR3ssrT3muPOS8M1RMTQvNux2KmRcR5HUgOy9w3G8EqLIV3ijAtX4XoW7pOoEuzq7w27Dvrbbpj2uv/uhRG+d+MnZOudC542Ne0j/BecO9qAr5b/g0nwDe8NBgtnwjYwAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="github stars-count"\n        title=""\n        src="/interpreter/static/59-github-stars-count-769c96960559f2692c69f943695cc217-83a8b.png"\n        srcset="/interpreter/static/59-github-stars-count-769c96960559f2692c69f943695cc217-8992e.png 163w,\n/interpreter/static/59-github-stars-count-769c96960559f2692c69f943695cc217-ae0a7.png 325w,\n/interpreter/static/59-github-stars-count-769c96960559f2692c69f943695cc217-83a8b.png 650w,\n/interpreter/static/59-github-stars-count-769c96960559f2692c69f943695cc217-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>The cost of using these libraries is non-null, even when using babel plugins or other techniques to reduce the file size as much as possible.</p>\n<p>However, the cost is relatively small, so weighing developer utility and other benefits of CSS in JS vs. a relatively small size seems to be a fairly inoccuous concern.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABzElEQVQoz52S70sTcRzHhem29qMY19xuu5vNomnJpnNudsla2858ENg48QcOK83fE52KJEwqqB4EBhFED3rUH1D0vKeB0B/16nu3kstyiA9ex4fP597ve9+HT5svegVvpMvCrD1yjPbLMg4pjDMYoV2ScYUUOkRt4uyMWph9t+if1LeZjz+YzeDVBNmCjlYeoyczTLao050aJKnlSeeL3MhqXE9nyRVHiSfTVgC7x7GhX4njEl/OlMZYazxjdf+Ahxs7LO3uU6hMUl3fYqG+h7GwwuTSOtvPXzE6MYMnrP7f0EoohlK/xm7jEOPJDs6BEaRbOurdcWKlB8dE7txHLVcIDtwWhkoLQxHfm0jx89sRb19/pDy3ibH8FFffEJfSI8jDZUGJkCCs6Uh9GaFpkdAndngh3sPRlx+8FCk/fPrO4fuvjE8vYkzXWHnT4MXndwRuDqHmCgQSSStEy4SBa73Utw6oTD3GeLSJPjFPda7GbLXGvflZpuqrxFI5knmdi/GEFeJ0QzH0q910iF26Re2WFVxiR47OCI6QOJmgKs4lisc8L5vG+4+h7Y4sU9sLfjtKk+asq6n7rfeddod/7fQMeFv9su8chic1vwDoAESfy0TPfAAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="payload size-chart"\n        title=""\n        src="/interpreter/static/60-payload-size-chart-492dddd6a853446b289155af391633b1-83a8b.png"\n        srcset="/interpreter/static/60-payload-size-chart-492dddd6a853446b289155af391633b1-8992e.png 163w,\n/interpreter/static/60-payload-size-chart-492dddd6a853446b289155af391633b1-ae0a7.png 325w,\n/interpreter/static/60-payload-size-chart-492dddd6a853446b289155af391633b1-83a8b.png 650w,\n/interpreter/static/60-payload-size-chart-492dddd6a853446b289155af391633b1-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Seeing some of the companies that are utilizing these technologies lends some validity to the practice and makes it more obvious that there’s some real value being generated by the usage of these libraries.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABbUlEQVQoz61STU/CQBQkQYOoJMiHpaUWilBCBYqAgoCAEsWAQQLGj2hATTyY+P+v477F2kLpzcPkJfOyk5l569mNJ2FiR0rwGZAtzuQDssph5+1vTHgWpLWguRmV4NuPwx87wJYgL7iICG84xjhliV8V/ROkuS0qCKkajGYXqlGFmM1DyZf4g3K7h8b1AJFUFoKmQ9YNBJVDd4f2aM3+EL27Kbq3Y9xMHxHTjjB5fcN09o72YISr8T2GD89QixXu1FWQYmqVOi5HE+6yMxxxV5lyjUWW4A0JXFzI6LyWdT0uCVI3FKXW6yN7cobS+QWMVpcL0i6YSEPKFbigeSTXyLTcCIs4ZWLzr28Umx2kSlXo9Rbvstjo8MjjlzmePj7ZnCGUzPDeHYImKDK5oZ4ShWMkC2Wk2HHI0R5zR8eIpnM8dpgdZ9Wd5dDWA4lSV1Q2wcfgZy7ICcXmX4bmrzN65+jQ+bGdH9gNazv8T/wAfz8sfxWqLDQAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="companies"\n        title=""\n        src="/interpreter/static/61-companies-1ab700487aecc1403336f6348dd190c9-83a8b.png"\n        srcset="/interpreter/static/61-companies-1ab700487aecc1403336f6348dd190c9-8992e.png 163w,\n/interpreter/static/61-companies-1ab700487aecc1403336f6348dd190c9-ae0a7.png 325w,\n/interpreter/static/61-companies-1ab700487aecc1403336f6348dd190c9-83a8b.png 650w,\n/interpreter/static/61-companies-1ab700487aecc1403336f6348dd190c9-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>I think it’s important to actually show some real-world usage and common patterns for writing “real world” code in each of these libraries.</p>\n<p>Common things like theming, utilizing props, inheriting/composing styles, etc.</p>\n<p><em>Note: I’m not endorsing any particular library, so I’ll jump around a bit to give you a better idea of what each library feels like.</em></p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACyklEQVQozz2Q224TVxiF5+jxeDz2+BDbk+BDxsZJnVAS52AcEWPIARsTR4mgNSS0aXHToBAUOQZBi2ihApVyVa5AqkRV9RmqvgE3vNPHti9ysbW31r/07bV+qVbKsHdljl6zwpOdDV78sMvVep3lL2f5prlOMRHlt+0abipJu3KezYUpInaIztxZZooenjeOG05y7/oG7eolpJffb/H/X2/447DD853rvHjY593b12TyM1woV3i5v837R1/z0+UyhYDFwrki2WwaNxGnsTjNysUlVO82//56zN7WbaS95WmWyudYq1XFL1f4vf8jR91drGiaqdwEf9fm+Tg3yaeVOsdLZXqtCo35Es3ZIncreUYdhxutm/zS7ZKa3kGazaTw6zpB008pmaDfaXJtpUpG8/HGMPnPsvgnHOLV/BztKY/dygTLuSQPG4t0mzU265e4s1rHmfmOQmENyfEbpN0RMqkYo7Eoi/kzxG0TxzQ4qNU4udXh4OiQ/Qf3WW808NwE3wrt6VerHLZqRGY6SOkWcuEG7hdNJL+qkI0EWcjEWfISVHMJRgwNW1Q56PW4e/+IyyurbG5t8aB3wtVWi2eP+2xcOM9kyCAQy+NEstjRHOl0ASkW0MnHLfJRi4gAFeM2kyM2Pl1jf7nMn91bvD854MPPPV7d2aa/XmVMNBizDUaDfmxNYiykMh7VORs3kTRJIuwTQsxCU2TcoMGZkBgIfb++yHF7jb2FEp1Sms6ES1u0UGWZpIDlwoGhb1QknUiFhkfyCcHWFfGDiaHKpERi26cJozw0nx5FQdVUFLEiSZEI6irZkP8U6IlAg6ZDYEQkHIiD4SCdKcyDt2n4cAIG0aCJHQyiiAYBQ0cVcFnMx0QbRdzxgEbWMck4gmEIIWqopxA3FMCNWMiiluX34SUdwuKOib3pmkg5SCh8qiwxHjaHQMeviCBiVWGDz4nrR7DbBWqGAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="usage"\n        title=""\n        src="/interpreter/static/62-usage-2b88e3136e80cd432818e1b30c3c929e-83a8b.png"\n        srcset="/interpreter/static/62-usage-2b88e3136e80cd432818e1b30c3c929e-8992e.png 163w,\n/interpreter/static/62-usage-2b88e3136e80cd432818e1b30c3c929e-ae0a7.png 325w,\n/interpreter/static/62-usage-2b88e3136e80cd432818e1b30c3c929e-83a8b.png 650w,\n/interpreter/static/62-usage-2b88e3136e80cd432818e1b30c3c929e-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Props injection is a natural, React-y method of altering a given component’s style under certain conditions. For instance, if we were to re-visit our earlier CSS only button, we can create the same with props, but with complete encapsulation to that single button component.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABVUlEQVQoz5WSW0/CQBCFeRLY3XbbvbSgblOKLfdi0BAjf0J9AxMSDfpgwv9/PG5RCDWK8DCZTHbmyzkzW3EcB4wxFLmIOiHodLtYLJ6xen/Dev2B2f0Mjw9PeH1ZYT5fYLlcIk1T1Gq13dyWUdkvGKlDRDGSYY7+YIiL2CCMNIJLDRFWERoKGbionlV3kN3sr0BK4QUhorRtFcQwpom0kyFoaLicwBcOuOeWAAeBlDCohof+VOF62kZvlGAwTpBZe8ZEUCoAc1jJ5mGFNnPfg5ASwlPQFhDoEFpby0KAc/7ddyyQUIimxujuCvlthLRn0M/bkEqC2GN9AQoYOwZoHymDLxniroPzlt2XT0BoHdTudmtz08fYCZY9B1muYVpqE0Eo4bq89LVOAhY5Hw9xM5kgaSX2GMYeQ5VUngT0fG6Pwq0qd1Nvd/fXVzlK4X7jT1X/AT8Bk+0Mmu45QpwAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="using props"\n        title=""\n        src="/interpreter/static/63-using-props-337f911300da8a40bc16592e9a44e2d8-83a8b.png"\n        srcset="/interpreter/static/63-using-props-337f911300da8a40bc16592e9a44e2d8-8992e.png 163w,\n/interpreter/static/63-using-props-337f911300da8a40bc16592e9a44e2d8-ae0a7.png 325w,\n/interpreter/static/63-using-props-337f911300da8a40bc16592e9a44e2d8-83a8b.png 650w,\n/interpreter/static/63-using-props-337f911300da8a40bc16592e9a44e2d8-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>A common question is that one of CSS’ great features is inheritance and easy extension of base classes. Inheritance is typically accomplished in these libraries by injecting a previously styled component (😉) and adding additional styles, as needed. All previously defined styles will be merged with, or possibly replaced by, the new styles.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABbElEQVQoz5WSS2+CUBCFXfG8oEV5FpCXNYoGrdLQWm26qf/AalrTpRvT/787vZBoKBgTFyck3Mw3Z85MQ5Ik5CKEQJZlcCwD3/NwOBzws9/j+2uP4/EXm80n/R6x3W6x2+0QhiE4jjvXnjiN8g8iimhqOoJ4hPX6A+nyDYv3OZ6yCaJehPF4jDiOkSQJDMOAIAgoG6oBRZ6HGkRwk0eksynCwRCK78Afiej25cIRwzBgWRYibf7PzCVg7rBFHVqej67TReAHCHohXE+HqilFJCdVR73skALbmobnxStelhNMZkNEfQu2q9L3JhWpubrqUKBAQ9cwTSZwQw2WT9BqEzqqUOSVN6zCrgLzgg4NWzVMmFQadauqd7SJAssyi0Xc5LAYWTcwzzKsVhnSeYqHgYle34Bt27cD85FNWhTRG3McFc69hXZHobk2IfAifRduG/l03HlefA4ociOFytusqga8dE81Eem85arKNX+YRhHJhYG3uQAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="inheritance"\n        title=""\n        src="/interpreter/static/64-inheritance-5fee39d4a3de8381bad6a8f061d3888b-83a8b.png"\n        srcset="/interpreter/static/64-inheritance-5fee39d4a3de8381bad6a8f061d3888b-8992e.png 163w,\n/interpreter/static/64-inheritance-5fee39d4a3de8381bad6a8f061d3888b-ae0a7.png 325w,\n/interpreter/static/64-inheritance-5fee39d4a3de8381bad6a8f061d3888b-83a8b.png 650w,\n/interpreter/static/64-inheritance-5fee39d4a3de8381bad6a8f061d3888b-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>One final reminder that in each of these libraries, real CSS and real stylesheets are added to the DOM. The value of CSS remains but with the clear and numerous benefits that CSS in JS provides.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABLUlEQVQoz5VSbW+CMBj046TvZUwLgrRDF13mFuKP8SXxFyz+/2+3SoXMsA334fLQtHe9uzJijIFSim5y3kBrjcPxiPP5E7vdHnW9xX53wOl0gpQShBD0uH6Ovi9INEacz1G8vuF9s0FsK+RLiZkVyEqFaaa6sy3vT0FKIsiJQWodnC1RlBZ5kSGZCMQTBv3Ie64GBClUorHaZljXBtXKYO4MuGCIHuiP7oYFNfOCCi+1QrWRWHxIH1dAKtaJMXavQz8vxNU2hlsrzJzv71kinQvohN84vFuQc4bEcDyloulMxay5JBoHMiH0Hx1eHRaL4CotA0wRMM3DWsj+7/KroJAcmZUhrgvCsY8r/EUXobbLwLnDoRDCxwoRWzQxr1G7yQZe+Xbjtvw++mLt9xcKTgk4/CzYKgAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="real css"\n        title=""\n        src="/interpreter/static/65-real-css-4ee04c27e4380b693a26f523d129f2e0-83a8b.png"\n        srcset="/interpreter/static/65-real-css-4ee04c27e4380b693a26f523d129f2e0-8992e.png 163w,\n/interpreter/static/65-real-css-4ee04c27e4380b693a26f523d129f2e0-ae0a7.png 325w,\n/interpreter/static/65-real-css-4ee04c27e4380b693a26f523d129f2e0-83a8b.png 650w,\n/interpreter/static/65-real-css-4ee04c27e4380b693a26f523d129f2e0-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>But what about animations? Those inherently require a global animation name!</p>\n<p>Most libraries include some type of helper utility to return a unique identifier/hash for those animations so that globals remain stripped from the code base.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABTElEQVQoz5VR207CQBTkgcTS7p7tdimltJWWhYiCmqjx8gB/YKK/QMSkJOr/P43bchEwsfVhcnazc2bnzGlwzsEYw7aSEDixLMxmM3x9fmCVr7BYLPG2fMfL6zPyPMd8Pkez2QQRHfQWtbF/cewWVJIiOp/gcnqB4WSCOPXR012EQ4UoJfMhg2W1diJ/CjLHhuyGiAYaQ60RnabQowxBKOEpbjiFI34gViHI4CoPo+seslGApN+BPovguq5xv+ZsUUOQbX5n8NoMsoAyZ3/99iPEd/dqh+VSOLqxgPIJ0qOy7nOO+dWCxBHEhE6Pww+pxHaCklNM8h+HQnpGVIGYXGcqyGQoTIb8V3ONpTiQQQfTJ43LmwwPj1e4ux9jfOuXMeyPXduhlIREE8I+R5K1ESYeokwgHrhlHMdZVgoW1W4VYAYObNvZnFmtkb8BT6IKkVur8HcAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="animation"\n        title=""\n        src="/interpreter/static/66-animation-7f3eeeb8bc85df81c07c49522fdeb95e-83a8b.png"\n        srcset="/interpreter/static/66-animation-7f3eeeb8bc85df81c07c49522fdeb95e-8992e.png 163w,\n/interpreter/static/66-animation-7f3eeeb8bc85df81c07c49522fdeb95e-ae0a7.png 325w,\n/interpreter/static/66-animation-7f3eeeb8bc85df81c07c49522fdeb95e-83a8b.png 650w,\n/interpreter/static/66-animation-7f3eeeb8bc85df81c07c49522fdeb95e-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>If you’re designing a component library and want to make it CSS in JS friendly, consider exposing the className prop for consumption.</p>\n<ul>\n<li>\n<p>Most libraries inject a className—or provide a className—which would then be applied on top of the existing styles</p>\n</li>\n<li>\n<p>Additionally, if you are “wrapping” your styled elements, this is a great way to make those wrappers extensible, as well</p>\n</li>\n</ul>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABPUlEQVQoz61SXW+CQBA0JDUgx9edgEW8CnJW0SrS+kRa09rE//+LpicGSlFbH/owub2PnZud3Y5hGCCEoLkeoes6er1ejWqvaVoZV+/buZ2KoHlBZAJjDL7nlXBd77T3fQT3QRk3P2/GnTaZaVmwKMN2+4L3/Qded2/Yf+6QP29QFAUOhwPSNC2VViRnCmtCqcx2XfQfIvARBxuE0CS5G2iwKUH3rgtFUaCq6lmp1wk9H8NJgvl8gHQxwOppBJFwCCEwm82Q5xskSSJtcGsvrxPK1XIcxGKKSPTxmPUxX46xXi2RZWuEYYjFIgXnHKZpXvTxTKEjFVI+hjOM4AQRkolAHMeYTgWiaFyWe/TvtpKrpkiVpm3DkmCMglJadtaR55ca8ffYEL2esaNP3yA/SG4am/bjS6g++3Ww/wtfbncIgZOIB2kAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="using class-name"\n        title=""\n        src="/interpreter/static/67-using-class-name-09000e9042dad103eecbe5add994d1ee-83a8b.png"\n        srcset="/interpreter/static/67-using-class-name-09000e9042dad103eecbe5add994d1ee-8992e.png 163w,\n/interpreter/static/67-using-class-name-09000e9042dad103eecbe5add994d1ee-ae0a7.png 325w,\n/interpreter/static/67-using-class-name-09000e9042dad103eecbe5add994d1ee-83a8b.png 650w,\n/interpreter/static/67-using-class-name-09000e9042dad103eecbe5add994d1ee-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Libraries that require a certain class structure (e.g. Bootstrap), can also work with CSS in JS libraries!</p>\n<p>This example exposes a wrapped bootstrap Alert, which can then be used as a regular React component with a prop specifying the type of alert (e.g. <code>success</code>, <code>info</code>, etc.)</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABY0lEQVQoz5VSTU/CQBTkBv1ulwqt/aKFNkBFEFJUCB74DWpC8MCRAEci4deP3SUlVQT0MPt2Z/NmZyevIEkSRFFEvvI8D9d1MRqNMB6PMZlMMJ1OMRgMkCQJfuvJaoEuGSgpyzKKxSLiOMZqtcJms8F6vcZ+v2fYbrfsMY7jvvVl+0JG5Enq0DBNzGYz7HafeHt9x3z+geVyicVigTAMUSqVzjs8kqkQsRzYzTa69x14rRi3jQqsmoayrkCWZCiKgryJq4KaacGOmojCBjw/gO278EMdlq9C10kK/XqGR1IQQaoagqaDu3YbvV6XOTWqN9CrchpDBY7jMJd/EhQEAcQwYNYDGI06XN9jYjQvjuMZaL55kcsORQGKRjB8esbjSx/JsIP+QwtRFMKreXAtE4os/UfwUIPAh23Z6ddUhnK5DEIINFU9+ebZOcxf0BnjeY45pmcaxQGnAmfn8OfFJVxy+AXEgBXg6JBoHQAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="external libraries"\n        title=""\n        src="/interpreter/static/68-external-libraries-a9f5e99942fa34088b913d4c5bed84ae-83a8b.png"\n        srcset="/interpreter/static/68-external-libraries-a9f5e99942fa34088b913d4c5bed84ae-8992e.png 163w,\n/interpreter/static/68-external-libraries-a9f5e99942fa34088b913d4c5bed84ae-ae0a7.png 325w,\n/interpreter/static/68-external-libraries-a9f5e99942fa34088b913d4c5bed84ae-83a8b.png 650w,\n/interpreter/static/68-external-libraries-a9f5e99942fa34088b913d4c5bed84ae-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p><em>Some</em> of the time, it may be necessary to inject globals, in particular when targeting <code>html</code>, <code>body</code>, etc.</p>\n<p>For these times, most libraries include a mechanism to inject a global into a DOM style tag.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABWUlEQVQoz42RzU/CMBiHOZFt7dvugzUuGmUzgSgeIB5MjBFETLxwhgDhpIPL+P9vP7vh2MaHeGjetuvv2dO+NSIC5xx5FULAMAx0Oh0kSYI4jrFcLjEej7FaxViv1wjDEKZpZpl85Iza/gbpyiwTnudhOp1iMplgs0nw/RVjPl9gNlvAcVwwxna5XTYHFoYMwvUgfQXl+xgM+hgOh3h9H2H02cfbxzNeBo/wlNRnUwA/bpgvmGXBDwKErTaiMIJSCra0Ubc4LKpDOHXYvpEBK7c6CWQcvnLRfQpx37vUQYLTIDR8AccV+ocCnInsHCdeue4RYPEhaBKadxJXkY1W10W75yK6dxBcSzQuBMqZP4DbKm1t5aUWv12XlI10Xzp6LqjSjPNAHbp90DY3MgNxVgTL8/0OnwTatszeKzUiUX34cgP+bbithRkRPwCcBR5CS1acDgyPGefzH9fbD7nkWOKSAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="injecting globals"\n        title=""\n        src="/interpreter/static/69-injecting-globals-716c3dcc90bcaf20d4c5f0a25725400b-83a8b.png"\n        srcset="/interpreter/static/69-injecting-globals-716c3dcc90bcaf20d4c5f0a25725400b-8992e.png 163w,\n/interpreter/static/69-injecting-globals-716c3dcc90bcaf20d4c5f0a25725400b-ae0a7.png 325w,\n/interpreter/static/69-injecting-globals-716c3dcc90bcaf20d4c5f0a25725400b-83a8b.png 650w,\n/interpreter/static/69-injecting-globals-716c3dcc90bcaf20d4c5f0a25725400b-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Nesting <em>is</em> supported in most of these libraries, but it can be seen as a kind of anti-pattern in certain circumstances, <em>especially</em> if you’re targeting a child selector.</p>\n<p>However, that said, <a href="https://www.styled-components.com/docs/faqs">styled-components documentation</a> mentions that:</p>\n<blockquote>\n<p>… Used sparingly it’s a great way to lighten your code by reducing the need to create explicit classes for every element.</p>\n</blockquote>\n<p>So use with caution, but it can be a decent technique to lighten some of your component’s styles!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABfklEQVQoz42Sy27CMBBF2eJXHIfECSGEhEAIbVAftGLVz+AhlUplg9r/3986oZRCEXRhjWyPz9w74wbnHIwx7KNlWXjfbLDdbrFYLrFcLvD58YmH+ynWr29YrVZYr9eYz+cQQhy9rWLjCEiacKIYwXCEyaSEl+UIUg4dEeiOgO3SGlIVPRVyHkgJpA4Qpn2M8iG6vQSdboBBHqMTu3DcHYhS+gO5rJAyo0KheApRTiNkhQ8lWwj8ALZUoITWefv1P6DDMX620S8F4lzA0eZO0LP2rgIrBZ5vY/YyRlHGmDwOcHOXIhukxroPPxJoxxKOJ+rip338CzRJqiWQ5C34oYKU0hSp7ImdTcHMUPgvwAWF+wNiVPqhjd7QQxDZiDMXrlZQyhSwzaQVhyWrN2ZVQH6xh9woZBjcakxnBcZlamxnSJIe2u0QXmAhTCy0tFUD+TfsylDMILxKKTEWTRtYE80mqfdVSwhhddzbvdJDCq0983HlIZnxo69yUHR+yl9VFA90eRP/7QAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="nesting"\n        title=""\n        src="/interpreter/static/70-nesting-a6f843804c70c2641503de0c2704592b-83a8b.png"\n        srcset="/interpreter/static/70-nesting-a6f843804c70c2641503de0c2704592b-8992e.png 163w,\n/interpreter/static/70-nesting-a6f843804c70c2641503de0c2704592b-ae0a7.png 325w,\n/interpreter/static/70-nesting-a6f843804c70c2641503de0c2704592b-83a8b.png 650w,\n/interpreter/static/70-nesting-a6f843804c70c2641503de0c2704592b-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Theming is a particularly common use case that can be semi-difficult to architect cleanly. Most of these major libraries expose a <code>ThemeProvider</code> component which can be used to provide a theme (via context) to each styled component.</p>\n<p>It is, for instance, incredibly easy to make a light/dark theme for an application, or any number of color variants.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAC7UlEQVQozx2SSW8bBRiGR4LSNsSitLGTeInd1st498x4PPG+xOvEabzbSeymdgKtqBSgVaSQuionWtFy5FSJC0IClPbUSOGCBBzov3oYcftOz/e+rx5B32pSikts20zsi5+y57aw5zDRk9xsJCIUMiqKP4RoD9NKRklrXhopE9OUhWkywN3VK3RcNrarNYbjCcJoZ0hvOEDXdfSwzwBeZ6C4aWghmh4HKVVDDYeJ2kPkpSi1pI9mwsfuupeJ3cSOGmLSyDKtJJglRYR7NSuzhpODTQ/TpkhHXaIatVENOSnHFTL5EiFRJBsWSWWzpIzkJYeZonuJts/MeG2R4erH9FZMtNaWESTVTDC2gDcoIEYEHn2h893x5xwdtnn67BnPXzzny6MjDmef/X9/82TOg50RX+22Ocwp9K58xMjuYDcYYKIqCMuyDWvMxprsxCqucHr6mF9+fMlvv/7O+fk5b9++4eLign/fv+fs7Ix//v6Ld3/8yc8/vWZ+/Ajttkj91k1q1hXK5iWEzWKJQVVnWtpiP5jj63Kbk/v7nDw8MJI95sX3L3nydM58PufVD684OZ0zuzfj2+OHDA/v80FyG7s+RmnvUWv3EA6aQ/aVCn2PSkdOoTrj+FeN4RU7miyRLTboNDdpd7vU6zpFKUNRCRhmeHC6gihaBlsszeVoGVOuj9A0dKiGZBobFSR/Dt+agtstEQxE6FRVeqUkw4TM7laRckGilZbpZ2VUn4rrdgSXR6NSaVAp5vEaHKHRqFOrt/A6EgQMUL64gcMZZUHR8SlFhkE7d1Qvg7iLfsFLJyMyVnMkbsRJhAtEogpma5hkXqdrtBDy6Tqu5TByLMF2p43b+HxLynGtMKLmuMnoskDPb2YgmWmtX+Va7CqdaJKxViF2Q6aY1smk06xY/YSkAoJl0U80ItE35M4W6qy5wnjLXZa1JiPLEv1PLjGxfMhdzyJ7isCCeomkFORB9g41/zoB8zqtbp+UpnHd7OE/y6GGYLrqXHEAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="theming intro"\n        title=""\n        src="/interpreter/static/71-theming-intro-1d05dfdfd08034dc8a92a7c7791cb178-83a8b.png"\n        srcset="/interpreter/static/71-theming-intro-1d05dfdfd08034dc8a92a7c7791cb178-8992e.png 163w,\n/interpreter/static/71-theming-intro-1d05dfdfd08034dc8a92a7c7791cb178-ae0a7.png 325w,\n/interpreter/static/71-theming-intro-1d05dfdfd08034dc8a92a7c7791cb178-83a8b.png 650w,\n/interpreter/static/71-theming-intro-1d05dfdfd08034dc8a92a7c7791cb178-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Check out the <a href="https://css-in-js.dustinschau.com/#/theme-provider">code slide</a> to see the full, navigable example</p>\n<p>To actually add theming to an application, the process is <em>quite</em> simple:</p>\n<ul>\n<li>\n<p>Import the <code>ThemeProvider</code> component that most libs export</p>\n</li>\n<li>\n<p>Wrap your base component (e.g. App.js) in a <code>ThemeProvider</code></p>\n</li>\n<li>\n<p>Provide a <code>theme</code> prop to the <code>ThemeProvider</code></p>\n</li>\n<li>\n<p>All contained components will be injected via props/context with the current <code>theme</code></p>\n</li>\n</ul>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABF0lEQVQoz5WR3UrDQBCFc2uyP7OzW2mKxQoVJYoVbKuIonjhC9hciEXf/ymOk+gqtGnYXhxmszNz+HI201pjU7kqULoBHk5mWEwqXI9OcTM+x6yc4vaoanvNTNduFg9Kqb/LA5Vj4ko8XS2x/vpEXddYva3wvv7A6/wRxzSUmR7DaBZrXhQY8SHuxhXmQng/bUgv8Hy5xMvZAkMK+xFGBWIMLCNY11avCWxo5/yWobEW5B24FUMb6RkD6wiGrPQNlHxrY9MMm2UOHkFkxfynp9pelI51B+VWhs45eO/BTLAkdKQ7SdIIpTaGDZ1pf7fbQP2S9xrGJWZ5hBAkQwI5I7n1EyUQihHJIxglpPo/u0TTLCWXfQi/AXcOBypzRt42AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="theme provider"\n        title=""\n        src="/interpreter/static/72-theme-provider-a09e009a8f6962c8455ffe665b2aa1ab-83a8b.png"\n        srcset="/interpreter/static/72-theme-provider-a09e009a8f6962c8455ffe665b2aa1ab-8992e.png 163w,\n/interpreter/static/72-theme-provider-a09e009a8f6962c8455ffe665b2aa1ab-ae0a7.png 325w,\n/interpreter/static/72-theme-provider-a09e009a8f6962c8455ffe665b2aa1ab-83a8b.png 650w,\n/interpreter/static/72-theme-provider-a09e009a8f6962c8455ffe665b2aa1ab-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>However, there aren’t any silver bullets it seems in frontend web technology. While CSS in JS may seem like a great fit for most applications, there are certainly some drawbacks that are worth considering.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAC60lEQVQozyWTWW8bVRiGp60dL+M49sRrbBI33uLEy3g8zowzXmvXqeOSAqFFqVNjhwZECqUCidJC2NoIESi7EEsqBDfcFCGuueOPPRzBxSOdc/TpPd/7LZLRaNPsdmn1eli9PhsXt9A7fSrti5QbHVbVCnndRG12Kbe6aM0LrGlVEueXiUXDggCheR8Br4egQFKtBnUhtiFES406BUGp3iJvbpBRNTIFlbXqBnp3gNEbUKg1xbvOcjKNX1FwuT34PTLzshuf24VUtGpCrI7eNqkaeRqCFT1HydQYDK7wytUx9/ducm//VW7vH3IwPqApXCmBINVUiMmgQCyo4HHY8cpOpLxZpGjkWFnPoK9G0bNhtPwiFb3I5brJvprnvq6xtzvlxuiADz845uT4MxGjspu1889HbYaNPJIk/S+YLCyQyIWI5YKsL/vJRly8fP0aP//0A6fffsX3nzzk9/fe4a/Hv/Dk8W/88eMpfz/5k18ffU0pn6G9u0kyk8B57ixetwMpkvAQXpIJLbq5EJ6jIopdSiepra5wq9vj3e1nuKOVOawZvL99hZNLWxzdvMU3d+5iNcqk3hhTGfRwnJGYk0UNA2E3isjKP2/H8ntYWIhjczoICAsFgeG08XoiTkuZQxH3nOxADfopz/uJL86TmQwxbzyHyzmDxzWD5PWJg0CWbVREsN/r4+yMndi5MyTsNlIhhethH69VSuykUrQyacxMktZKltvDPm/ePWRz+gJO0RTZJSwrQS9ziht51kHhqSj5WRl5xkZE/LgkLHTUHJWAj3okwCCb5mldZ8cwGFsm036H0+++5MXx6L+mOB02pJ3RlKt7U54fTehvDVlLnufy9rP0Ni9Rb7bILcWYFbaXY1FatRqdukVLkMtmiUeDPHxwxPSlCZFIiMX4AlKp1sAQW1C12lTWLVRNp6xpmKYh5s1iNZ1gSWRXLq5Rr9dot5oMN/v0e10mo2ucfPqAR198zttHx7x172P+BTfbZ0IWhmmAAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="drawbacks intro"\n        title=""\n        src="/interpreter/static/73-drawbacks-intro-4c6f5162b32ffe049c5f9cda7fbb6efe-83a8b.png"\n        srcset="/interpreter/static/73-drawbacks-intro-4c6f5162b32ffe049c5f9cda7fbb6efe-8992e.png 163w,\n/interpreter/static/73-drawbacks-intro-4c6f5162b32ffe049c5f9cda7fbb6efe-ae0a7.png 325w,\n/interpreter/static/73-drawbacks-intro-4c6f5162b32ffe049c5f9cda7fbb6efe-83a8b.png 650w,\n/interpreter/static/73-drawbacks-intro-4c6f5162b32ffe049c5f9cda7fbb6efe-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>When JavaScript is disabled (still can be a concern!), how do we progressively enhance? If JavaScript is our styling and rendering solution, we’re serving effectively an unstyled mess of content, which goes directly contrary to the ideas of progressive enhancement.</p>\n<p>0.2% of users may not seem like much, but if you’re Facebook scale or driving a lot of traffic it’s a concern</p>\n<ul>\n<li>1,000,000 monthly users means 2,000 users may not be getting a usable site</li>\n</ul>\n<p>How can we fix this?</p>\n<p>You can mitigate with server side rendering (something like next would be terrific) or statically rendering to HTML (with something like Gatsby)</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABWElEQVQoz4WS20pCYRCFfbQugg6WHdQKorqKIMzcZR6iA0QHSKqboEBMMAiCSowyCCzsCFFdBHXXOwQ9wNc/jLuwvdWLYfbMnlmz1szvYaaXX4v2qI8HjPc7Y7FYQHMxf3VPxTwOsOkuGG8Gq1ObIl6NIx2aC7VoXbjd1HY7QD1ViSkfLI5AIQPrIdPUBpsWnO9rLHawpUN35mFhSL9dGYocYXF7BvcX8HqjUnMpuDqBz3coF+CuCNd5eCpBou8PsEKqWnI8CB/PKvXtEeYGYawJioZhdg0yKzro+wteynCa1VqHZHvJk2Yvl4cG7EEZ7K0qYwHIpyHZb9gbhse7qqJ0pCRq7lCWnAgqkOxyIwLbSUgvVXLDkAqbwV7NL4/qoWpKtv1Eqx4oagbMDigL2Zccwa4TNZavxpX/g9pvTLwA2SbA8g6lruE7dAMW72YuQPUB6zQ0+vcDMa96KobQuX0AAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="java script-disabled"\n        title=""\n        src="/interpreter/static/74-java-script-disabled-9fd7eb851428e7dcfcf46eace5885e29-83a8b.png"\n        srcset="/interpreter/static/74-java-script-disabled-9fd7eb851428e7dcfcf46eace5885e29-8992e.png 163w,\n/interpreter/static/74-java-script-disabled-9fd7eb851428e7dcfcf46eace5885e29-ae0a7.png 325w,\n/interpreter/static/74-java-script-disabled-9fd7eb851428e7dcfcf46eace5885e29-83a8b.png 650w,\n/interpreter/static/74-java-script-disabled-9fd7eb851428e7dcfcf46eace5885e29-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Rich Harris, creator of such tools as Rollup, Buble, Svelte, etc. raises an interesting point. Not only are the styles not scrapeable, but the styles can be hard to query, as well. Things like e2e tests or integration tests should not be pointed to a unique hash, and so it’s certainly a best practice to either use one of the existing babel plugins for most libraries that adds a humanized class name, or manually add your own!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACkElEQVQoz1WTzU8TURTFZ23UxLAxQhQkxhaKRGwjQgco/e5M2/l40+knxTakgCZuFFjACgOxMUb/AF2xcuXGKBgWanRl4oKFCkVJNMGNISoqYszxvgcYXZzNvPd+99x7z0jhcBjRaBSxWAyKqpBUqPE44okEklryP2m6Bt0wSDp0XYdpMjCWArN2ZJEkRVGgEiS+C2GmgXSKwWImEsk9iA4rRQ9SFt2JI0aFLcuCbaeRzeaEcvkC8iQpQZCdh7yigbHpKqZu3sHtu/fw7OkTPF5cxKOFBYRCAbqXEA67ZBnpTAZDQ0Mol8tCxWIRpdJ5SJqmwSAHvHXebi6Xg0XfqlensfHlB9Y/buDN6nsMDg5gfHwMI6Mjov2B4gCCwQCZMMm5jUC/jDIHMmqNA12tTjQfb8L8g/v4tfUd2z+3sLK+iZe1T3i+tIYrY+OoVq9hZnYGk1OT1LKJFqcDjUcb0HSsHmrUL5xKfBYceqqtVRzOzz/E0utl1GorAH5je2sT375+xsULo8LhxMQERsml292Bzk4PfH298HZ5YKcMlPaAGZpHIOBH/ZHDmJubw/UbtzB7+RJq7z7gxau3WF5dw/BwBZVKhVyU4PP1wek4gcb6OjiaG+D39SKZUFEo5CElaSHRaARnPW4cOrAfco8XJm3WMnVk83mkswXaYB4GLYwvMKbERMw87jOoO7gP7S4HAn4fdJpr2rYhyXI3HXbA5TwJV4sD/f0+sXW2OwoxY4Ixiwnx/CmUWW/3OZxub4Pc3UUFwuKeTdGSeshRj+yFn0CRSIgUAXfNGNuFMiG+TS4OFFGjPGrkSqduDN4RFUtxYCgYJEiYwq1QuFUhDuSu9iD/yqAc8qjt/Cnm34JcHPgHGmLMdLZEnk4AAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="not scrapeable"\n        title=""\n        src="/interpreter/static/75-not-scrapeable-6ccef834a60093da81ca5e918d8d60e9-83a8b.png"\n        srcset="/interpreter/static/75-not-scrapeable-6ccef834a60093da81ca5e918d8d60e9-8992e.png 163w,\n/interpreter/static/75-not-scrapeable-6ccef834a60093da81ca5e918d8d60e9-ae0a7.png 325w,\n/interpreter/static/75-not-scrapeable-6ccef834a60093da81ca5e918d8d60e9-83a8b.png 650w,\n/interpreter/static/75-not-scrapeable-6ccef834a60093da81ca5e918d8d60e9-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Editor tooling is still in its infancy, but as CSS in JS continues to grow in popularity, I think we’ll see marked improvement on this front.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABWUlEQVQoz62SX0vCYBTG/QTdBSFWW9NsTVwqQdRNMbKrsnRO8c9ypXVdGVg3idoHCiQJuumuPpOzp/Nu07ZpF4EXP855HzjPeeC8Adxn8U1YtXlm9f8BNANnjnkE4IjMzOpvM8DNMdWTaab0jNd4bOhOaD7VMHq+xrBTtzC7VzBZbRukU99tEPTuNTBq1yZhPAnH6Vjt6TlcGue4KGkwKnkUtSzq2ilaesHSy/SuFlSomopOlZmMZ2cYsm2VvTikVBKphAwpJoKPCNiKruIoJUKSZYTDAtZ4DouhELRt0Z5zeXgNaVtxNw5uU4KwHkGI4xDkeSSkCJSkiA05QXoUweUVLCwFoe3E4L+BzzCLLyONfukAg7LNK/XvVQUfuoI3PY1BSUG/sI8X4tM4dAx9CSdfhoktFXiYgaXn7P4xb0OafZDfQFMJTXbpOx9NF442dPQ/E86LuRv+AJwyNip3m22UAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="editor tooling"\n        title=""\n        src="/interpreter/static/76-editor-tooling-bd072c657417ccb7cc9f925752d1315a-83a8b.png"\n        srcset="/interpreter/static/76-editor-tooling-bd072c657417ccb7cc9f925752d1315a-8992e.png 163w,\n/interpreter/static/76-editor-tooling-bd072c657417ccb7cc9f925752d1315a-ae0a7.png 325w,\n/interpreter/static/76-editor-tooling-bd072c657417ccb7cc9f925752d1315a-83a8b.png 650w,\n/interpreter/static/76-editor-tooling-bd072c657417ccb7cc9f925752d1315a-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>It seems like every week there are new developments to get this working as seamlessly as possible. I believe this to be a space that will continue to see rapid improvements.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABDklEQVQoz52TzU7CQBRGeREXUhVaponplDJtxdgFCAJJWx7AlSEuVQhvStz4HIIJfN47tCSI/JTFyZ25nTn5cjMtYZIiZzVOqCZY0Xr+HuM7Y/4W633O4iPJzqabmlPaFaZ0IcZLFKHtNdELmuiEIVqeT3sfD67C8/2dlp4s5BQDP4KwAzi3ISwZwKhJXFkSF1UHkdugM4USJug1lBYI24UlGIkaVe49egqLosIuCcum1LIqyUyxFhvUa58jfCKhYa1TmRlaeG7CDl26NB0tqtD8GF5zr1UvOMMfEvaVwjWlsWmGIoPXNyTuFk3I9et1gNmoj88/cI+/LU95h1sHpsxwD+m/soMJl0fY96f8AneEHLHnaIb3AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="editor tooling-plugin"\n        title=""\n        src="/interpreter/static/77-editor-tooling-plugin-ea9ace0cf992bd23b447cea05bed7491-83a8b.png"\n        srcset="/interpreter/static/77-editor-tooling-plugin-ea9ace0cf992bd23b447cea05bed7491-8992e.png 163w,\n/interpreter/static/77-editor-tooling-plugin-ea9ace0cf992bd23b447cea05bed7491-ae0a7.png 325w,\n/interpreter/static/77-editor-tooling-plugin-ea9ace0cf992bd23b447cea05bed7491-83a8b.png 650w,\n/interpreter/static/77-editor-tooling-plugin-ea9ace0cf992bd23b447cea05bed7491-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>As with anything, if you’re directly injecting user input (even into CSS!) you open yourself up to issues</p>\n<p><em>Check out this <a href="https://reactarmory.com/answers/how-can-i-use-css-in-js-securely">great article</a> from React Armory</em></p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAA+0lEQVQoz2P4Xxr0n5qYAUT8KwkEYxj7DxT/hWJkNjpG18+AbDpYsAzIrgiB4PJgCAbzgXRZMKoYkIYZhNOFz7J9/h+Mc/1/NN7t/+10r/9XUz3/HwGyzyW5/7+X4f3/Wprn/8spIDHX/zeB8iAHYLgQWeBRls//VaEO/3u8rP7vi3X5vybM8f/cANv/8wLt/u+Kdv6/IsTh/wIge1OE0//HQLVYDYRhcJhUhvx/lesL1nAjzev/gVhXsEHHEtz+nwDizUDxQ0AfvM/3A3v7LyEv/4WyYZEDVlgGxUA2OMKKIfLERQoSDWP/RdKATy1eA4nBBA2kWsKmJgYA76pUYSDjuT4AAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="sanitization concerns"\n        title=""\n        src="/interpreter/static/78-sanitization-concerns-fd65ea1c7477b6a6b8bdd3704366f708-83a8b.png"\n        srcset="/interpreter/static/78-sanitization-concerns-fd65ea1c7477b6a6b8bdd3704366f708-8992e.png 163w,\n/interpreter/static/78-sanitization-concerns-fd65ea1c7477b6a6b8bdd3704366f708-ae0a7.png 325w,\n/interpreter/static/78-sanitization-concerns-fd65ea1c7477b6a6b8bdd3704366f708-83a8b.png 650w,\n/interpreter/static/78-sanitization-concerns-fd65ea1c7477b6a6b8bdd3704366f708-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Performance can be a concern, but I’d urge you here to not prematurely optimize. The difference between each of the libraries is arguably minimal, and the difference between CSS is relatively minimal as well.</p>\n<p>However, if you’re pushing Facebook-scale™, or after measuring your application’s performance, then it may be worth re-visiting whether these libraries are for you, or whether there are performance optimizations you can make to improve perf.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACoElEQVQozyXSyW8TZxjH8Rnb4y12vISM17FnXzxxEkLqLCUBkTRJEwjBASQQSCABahsJcuhCEOLEEYlTL1EPVf/Rb58ZHx6N5tXMR8/7ex7Fiwxst4dptrGMRWyrjev1sZ0ujpyHoYnrGpQKOcr5DFG/zouDEa+PYl4djvltOuHJxoBAL5HNqChBKC+hgS/l+YZghiADRqMBcWyl6Hy1RFHLks9l8FpznE4sptsWv5ze5GxisOPUsBeKMzAMh0TRUAAzffqChvK0BGo0K4Ko8qGCmlWIfJPtJZN1a4H9cYvj1Q4b5jwbdp1hs0AuASOBZqjJKLYFMxmveKzoDX4sFtitzhFUyziKQrwU8PTpA1bNBnfjFqtGhXWzxrhfxWjk0bKZ2ZX9QK4t5ft9+cnhy6c/+PfqI/9dfuDbyxd8//gn/1xc8PXDe66v/+bq90su3r2i2yzTndcIJb+oM0dBYpllGBgpGCQZynXvLIe8dR1e93ucd9rcG/T51TR57lnsjh3MXgddb9GYy7NuVLm/rEsMdbRc0mEwA30/AQd4oyG39TpnqspUy3FSyBMUs9yUTqy6hl5UGMoAYskxXCyw51aZ/tCVszKqqqAkU/S8YQom07W9Hmsy1XNNY0dyG0oZFZV2WUEvKbQKGbaDFifbLo8Pt3h2NGFV8EpenXVo213BBJQuk8F0OgsogqwNupz9dJfbP++xd3CHzckKY7fLTtxma9TFWiyzvmQxktyNZomFqkw5K1O2nV6an+cPUrjZqKTg0qDDp/1dvjw84mp6wvvjfV4ebfLu8Ro7t0yCWpFlXTbgRplI8LYMKAUdARPI9QSVpW7Ml8nI7gWayl8CJ/VZ6lLqkavz5vwWm3GHQ1mnZ8MbnNarRLU8tVImXZv/Af9wO940LSwgAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="performance concerns"\n        title=""\n        src="/interpreter/static/79-performance-concerns-ed0430cbd4b6e852a294d4705a933bee-83a8b.png"\n        srcset="/interpreter/static/79-performance-concerns-ed0430cbd4b6e852a294d4705a933bee-8992e.png 163w,\n/interpreter/static/79-performance-concerns-ed0430cbd4b6e852a294d4705a933bee-ae0a7.png 325w,\n/interpreter/static/79-performance-concerns-ed0430cbd4b6e852a294d4705a933bee-83a8b.png 650w,\n/interpreter/static/79-performance-concerns-ed0430cbd4b6e852a294d4705a933bee-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>This benchmark measures the mount time of various CSS in JS libraries vs. inline styles (i.e. without a library).</p>\n<p>Any benchmark should be taken with a grain of salt. It is <em>incredibly</em> difficult to measure real-world performance, so most resort to doing large-scale operations (e.g. rendering a listview with thousands of rows, re-rendering a large table, etc.), which are generally not at all indicative of the type of application most are building.</p>\n<p>They can be helpful to get a general idea for performance, these are not necessarily what you’ll see in real world applications. </p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABmklEQVQoz62Sy0tCQRTGJSrTVIxKb96XXtFeZllUiBaZIYZkZUZUSmBSm7KioiKKIBIXRdCuBy1aBO1q1b5Ni6B/6Wvu1StmelctvjlnZs75zcyZo9LRVjRaeElFv40jloPOYi1YLr9WrtKcgq8SB1niop61wyh0QM87oKZ5yeqIDFbnH4mxMkjWbyDFwuTxock/CXc0ga3TGzjCcQihWbDj02ACUfATM5LPh+akWC3JqQoUN6k+L4KLq4il9/H88oXN3Swucw+gvEFwI2EY+v1oGQqgeTiIZtcgeboCUEMxMHcP4PvtE4dHV7h/+sB19hGvt+84uMth/fwYE9NJeEJRDE/NobXLA60ykAXt6sfxwQViy+tIZc4wu5BGIplBfHsNkdQK9jIniMwvYWN3B63tPQTIKdSQFNjACqglN9UyVtSZLdBxAoz2dhg5JxppATVmGg0krp4SP8NGOoD8cDmwvG30ck3J6UynG72+Mbh9o6CJL7aLvF+EibnV2qZ0ni8DB7WJlqQpe16lHEWgPNczNklKMRWB/6EfZJs8NiUwcXwAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="performance chart-example"\n        title=""\n        src="/interpreter/static/80-performance-chart-example-826a0c53ce2fb661e34ab015087331e8-83a8b.png"\n        srcset="/interpreter/static/80-performance-chart-example-826a0c53ce2fb661e34ab015087331e8-8992e.png 163w,\n/interpreter/static/80-performance-chart-example-826a0c53ce2fb661e34ab015087331e8-ae0a7.png 325w,\n/interpreter/static/80-performance-chart-example-826a0c53ce2fb661e34ab015087331e8-83a8b.png 650w,\n/interpreter/static/80-performance-chart-example-826a0c53ce2fb661e34ab015087331e8-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>So what should we make of all of this?</p>\n<ol>\n<li>CSS in JS solves very real problems of CSS</li>\n<li>It does so in a clean, component focused, and developer friendly way</li>\n<li>It abstracts the CSS model to the component level, rather than the document level</li>\n<li>It leverages the full power of JavaScript and the JavaScript ecosystem to <em>enhance</em> CSS</li>\n<li>…</li>\n<li>Profit</li>\n</ol>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAC7klEQVQozz2S3U+bZRjGe2SiU8GNAS2O0o61FAIOXGU22/goDqQULF1fJpS2tG/b9+3H+9GPtx98LCyTGKNx4sEWF5ItWcxiVA4WY+bB4qFn/g/GxD/j57MmenDlPrif/K7ruZ7H1u8cYsDtou/CIGf7HQyNeLH0KkeZDHvLQe7eWmMvEqKysoi1OEtjcQZj7kM+9k8y5HJzpqefN8/b6ep10NXnwGZ3uRgcvsiAa6gDtLs9HDb2OVIL7K0ucRDfpLB8k7XANFvzs6xcmWLdP8VHYl5wOjuQV8BuMbv7BrD1imR256BIOMBb53p4rbuHQiJDfukmycAkteUFzNASN7yX8Hs9jDnfJTTh5ZLDzutd7/DG2V7OnOuj63w/bwuwbeLKJFdvXOfa3DyBmSCpnMrxV8ecHH3Gg4MW+/ENrFgE7bbE5/UaxnYcK51Ay2VZjd7CPT4hNI7TN4pj2IMtvB5mOy2jFE2yeZMff3rOX3//w8vTU/78/SXPHz3kjxe/8suz7/n52284/fpLfntywosfnnH84CGL0Rgz4RD+4Byj0x9gC0XCbCZ3yOTKyDmdVvsu948fcf/gkJN2naf37vD4oM13R/c61/8iIfFkv0FLTiGlZFakOMFPIvgXFvBNT2NbWV/rANPZInnVJK+YqKUG8YjEvMdNcMTDrHeYgPci18Z8XPeNcNU1SODyZdK5EnK+xPZOBmnzU1YFyxaORdlKZcRCQylUKJUtjMouSlYjIPp53zfG1Ogok0Lvjfg6Gvd42JC2uNM+ZL/epl21xFfTMVRZAKUYt5Ppjtt/wLLexDDbFNQqyqvEQoroN583yIlaMtkyWcWgWW2xW2thGRXMYgFVTgjgxgZSIk1KLpITh4rlOprWpKw10I220C6a3hYmLbFriDoscsUaaUWnZlq0Kg0qZY1SPktmZ1M8SkwiGk+RlAvCVUctVjuw/1VuitTNDkwp1smqFdIiaVKkNPUaVb3CdipFRIoSia3yL2HpvSWjgSV/AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="wrap up-intro"\n        title=""\n        src="/interpreter/static/81-wrap-up-intro-c21911631717782f6f0849afbb9324d7-83a8b.png"\n        srcset="/interpreter/static/81-wrap-up-intro-c21911631717782f6f0849afbb9324d7-8992e.png 163w,\n/interpreter/static/81-wrap-up-intro-c21911631717782f6f0849afbb9324d7-ae0a7.png 325w,\n/interpreter/static/81-wrap-up-intro-c21911631717782f6f0849afbb9324d7-83a8b.png 650w,\n/interpreter/static/81-wrap-up-intro-c21911631717782f6f0849afbb9324d7-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>If I were to give a call to action, or best advice for getting started, I would give this:</p>\n<ol>\n<li>Start with <code>styled-components</code> as a starter (or final!) CSS in JS library</li>\n<li>It tends to be the most approachable as it uses actual CSS syntax, rather than style objects</li>\n<li>If you’re a fan, consider experimenting with other libraries in the ecosystem; who knows, you may like them even more than styled-components!</li>\n</ol>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABL0lEQVQoz5WS2W6DMBBF81jwghcaHNuEBJqtNHST+v9/djtBokoIadOH0cjbmTtzPRNCgHOOPjMGay289wghwAePqloiz3OkaYrh7jjOGbMLIGVrNFwxR1EU8AuH4CMVCNDaEJRNQm8DWQrlFnB1g83mCSYuUZQcLmqYPIMy8p9AasuEEnHX4nl/QGi2WG0XiGuFsM568LijPxQy6Pkj6rZEs3Oom4gyVmBMIE04WMqvYL8CGeMwlqP9UgTNICRD8pBcPBziblOUNdBWQ5I5TGaQWkMrQaZkVJAKJEmf72qZ0QztydWXd9THNxw+PlG1R3Rdg9duR0ZtsFpVcK74gZ4rnlSolUJGoaSEIXWSsiSlQtDamP6fKjofK7sCTg37pGK8HvZufZ/ZlOx74tbdbydABKxf1WeTAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="instructions"\n        title=""\n        src="/interpreter/static/82-instructions-2f9f08a9c9e5a42d59825090ccb2b3cd-83a8b.png"\n        srcset="/interpreter/static/82-instructions-2f9f08a9c9e5a42d59825090ccb2b3cd-8992e.png 163w,\n/interpreter/static/82-instructions-2f9f08a9c9e5a42d59825090ccb2b3cd-ae0a7.png 325w,\n/interpreter/static/82-instructions-2f9f08a9c9e5a42d59825090ccb2b3cd-83a8b.png 650w,\n/interpreter/static/82-instructions-2f9f08a9c9e5a42d59825090ccb2b3cd-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>Overall, I’m <em>very</em> enthused with the direction that CSS in JS is taking and the things it’s doing for the ecosystem. I think it provides very tangible benefits to any application, particularly in the approach it takes to solve some of the problems of CSS <em>now,</em> and does so in a way that feels like a real improvement over authoring in CSS.</p>\n<p>If I were to start a new project right this moment, I’d author it using one of the CSS in JS libraries we’ve talked about, and I’d feel very enthused with that direction.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAADBklEQVQozx2S+U/TZxzHv0HCLEcPCnwpFAotFHpQoPbgKlcLjDErtCKC0REUD0bmsszNEPGIJF4hooLDIFFnhtucR1QUr2i8gM3o1F/0r3n5kR+ePHmOvJ7X5/N+lJ/6OhgZ6GL/tjizh7azcGGE22f3cHd2H/3ReiotKg6TkTpnAZHKYurLbJwd282nxb95vTDLhyeX+bT8D/8/usTzG1MoW6LN9HdG2Bpr4cSvWznyywATo0Mc3zOALVNL5leJGJMS0SUm4DFlECxQCZZaWL71G//eOcd/92b48GyOxfkZHl89heJQdThz0qkVg6GuRmJ+O311bgbCldiz06myZLPJ76C/ys1BMR6sKaPGZWX55iSLN06zdHOKd2L6SuweXxlHafAUE/GW0uZ3MRyP0FvnYXNjJYNtAXyFJlpK8/k57GOkNcCBjlqGQ+UMx8K8uTvNi6snBTrJ+/vneXX9DPcvH0Fpr/XSGa6msynAznWNxINONtZ62CLQtV477a5CvhGjzX7Z9znp8zkY3xHnzfw0z/4aZ+kL8MHvvLw2ycLFMZSQNLnF7+brgJvt0Qai3hLWB130SGkbqlzEKorZJKD+oJsfm3zsDlUw8X0Pb+9N83TuuADP8PHlFZZuTQnwMIrfZlpJstlTxODaRlrdVoHaWSfgroCTaIWdmNtGuDiPb8W2VwxD9nz2DfVImSd5cW1iBfbwj2PMnx9FGY43011fTkhC+QKtlzlaVcb6hjVi7sIpwVTnq4SsOQK0slHsQ4U52LJ0bJOenxv7gYdzJ3j651HuzOxF6W720RsJ4i/KZY3VRDTkpUlCKjVn4ZBhyzJQYtTSIMBoWZH000aJmo7ZkCpneqpl3VZdzuhQNw8uimG72OyMt9IipQQdBVjlkkmrITt1NWZ9KkbNatISEnAJxJ+nYpE9ky6FfKOOggwdFnnMrE/Bkp7G6K4ulLgk/J30rqOmnCLVQIYmaQVo0iYLVIOarCFToFkyp6xahT4pCTUlmTyDllyxNBvSBK4nVx4KyBf7DCwwpuJQMlu1AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="happy"\n        title=""\n        src="/interpreter/static/83-happy-673f3998ab5c5059cb0c7266d74b748d-83a8b.png"\n        srcset="/interpreter/static/83-happy-673f3998ab5c5059cb0c7266d74b748d-8992e.png 163w,\n/interpreter/static/83-happy-673f3998ab5c5059cb0c7266d74b748d-ae0a7.png 325w,\n/interpreter/static/83-happy-673f3998ab5c5059cb0c7266d74b748d-83a8b.png 650w,\n/interpreter/static/83-happy-673f3998ab5c5059cb0c7266d74b748d-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>The React community can certainly inspire what many have called “selection anxiety.” The proliferation of libraries, techniques, etc. can make it incredibly hard—especially as a beginner—to know what choice to make, and whether the choice is <em>most</em> correct.</p>\n<p>To help alleviate this, I recently created what I’m calling the “CSS in JS Playground,” which is a live-editable comparison of some of the most common CSS in JS libraries.</p>\n<p>My hope is that this tool will help each of you get a feel for each of the libraries, and hopefully empower you to make a more informed decision for what is best for <em>your</em> particular app and use cases.</p>\n<h2 id="features"><a href="#features" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Features</h2>\n<ul>\n<li>\n<p>Live editing and near instant preview of the code changes (using a web worker and the buble transpiler!)</p>\n</li>\n<li>\n<p>Service worker integration for better offline support</p>\n</li>\n<li>\n<p>A <em>rudimentary</em> file system! Add a file, and import it in the main index file!</p>\n</li>\n<li>\n<p>Persistence! Update any file (or add additional files) and you can share that URL with your friends</p>\n</li>\n<li>\n<p>Theming by way of a light/dark theme</p>\n</li>\n</ul>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAB8UlEQVQoz4WRzWsTQRiHS0IuZpMcTLf1oNJkkybb3c3H7iabUGNTKVIRxKO2RQs99X/wKnopehB68qRS8NKDKKI0FunFi3jyImljKbUKfoEkxsLTybaRBNs48PDuzDDP/t6ZvkAgQAvpoMryAEPRGNGYyukhhcHBE+5af7+M7DJA+HgYOSy7VZIkl7anr/3hSsWGbpiMliZwimNYuVHSWQfNsEhZDrqVd1HTFiNirqh6b6Hf70dXLexCCdt2iCdMIpE0WqrIvTcPufF2kfm1BaYqt7j8+jb5hbl92VHCY36JVNqkPDmOnikynMgTj9sY5hnuby3x4Ncyi18fc/fzEo+az7n58k6vhJJIKGGks5ybLJOxiqJVB1XNYebPsryxytr397z7VmXj5zZN4MVKxe3qcKEkWhZSPWEzbp0XbRbQ9ALxYQvTKrO5/YPfwtKoQ72+S2usVFaPFrrRhTCmpMgYJVRNPIBIqMRMMtkxPu3s8Ge3KaRN6o3GgfDVf4SCSNQgOVIkmXRIqq2EOXLOBB+qNdZrH6ltblFdr4kffOHJ02cEg8HewpOnFJFKJ6JoRFvENHGXNjPX5piameXq9CxXpq+78wsXL/092yXsXGiLu/Hj9Xq78Hg8+Hw+9zE7HV0J25tdSPs1FAr9Q7vdzkB72NhrSbuo8fEAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="css in-js-playground"\n        title=""\n        src="/interpreter/static/84-css-in-js-playground-7591621d314becb55a3aca6e7c6682a7-83a8b.png"\n        srcset="/interpreter/static/84-css-in-js-playground-7591621d314becb55a3aca6e7c6682a7-8992e.png 163w,\n/interpreter/static/84-css-in-js-playground-7591621d314becb55a3aca6e7c6682a7-ae0a7.png 325w,\n/interpreter/static/84-css-in-js-playground-7591621d314becb55a3aca6e7c6682a7-83a8b.png 650w,\n/interpreter/static/84-css-in-js-playground-7591621d314becb55a3aca6e7c6682a7-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>One of the best ways I’ve found to keep up with the latest technology updates, as well as just edify your currenet knowledge of common front-end (read: CSS in JS!) knowledge is to follow active community leaders on Twitter.</p>\n<p>Each of the people listed here are worth a follow, as they have some really interesting, great things to say and share about CSS in JS.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABPUlEQVQoz5VTTU/CQBDtjzPx5r/xaOLBGA8aE5WDMdGTRWPilRCMciAqgWpBDVBSCiLlIr1Upd3d9lmXdoOkHzqXfTM7++bN7qyE0Hzf/7UuxrP2IpPiEiilsG1b+K+6jm6rxbHneahVb2Gaw1hSaZ4s2rQsC4qigBDC/ZO9HLbW1jmeOg6OdjfQfLgPC7Bkwmh9n0xgjsdwXZfHNF1D1+iJQ0Z/APvjM11h1A4n6HSQl2WRLJ8d4Pxyn+OvqYOV5SVc5E/F9WS2PArUKaoKJ2jvx9pqE4PnF5FXLBRghIojEamE/Z6B62IJ1Jv5JUVHuWFw7BKK1c0dXFVmd8iYl/LKIcFo+Ib6XRWhi5t6G5VHjWMStLh9eIxa4+nvClmQRBgTBJQ4YNTl+F9zmDXI84WTPkLsYC8eiCNJIvwGGixP6QEgLDUAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="people to-follow"\n        title=""\n        src="/interpreter/static/85-people-to-follow-f5049413db7909f68ea1c26c079ca60d-83a8b.png"\n        srcset="/interpreter/static/85-people-to-follow-f5049413db7909f68ea1c26c079ca60d-8992e.png 163w,\n/interpreter/static/85-people-to-follow-f5049413db7909f68ea1c26c079ca60d-ae0a7.png 325w,\n/interpreter/static/85-people-to-follow-f5049413db7909f68ea1c26c079ca60d-83a8b.png 650w,\n/interpreter/static/85-people-to-follow-f5049413db7909f68ea1c26c079ca60d-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>This talk, and so many other things in the front-end community, would not be possible without the work of so many others. To them, I am so very grateful. Hopefully I, too, have contributed to the conversation!</p>\n<blockquote>\n<p>If I have seen further, it is by standing on the shoulders of giants</p>\n</blockquote>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABcElEQVQoz5WSW0sCURSF/V9RRD2XM14qqUiCIqjUPKPGpCVWWHnpgpgUQc/1EtFDb/0Ff42m1Vntfc5Mao5BDx9r5nD22mvvGR9SASgsU6lU70EgHURbmOhaAXwQHeeZ+bT0Hb4rnToX34AZ6VfSD4hZNFem8BwaxwvxRLzOT+AtMolHcwzN6DSQnIEUfh2gz9TXn1B1LKwCpW20KwLdsxjeqwKt4iY6pTi6pQRaBJ+jugOZjyrT4YRuFxoTFxZkzQbuDoHGPpEDLlNAfU+fFTeA7CJkbgnYneulc3Q44XUWeKhB3p9oOEluGZKaSTJQd4Sh7zs1I0dWei50skqCRo9pZY7WAF7H6ZYaF+U4cLxOdcaIkV3TmzxwW1B7VIasbMDF1SRgR4BMiMYN04pCA+m8E3LnqzTtLa0NWBsH+rye1VqmxPYC/Q1Gr9Zrh0q5eyasPxC/K3UJ6A/B/Nqd53/40+lPDAfT03Q44X/wqPkGgPtqavyaBiMAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="attributions"\n        title=""\n        src="/interpreter/static/86-attributions-e8d043fd57d5d7991edcad0a28d09290-83a8b.png"\n        srcset="/interpreter/static/86-attributions-e8d043fd57d5d7991edcad0a28d09290-8992e.png 163w,\n/interpreter/static/86-attributions-e8d043fd57d5d7991edcad0a28d09290-ae0a7.png 325w,\n/interpreter/static/86-attributions-e8d043fd57d5d7991edcad0a28d09290-83a8b.png 650w,\n/interpreter/static/86-attributions-e8d043fd57d5d7991edcad0a28d09290-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABD0lEQVQoz2P4Xxr0H4b/lQTCaWT8F4rRxZH1wDADMgeiAMouD4bgsmAkNpI4FsNQDUSy9UuB//+Hmd7/HwHx02yf/w+A9P0Mr/9vcn3B4iD8tTAAjwvRnP8i1+//wTjX/3tiXf8fj3f9fyzB7f+xJI//F1O9wGJ7Ylz+v83zA7sYt5dhhnbl/v8/rfr//978//8nlf3/P7vp//++gv//u4HifYX//7elQ7yOHDx4vTyz/v+/lZP//1s+4f+/aTX///UX/f9XG/P/HzhcQ///A4YpcZECUgSiKyP+/6uO+v+vCkiXAjXne///VxyAEcMQgwLxhyGYBmqGYxC/LBjDWyh68HmZFI24MAMpigfEQACUqmArG4qepAAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="links"\n        title=""\n        src="/interpreter/static/87-links-b07aac4738a897ef5ba27c46ceb19954-83a8b.png"\n        srcset="/interpreter/static/87-links-b07aac4738a897ef5ba27c46ceb19954-8992e.png 163w,\n/interpreter/static/87-links-b07aac4738a897ef5ba27c46ceb19954-ae0a7.png 325w,\n/interpreter/static/87-links-b07aac4738a897ef5ba27c46ceb19954-83a8b.png 650w,\n/interpreter/static/87-links-b07aac4738a897ef5ba27c46ceb19954-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>One final thank you to the organizers and sponsors of this conference, and for giving me an opportunity to present at my first ever conference.</p>\n<p>I’d like to also thank each of the attendees. Without you, each of us would be speaking to an empty room, and where’s the fun in that!?</p>\n<p>… and finally, I’d like to thank everyone who attended my NebraskaJS meetup, in particular <a href="https://twitter.com/mattdsteele?lang=en">Matthew Steele</a>, for invaluable advice and support with an earlier iteration of this talk. In addition, <a href="https://twitter.com/_philpl">Phil Plückthun</a> for some great advice, as well.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAC30lEQVQozzWSSW9bZRiF/QMoakRpKpo0g6c7+V4P147n63nItePYbmzHbmLj2nErt41J2lKLCgmE1A1EQizYlE0RQqKLShV0gUDd8bcePiKxONK3eZ9z3vN+jklG5dAyaMcVpnmFkSWjrH2E58aHRLav8XkrzEktybNBnmktzrgaZ1Ld4aRsMswZTOwUM9tk2Y2xaEZx3M1IHKcl+ikBKxjcEW/pxgqPxOAoqXExK/DDA4vv76WY2zr14BalkJOCfpNOdJuumBuknXTTbsYlBcf5rs5pReferilSSiyqAR43cixbJb7qlPnp6T4vv+zz6nmTFxOLXjWF5Xeyn9B42BQmzSRPeikWBxl6YjvHSV7GMrY5riQYlsOUjHW6CR/Pb5f5pmfzsF3lu6+/4PXFI3779gHv373l1Y8XvHv9M//89Tvv/3jDn7++5O83vzC24ziqIn5EvkW/FOWwFKMc1RjZJc5ET8uWxexgj3Z+h8ejFrNWjrM7+8z2M4waWZ4dFlj2K8yF8XxgM66EcBSMTTy3PqaejdMq5YhFokzHp7w4XbCcDLnbORAmopKGxbSgk9PWiLquYW5cYWB+wjCyTi/hJKte535dAGsRLyFNwgzHCUfTqHqIxl6H+yfnTEZzartt0qk8ndouZ6MDxqKK2bBNvxzl1HLSjnnoZ2W64rifNQI46mEnAdWDVzXQ9CA+v0k8kaVUrFMpNy5lBMJEzAidSob5UYcn8zGf2kkWWRfHApQJr2H6VjnfE0cpBjdRJReyquP2yuiBCP7gzqUymTJJkS4ciRMMmnR3i/TtIildfB3fmqhA5aio4NdW2HB+wCCxjiPpu4mqyHhljW2n6zLh//pv/ZAZwx8w8esGR7UCnVKSoukm7FnFjkg001505SpbAhiUruJQnSuoqoKkaGxsbiFrxiVMM0wkUYMhYJKs4BOm0z2Lp50knYyPoPs6Kb+L2zk/Mf8qbvcVnEL/AoDkj/FL/hAgAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="fin the-end-thats-all-folks"\n        title=""\n        src="/interpreter/static/88-fin-the-end-thats-all-folks-fff0f71d9a105177cd5b6ec7473d060f-83a8b.png"\n        srcset="/interpreter/static/88-fin-the-end-thats-all-folks-fff0f71d9a105177cd5b6ec7473d060f-8992e.png 163w,\n/interpreter/static/88-fin-the-end-thats-all-folks-fff0f71d9a105177cd5b6ec7473d060f-ae0a7.png 325w,\n/interpreter/static/88-fin-the-end-thats-all-folks-fff0f71d9a105177cd5b6ec7473d060f-83a8b.png 650w,\n/interpreter/static/88-fin-the-end-thats-all-folks-fff0f71d9a105177cd5b6ec7473d060f-38f8d.png 800w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>',
id:"/Users/okwen/www/gatsbyblog/content/blog/2017-10-27-css-in-js-benefits-drawbacks-and-tooling/index.md absPath of file >>> MarkdownRemark",timeToRead:25,fields:{slug:"/css-in-js-benefits-drawbacks-and-tooling"},frontmatter:{date:"October 28, 2017",draft:null,tags:["css","css in js","react","component styling","styled-components","glamorous"],title:"CSS In JS: Benefits, Drawbacks, and Tooling"}}],tagName:"css in js"}}}});
//# sourceMappingURL=path---tags-css-in-js-733b0b6ae26b107cf272.js.map