{"id":25046,"date":"2024-09-13T09:48:11","date_gmt":"2024-09-13T08:48:11","guid":{"rendered":"https:\/\/wordpress-583806-4798031.cloudwaysapps.com\/widmark\/"},"modified":"2024-11-15T16:20:53","modified_gmt":"2024-11-15T15:20:53","slug":"widmark","status":"publish","type":"post","link":"https:\/\/informator.se\/en\/widmark\/","title":{"rendered":"CSS selectors are evil and JS is the solution"},"content":{"rendered":"\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<h3 style=\"text-align: left;\">The premise<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">In this blog post we&#8217;ll demonstrate&#8230;<\/div>\n<ul style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin-bottom: 10px; margin-top: 0px;\">\n<li style=\"box-sizing: border-box;\">why CSS inherently doesn&#8217;t scale<\/li>\n<li style=\"box-sizing: border-box;\">how BEM is a partial solution<\/li>\n<li style=\"box-sizing: border-box;\">how inline styles through JS is a (nearly) full solution<\/li>\n<\/ul>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Towards the end we&#8217;ll use React as a vehicle for our example, but the concepts apply equally well to Angular or any other modern JS framework. We won&#8217;t use any &#8220;CSSinJS library&#8221;.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">A small caveat: according to many, what we&#8217;re describing in this post isn&#8217;t strictly CSSinJS, but inline styles via JS. However at this stage the distinction doesn&#8217;t matter much, so if you came here because you&#8217;re curious about CSSinJS, by all means read on!<\/div>\n<h3 style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;\">Our example<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Imagine we have a complex webapp with lots of styling. We now want to add a new UI concept; an\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">explanation box<\/span>, meant to be shown inside a bigger context to explain some related concept.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Here&#8217;s what it should look like:<\/div>\n<figure style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin: 0px;\"><img decoding=\"async\" style=\"border: 0px; box-sizing: border-box; height: 307px; margin: 0px 0px 0.5em; max-width: 100%; vertical-align: middle; width: 667.5px;\" src=\"https:\/\/media.graphcms.com\/DLcXvGbGTDGeKHcbTkMV\" alt=\"cssinjsbox.png\" \/><\/figure>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Disregarding styling, here&#8217;s the markup:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div&gt;<br \/><br \/> \u00a0&lt;h2&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/>&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">We want to apply these styles to the\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">explanation box<\/span>\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">div<\/code>:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">border-radius: 15px;<br \/><br \/>padding: 10px;<br \/><br \/>border: 2px solid springgreen;<br \/><br \/>background-color: moccasin;<br \/><br \/>color: magenta;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">And inside the box we want these styles for the\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">explanation headline<\/span>\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">font-weight: normal;<br \/><br \/>letter-spacing: 5px;<br \/><br \/>padding-left: 15px;<br \/><br \/>font-style: italic;<br \/><br \/>font-size: 14px;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">As an added spice, also imagine these styles being applied to\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">every\u00a0<\/span><code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\"><span style=\"box-sizing: border-box; font-weight: bold;\">h2<\/span><\/code>\u00a0in our app:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">font-family: Verdana;<br \/><br \/>font-size: 16px;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Now let&#8217;s start exploring how to add these styles to our markup!<\/div>\n<h3>Take 0 &#8211; inline styles<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">The most primitive solution is to simply shove all needed style rules into the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">style<\/code>\u00a0prop of every explanation box:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div style=\"border-radius: 15px; padding: 10px; border: 2px solid springgreen; background-color: moccasin; color: magenta;\"&gt;<br \/><br \/> \u00a0\u00a0\u00a0&lt;h2 style=\"font-family: Verdana; font-size: 14px; font-weight: normal; letter-spacing: 5px; padding-left: 15px; font-style: italic;\"&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0\u00a0\u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/> \u00a0&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">This is of course a horrible solution since<\/div>\n<ul style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin-bottom: 10px; margin-top: 0px;\">\n<li style=\"box-sizing: border-box;\">the HTML becomes super-bloated and unreadable<\/li>\n<li style=\"box-sizing: border-box;\">the styles can&#8217;t be reused<\/li>\n<li style=\"box-sizing: border-box;\">we&#8217;d be repeating &#8220;theme rules&#8221; (like the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12.600000381469727px; padding: 2px 4px;\">moccasin<\/code>\u00a0background color) all over the place<\/li>\n<\/ul>\n<h3>Take 1 &#8211; stylesheet with selectors<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">To counter the above we always put our styles in a separate CSS file, using\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">selectors<\/span>\u00a0to direct\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">where they are applied<\/span>.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">In order to be able to target explanation boxes we can\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">introduce a class name<\/span>\u00a0to the markup:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div class=\"explanationBox\"&gt;<br \/><br \/> \u00a0&lt;h2&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/>&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">In a separate CSS file we can now\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">apply the box styles<\/span>\u00a0like this:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">.explanationBox {<br \/><br \/> \u00a0border-radius: 15px;<br \/><br \/> \u00a0padding: 10px;<br \/><br \/> \u00a0border: 2px solid springgreen;<br \/><br \/> \u00a0background-color: moccasin;<br \/><br \/> \u00a0color: magenta;<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">We style the\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">explanation headline<\/span>\u00a0by using a\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">child combinator<\/span>\u00a0in the selector:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">.explanationBox &gt; h2 {<br \/><br \/> \u00a0font-weight: normal;<br \/><br \/> \u00a0letter-spacing: 5px;<br \/><br \/> \u00a0padding-left: 15px;<br \/><br \/> \u00a0font-style: italic;<br \/><br \/> \u00a0font-size: 14px;<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">The\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">generic\u00a0<\/span><code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\"><span style=\"box-sizing: border-box; font-weight: bold;\">h2<\/span><\/code><span style=\"box-sizing: border-box; font-weight: bold;\">\u00a0styles<\/span>\u00a0would get their own selector:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">h2 {<br \/><br \/> \u00a0font-family: Verdana;<br \/><br \/> \u00a0font-size: 16px;<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Note that both of these later selectors will have an opinion about the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">font-size<\/code>\u00a0of our explanation headline, but since\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">.explanationBox &gt; h2<\/code>\u00a0is more specific than\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>, the former will win.<\/div>\n<h3 style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;\">Unanswerable question 1 &#8211; the unknown killer problem<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">With our styles in a CSS file, we now have the following situation:<\/div>\n<figure style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin: 0px;\"><img decoding=\"async\" style=\"border: 0px; box-sizing: border-box; height: 260px; margin: 0px 0px 0.5em; max-width: 100%; vertical-align: middle; width: 667.5px;\" src=\"https:\/\/media.graphcms.com\/d45z5AMwRnK95xidH4Ty\" alt=\"cssinjs-selector.svg\" \/><\/figure>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">The rule blobs are connected with their respective target elements via\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">selectors<\/span>. While they work fine for our simple example, they\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">don&#8217;t scale well<\/span>. As the app grows it is very easy to end up in a messy situation where we are scared to change both HTML and CSS, in fear of some selector somewhere breaking.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Even in our small example the main reasons for the unscalability are easy to demonstrate.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Look again at our HTML&#8230;<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div class=\"explanationBox\"&gt;<br \/><br \/> \u00a0&lt;h2&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/>&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">&#8230;and ponder this simple question with regards to the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">div<\/code>:<\/div>\n<blockquote style=\"border-left-color: #000000; border-left-style: solid; border-left-width: 1px; box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 17.5px; margin: 0px 0px 50px; padding: 10px 20px;\">\n<p><em style=\"box-sizing: border-box;\">What styles are applied to this element?<\/em><\/p>\n<\/blockquote>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">We have no easy way of knowing! The elements are being shot at by CSS selectors somewhere out there in the dark. From this side we have no idea whether any of them are targetting this specific element.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">It is\u00a0<em style=\"box-sizing: border-box;\">likely<\/em>\u00a0that there is a selector targetting the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">.explanationBox<\/code>\u00a0class in a selector somewhere. But because CSS selectors are global we&#8217;d have to\u00a0<em style=\"box-sizing: border-box;\">search\u00a0<\/em><em style=\"box-sizing: border-box;\"><span style=\"box-sizing: border-box; font-weight: bold;\">all<\/span><\/em><em style=\"box-sizing: border-box;\">\u00a0CSS<\/em>\u00a0in order to know.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">And consider asking the same question about the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0&#8211; it doesn&#8217;t have a class, which might imply it is not in the crosshairs, but it is in fact targeted by\u00a0<em style=\"box-sizing: border-box;\">two<\/em>\u00a0selectors;\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0and\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">.explanationBox &gt; h2<\/code>.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Just by looking at the HTML we\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">cannot know what styles, if any, are applied to an element<\/span>.<\/div>\n<h3 style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;\">Unanswerable question 2 &#8211; the unknown victim problem<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">We find the reverse of the same problem in the CSS file. Look for example at this part:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">.explanationBox &gt; h2 {<br \/><br \/> \u00a0font-weight: normal;<br \/><br \/> \u00a0letter-spacing: 5px;<br \/><br \/> \u00a0padding-left: 15px;<br \/><br \/> \u00a0font-style: italic;<br \/><br \/> \u00a0font-size: 14px;<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Now imagine trying to answer this question:<\/div>\n<blockquote style=\"border-left-color: #000000; border-left-style: solid; border-left-width: 1px; box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 17.5px; margin: 0px 0px 50px; padding: 10px 20px;\">\n<p><em style=\"box-sizing: border-box;\">To which elements are these styles applied?<\/em><\/p>\n<\/blockquote>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">This is impossible to know. We&#8217;d have to search through all our HTML files, or templates in case of a dynamic app. And in a dynamic setting the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">.explanationBox<\/code>\u00a0element and the contained\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0might live in completely different places, making it even harder to figure out the answer.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">This makes editing a CSS file really scary. Can we remove this part? If the question above was easy to answer then we could know whether it is safe to remove a certain part, but now we cannot!<\/div>\n<h3 dir=\"ltr\" style=\"text-align: left;\">Take 2 &#8211; using the BEM naming convention<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">There has been many attempts to mitigate the mess caused by the inability to answer these two questions. One such attempt is the\u00a0<a style=\"box-sizing: border-box; color: #6bb842; text-decoration: none;\" href=\"https:\/\/en.bem.info\/\">BEM naming convention<\/a>, which basically boils down to&#8230;<\/div>\n<ul style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin-bottom: 10px; margin-top: 0px;\">\n<li style=\"box-sizing: border-box;\">have selectors consist of a single class always<\/li>\n<li style=\"box-sizing: border-box;\">name the classes according to a strict convention<\/li>\n<\/ul>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">For our example, the explanation box would be a\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">Block<\/span>, while the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0inside of that would be an\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">Element<\/span>\u00a0of that block. This is the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">B<\/code>\u00a0and\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">E<\/code>\u00a0of\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">BEM<\/code>\u00a0(the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">M<\/code>\u00a0stands for modifier but we don&#8217;t need that here).<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Using BEM logic our markup would become:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div class=\"explanationBox\"&gt;<br \/><br \/> \u00a0&lt;h2 class=\"explanationBox__headline\"&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/>&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">The CSS would now be:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; b<\/span><\/span>\r\n<h4><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">field_5d00a55c1902a\u00a0<\/span><\/span><\/h4>\r\n<span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">field_5d00a52019028<\/span><\/span><!-- \/wp:group --><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"><!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:freeform -->\n<h3 style=\"text-align: left;\">The premise<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">In this blog post we'll demonstrate...<\/div>\n<ul style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin-bottom: 10px; margin-top: 0px;\">\n<li style=\"box-sizing: border-box;\">why CSS inherently doesn't scale<\/li>\n<li style=\"box-sizing: border-box;\">how BEM is a partial solution<\/li>\n<li style=\"box-sizing: border-box;\">how inline styles through JS is a (nearly) full solution<\/li>\n<\/ul>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Towards the end we'll use React as a vehicle for our example, but the concepts apply equally well to Angular or any other modern JS framework. We won't use any \"CSSinJS library\".<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">A small caveat: according to many, what we're describing in this post isn't strictly CSSinJS, but inline styles via JS. However at this stage the distinction doesn't matter much, so if you came here because you're curious about CSSinJS, by all means read on!<\/div>\n<h3 style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;\">Our example<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Imagine we have a complex webapp with lots of styling. We now want to add a new UI concept; an\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">explanation box<\/span>, meant to be shown inside a bigger context to explain some related concept.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Here's what it should look like:<\/div>\n<figure style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin: 0px;\"><img decoding=\"async\" style=\"border: 0px; box-sizing: border-box; height: 307px; margin: 0px 0px 0.5em; max-width: 100%; vertical-align: middle; width: 667.5px;\" src=\"https:\/\/media.graphcms.com\/DLcXvGbGTDGeKHcbTkMV\" alt=\"cssinjsbox.png\" \/><\/figure>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Disregarding styling, here's the markup:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div&gt;<br \/><br \/> \u00a0&lt;h2&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/>&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">We want to apply these styles to the\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">explanation box<\/span>\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">div<\/code>:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">border-radius: 15px;<br \/><br \/>padding: 10px;<br \/><br \/>border: 2px solid springgreen;<br \/><br \/>background-color: moccasin;<br \/><br \/>color: magenta;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">And inside the box we want these styles for the\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">explanation headline<\/span>\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">font-weight: normal;<br \/><br \/>letter-spacing: 5px;<br \/><br \/>padding-left: 15px;<br \/><br \/>font-style: italic;<br \/><br \/>font-size: 14px;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">As an added spice, also imagine these styles being applied to\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">every\u00a0<\/span><code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\"><span style=\"box-sizing: border-box; font-weight: bold;\">h2<\/span><\/code>\u00a0in our app:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">font-family: Verdana;<br \/><br \/>font-size: 16px;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Now let's start exploring how to add these styles to our markup!<\/div>\n<h3>Take 0 - inline styles<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">The most primitive solution is to simply shove all needed style rules into the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">style<\/code>\u00a0prop of every explanation box:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div style=\"border-radius: 15px; padding: 10px; border: 2px solid springgreen; background-color: moccasin; color: magenta;\"&gt;<br \/><br \/> \u00a0\u00a0\u00a0&lt;h2 style=\"font-family: Verdana; font-size: 14px; font-weight: normal; letter-spacing: 5px; padding-left: 15px; font-style: italic;\"&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0\u00a0\u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/> \u00a0&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">This is of course a horrible solution since<\/div>\n<ul style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin-bottom: 10px; margin-top: 0px;\">\n<li style=\"box-sizing: border-box;\">the HTML becomes super-bloated and unreadable<\/li>\n<li style=\"box-sizing: border-box;\">the styles can't be reused<\/li>\n<li style=\"box-sizing: border-box;\">we'd be repeating \"theme rules\" (like the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12.600000381469727px; padding: 2px 4px;\">moccasin<\/code>\u00a0background color) all over the place<\/li>\n<\/ul>\n<h3>Take 1 - stylesheet with selectors<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">To counter the above we always put our styles in a separate CSS file, using\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">selectors<\/span>\u00a0to direct\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">where they are applied<\/span>.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">In order to be able to target explanation boxes we can\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">introduce a class name<\/span>\u00a0to the markup:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div class=\"explanationBox\"&gt;<br \/><br \/> \u00a0&lt;h2&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/>&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">In a separate CSS file we can now\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">apply the box styles<\/span>\u00a0like this:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">.explanationBox {<br \/><br \/> \u00a0border-radius: 15px;<br \/><br \/> \u00a0padding: 10px;<br \/><br \/> \u00a0border: 2px solid springgreen;<br \/><br \/> \u00a0background-color: moccasin;<br \/><br \/> \u00a0color: magenta;<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">We style the\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">explanation headline<\/span>\u00a0by using a\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">child combinator<\/span>\u00a0in the selector:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">.explanationBox &gt; h2 {<br \/><br \/> \u00a0font-weight: normal;<br \/><br \/> \u00a0letter-spacing: 5px;<br \/><br \/> \u00a0padding-left: 15px;<br \/><br \/> \u00a0font-style: italic;<br \/><br \/> \u00a0font-size: 14px;<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">The\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">generic\u00a0<\/span><code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\"><span style=\"box-sizing: border-box; font-weight: bold;\">h2<\/span><\/code><span style=\"box-sizing: border-box; font-weight: bold;\">\u00a0styles<\/span>\u00a0would get their own selector:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">h2 {<br \/><br \/> \u00a0font-family: Verdana;<br \/><br \/> \u00a0font-size: 16px;<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Note that both of these later selectors will have an opinion about the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">font-size<\/code>\u00a0of our explanation headline, but since\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">.explanationBox &gt; h2<\/code>\u00a0is more specific than\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>, the former will win.<\/div>\n<h3 style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;\">Unanswerable question 1 - the unknown killer problem<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">With our styles in a CSS file, we now have the following situation:<\/div>\n<figure style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin: 0px;\"><img decoding=\"async\" style=\"border: 0px; box-sizing: border-box; height: 260px; margin: 0px 0px 0.5em; max-width: 100%; vertical-align: middle; width: 667.5px;\" src=\"https:\/\/media.graphcms.com\/d45z5AMwRnK95xidH4Ty\" alt=\"cssinjs-selector.svg\" \/><\/figure>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">The rule blobs are connected with their respective target elements via\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">selectors<\/span>. While they work fine for our simple example, they\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">don't scale well<\/span>. As the app grows it is very easy to end up in a messy situation where we are scared to change both HTML and CSS, in fear of some selector somewhere breaking.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Even in our small example the main reasons for the unscalability are easy to demonstrate.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Look again at our HTML...<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div class=\"explanationBox\"&gt;<br \/><br \/> \u00a0&lt;h2&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/>&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">...and ponder this simple question with regards to the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">div<\/code>:<\/div>\n<blockquote style=\"border-left-color: #000000; border-left-style: solid; border-left-width: 1px; box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 17.5px; margin: 0px 0px 50px; padding: 10px 20px;\">\n<p><em style=\"box-sizing: border-box;\">What styles are applied to this element?<\/em><\/p>\n<\/blockquote>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">We have no easy way of knowing! The elements are being shot at by CSS selectors somewhere out there in the dark. From this side we have no idea whether any of them are targetting this specific element.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">It is\u00a0<em style=\"box-sizing: border-box;\">likely<\/em>\u00a0that there is a selector targetting the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">.explanationBox<\/code>\u00a0class in a selector somewhere. But because CSS selectors are global we'd have to\u00a0<em style=\"box-sizing: border-box;\">search\u00a0<\/em><em style=\"box-sizing: border-box;\"><span style=\"box-sizing: border-box; font-weight: bold;\">all<\/span><\/em><em style=\"box-sizing: border-box;\">\u00a0CSS<\/em>\u00a0in order to know.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">And consider asking the same question about the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0- it doesn't have a class, which might imply it is not in the crosshairs, but it is in fact targeted by\u00a0<em style=\"box-sizing: border-box;\">two<\/em>\u00a0selectors;\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0and\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">.explanationBox &gt; h2<\/code>.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Just by looking at the HTML we\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">cannot know what styles, if any, are applied to an element<\/span>.<\/div>\n<h3 style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;\">Unanswerable question 2 - the unknown victim problem<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">We find the reverse of the same problem in the CSS file. Look for example at this part:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">.explanationBox &gt; h2 {<br \/><br \/> \u00a0font-weight: normal;<br \/><br \/> \u00a0letter-spacing: 5px;<br \/><br \/> \u00a0padding-left: 15px;<br \/><br \/> \u00a0font-style: italic;<br \/><br \/> \u00a0font-size: 14px;<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Now imagine trying to answer this question:<\/div>\n<blockquote style=\"border-left-color: #000000; border-left-style: solid; border-left-width: 1px; box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 17.5px; margin: 0px 0px 50px; padding: 10px 20px;\">\n<p><em style=\"box-sizing: border-box;\">To which elements are these styles applied?<\/em><\/p>\n<\/blockquote>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">This is impossible to know. We'd have to search through all our HTML files, or templates in case of a dynamic app. And in a dynamic setting the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">.explanationBox<\/code>\u00a0element and the contained\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0might live in completely different places, making it even harder to figure out the answer.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">This makes editing a CSS file really scary. Can we remove this part? If the question above was easy to answer then we could know whether it is safe to remove a certain part, but now we cannot!<\/div>\n<h3 dir=\"ltr\" style=\"text-align: left;\">Take 2 - using the BEM naming convention<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">There has been many attempts to mitigate the mess caused by the inability to answer these two questions. One such attempt is the\u00a0<a style=\"box-sizing: border-box; color: #6bb842; text-decoration: none;\" href=\"https:\/\/en.bem.info\/\">BEM naming convention<\/a>, which basically boils down to...<\/div>\n<ul style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin-bottom: 10px; margin-top: 0px;\">\n<li style=\"box-sizing: border-box;\">have selectors consist of a single class always<\/li>\n<li style=\"box-sizing: border-box;\">name the classes according to a strict convention<\/li>\n<\/ul>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">For our example, the explanation box would be a\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">Block<\/span>, while the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0inside of that would be an\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">Element<\/span>\u00a0of that block. This is the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">B<\/code>\u00a0and\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">E<\/code>\u00a0of\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">BEM<\/code>\u00a0(the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">M<\/code>\u00a0stands for modifier but we don't need that here).<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Using BEM logic our markup would become:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div class=\"explanationBox\"&gt;<br \/><br \/> \u00a0&lt;h2 class=\"explanationBox__headline\"&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/>&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">The CSS would now be:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; b<\/span><\/span>\r\n<h4><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">field_5d00a55c1902a\u00a0<\/span><\/span><\/h4>\r\n<span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">field_5d00a52019028<\/span><\/span><!-- \/wp:post-content --><!-- \/wp:group --><!-- wp:post-content --><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"><!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:freeform -->\n<h3 style=\"text-align: left;\">The premise<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">In this blog post we'll demonstrate...<\/div>\n<ul style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin-bottom: 10px; margin-top: 0px;\">\n<li style=\"box-sizing: border-box;\">why CSS inherently doesn't scale<\/li>\n<li style=\"box-sizing: border-box;\">how BEM is a partial solution<\/li>\n<li style=\"box-sizing: border-box;\">how inline styles through JS is a (nearly) full solution<\/li>\n<\/ul>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Towards the end we'll use React as a vehicle for our example, but the concepts apply equally well to Angular or any other modern JS framework. We won't use any \"CSSinJS library\".<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">A small caveat: according to many, what we're describing in this post isn't strictly CSSinJS, but inline styles via JS. However at this stage the distinction doesn't matter much, so if you came here because you're curious about CSSinJS, by all means read on!<\/div>\n<h3 style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;\">Our example<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Imagine we have a complex webapp with lots of styling. We now want to add a new UI concept; an\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">explanation box<\/span>, meant to be shown inside a bigger context to explain some related concept.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Here's what it should look like:<\/div>\n<figure style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin: 0px;\"><img decoding=\"async\" style=\"border: 0px; box-sizing: border-box; height: 307px; margin: 0px 0px 0.5em; max-width: 100%; vertical-align: middle; width: 667.5px;\" src=\"https:\/\/media.graphcms.com\/DLcXvGbGTDGeKHcbTkMV\" alt=\"cssinjsbox.png\" \/><\/figure>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Disregarding styling, here's the markup:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div&gt;<br \/><br \/> \u00a0&lt;h2&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/>&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">We want to apply these styles to the\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">explanation box<\/span>\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">div<\/code>:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">border-radius: 15px;<br \/><br \/>padding: 10px;<br \/><br \/>border: 2px solid springgreen;<br \/><br \/>background-color: moccasin;<br \/><br \/>color: magenta;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">And inside the box we want these styles for the\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">explanation headline<\/span>\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">font-weight: normal;<br \/><br \/>letter-spacing: 5px;<br \/><br \/>padding-left: 15px;<br \/><br \/>font-style: italic;<br \/><br \/>font-size: 14px;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">As an added spice, also imagine these styles being applied to\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">every\u00a0<\/span><code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\"><span style=\"box-sizing: border-box; font-weight: bold;\">h2<\/span><\/code>\u00a0in our app:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">font-family: Verdana;<br \/><br \/>font-size: 16px;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Now let's start exploring how to add these styles to our markup!<\/div>\n<h3>Take 0 - inline styles<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">The most primitive solution is to simply shove all needed style rules into the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">style<\/code>\u00a0prop of every explanation box:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div style=\"border-radius: 15px; padding: 10px; border: 2px solid springgreen; background-color: moccasin; color: magenta;\"&gt;<br \/><br \/> \u00a0\u00a0\u00a0&lt;h2 style=\"font-family: Verdana; font-size: 14px; font-weight: normal; letter-spacing: 5px; padding-left: 15px; font-style: italic;\"&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0\u00a0\u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/> \u00a0&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">This is of course a horrible solution since<\/div>\n<ul style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin-bottom: 10px; margin-top: 0px;\">\n<li style=\"box-sizing: border-box;\">the HTML becomes super-bloated and unreadable<\/li>\n<li style=\"box-sizing: border-box;\">the styles can't be reused<\/li>\n<li style=\"box-sizing: border-box;\">we'd be repeating \"theme rules\" (like the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12.600000381469727px; padding: 2px 4px;\">moccasin<\/code>\u00a0background color) all over the place<\/li>\n<\/ul>\n<h3>Take 1 - stylesheet with selectors<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">To counter the above we always put our styles in a separate CSS file, using\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">selectors<\/span>\u00a0to direct\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">where they are applied<\/span>.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">In order to be able to target explanation boxes we can\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">introduce a class name<\/span>\u00a0to the markup:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div class=\"explanationBox\"&gt;<br \/><br \/> \u00a0&lt;h2&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/>&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">In a separate CSS file we can now\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">apply the box styles<\/span>\u00a0like this:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">.explanationBox {<br \/><br \/> \u00a0border-radius: 15px;<br \/><br \/> \u00a0padding: 10px;<br \/><br \/> \u00a0border: 2px solid springgreen;<br \/><br \/> \u00a0background-color: moccasin;<br \/><br \/> \u00a0color: magenta;<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">We style the\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">explanation headline<\/span>\u00a0by using a\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">child combinator<\/span>\u00a0in the selector:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">.explanationBox &gt; h2 {<br \/><br \/> \u00a0font-weight: normal;<br \/><br \/> \u00a0letter-spacing: 5px;<br \/><br \/> \u00a0padding-left: 15px;<br \/><br \/> \u00a0font-style: italic;<br \/><br \/> \u00a0font-size: 14px;<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">The\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">generic\u00a0<\/span><code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\"><span style=\"box-sizing: border-box; font-weight: bold;\">h2<\/span><\/code><span style=\"box-sizing: border-box; font-weight: bold;\">\u00a0styles<\/span>\u00a0would get their own selector:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">h2 {<br \/><br \/> \u00a0font-family: Verdana;<br \/><br \/> \u00a0font-size: 16px;<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Note that both of these later selectors will have an opinion about the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">font-size<\/code>\u00a0of our explanation headline, but since\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">.explanationBox &gt; h2<\/code>\u00a0is more specific than\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>, the former will win.<\/div>\n<h3 style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;\">Unanswerable question 1 - the unknown killer problem<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">With our styles in a CSS file, we now have the following situation:<\/div>\n<figure style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin: 0px;\"><img decoding=\"async\" style=\"border: 0px; box-sizing: border-box; height: 260px; margin: 0px 0px 0.5em; max-width: 100%; vertical-align: middle; width: 667.5px;\" src=\"https:\/\/media.graphcms.com\/d45z5AMwRnK95xidH4Ty\" alt=\"cssinjs-selector.svg\" \/><\/figure>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">The rule blobs are connected with their respective target elements via\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">selectors<\/span>. While they work fine for our simple example, they\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">don't scale well<\/span>. As the app grows it is very easy to end up in a messy situation where we are scared to change both HTML and CSS, in fear of some selector somewhere breaking.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Even in our small example the main reasons for the unscalability are easy to demonstrate.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Look again at our HTML...<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div class=\"explanationBox\"&gt;<br \/><br \/> \u00a0&lt;h2&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/>&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">...and ponder this simple question with regards to the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">div<\/code>:<\/div>\n<blockquote style=\"border-left-color: #000000; border-left-style: solid; border-left-width: 1px; box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 17.5px; margin: 0px 0px 50px; padding: 10px 20px;\">\n<p><em style=\"box-sizing: border-box;\">What styles are applied to this element?<\/em><\/p>\n<\/blockquote>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">We have no easy way of knowing! The elements are being shot at by CSS selectors somewhere out there in the dark. From this side we have no idea whether any of them are targetting this specific element.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">It is\u00a0<em style=\"box-sizing: border-box;\">likely<\/em>\u00a0that there is a selector targetting the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">.explanationBox<\/code>\u00a0class in a selector somewhere. But because CSS selectors are global we'd have to\u00a0<em style=\"box-sizing: border-box;\">search\u00a0<\/em><em style=\"box-sizing: border-box;\"><span style=\"box-sizing: border-box; font-weight: bold;\">all<\/span><\/em><em style=\"box-sizing: border-box;\">\u00a0CSS<\/em>\u00a0in order to know.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">And consider asking the same question about the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0- it doesn't have a class, which might imply it is not in the crosshairs, but it is in fact targeted by\u00a0<em style=\"box-sizing: border-box;\">two<\/em>\u00a0selectors;\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0and\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">.explanationBox &gt; h2<\/code>.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Just by looking at the HTML we\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">cannot know what styles, if any, are applied to an element<\/span>.<\/div>\n<h3 style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;\">Unanswerable question 2 - the unknown victim problem<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">We find the reverse of the same problem in the CSS file. Look for example at this part:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">.explanationBox &gt; h2 {<br \/><br \/> \u00a0font-weight: normal;<br \/><br \/> \u00a0letter-spacing: 5px;<br \/><br \/> \u00a0padding-left: 15px;<br \/><br \/> \u00a0font-style: italic;<br \/><br \/> \u00a0font-size: 14px;<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Now imagine trying to answer this question:<\/div>\n<blockquote style=\"border-left-color: #000000; border-left-style: solid; border-left-width: 1px; box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 17.5px; margin: 0px 0px 50px; padding: 10px 20px;\">\n<p><em style=\"box-sizing: border-box;\">To which elements are these styles applied?<\/em><\/p>\n<\/blockquote>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">This is impossible to know. We'd have to search through all our HTML files, or templates in case of a dynamic app. And in a dynamic setting the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">.explanationBox<\/code>\u00a0element and the contained\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0might live in completely different places, making it even harder to figure out the answer.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">This makes editing a CSS file really scary. Can we remove this part? If the question above was easy to answer then we could know whether it is safe to remove a certain part, but now we cannot!<\/div>\n<h3 dir=\"ltr\" style=\"text-align: left;\">Take 2 - using the BEM naming convention<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">There has been many attempts to mitigate the mess caused by the inability to answer these two questions. One such attempt is the\u00a0<a style=\"box-sizing: border-box; color: #6bb842; text-decoration: none;\" href=\"https:\/\/en.bem.info\/\">BEM naming convention<\/a>, which basically boils down to...<\/div>\n<ul style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin-bottom: 10px; margin-top: 0px;\">\n<li style=\"box-sizing: border-box;\">have selectors consist of a single class always<\/li>\n<li style=\"box-sizing: border-box;\">name the classes according to a strict convention<\/li>\n<\/ul>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">For our example, the explanation box would be a\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">Block<\/span>, while the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0inside of that would be an\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">Element<\/span>\u00a0of that block. This is the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">B<\/code>\u00a0and\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">E<\/code>\u00a0of\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">BEM<\/code>\u00a0(the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">M<\/code>\u00a0stands for modifier but we don't need that here).<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Using BEM logic our markup would become:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;div class=\"explanationBox\"&gt;<br \/><br \/> \u00a0&lt;h2 class=\"explanationBox__headline\"&gt;Did you know?&lt;\/h2&gt;<br \/><br \/> \u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/>&lt;\/div&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">The CSS would now be:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; b<\/span><\/span>\r\n<h4><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">field_5d00a55c1902a\u00a0<\/span><\/span><\/h4>\r\n<span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">field_5d00a52019028<\/span><\/span><!-- \/wp:post-content -->","protected":false},"excerpt":{"rendered":"<p>rder-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, &#8216;Courier New&#8217;, monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;&#8221;><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">h2 {<\/p>\n<p> \u00a0font-family: Verdana;<\/p>\n<p> \u00a0font-size: 14px;<\/p>\n<p>}<\/p>\n<p>.explanationBox {<\/p>\n<p> \u00a0border-radius: 15px;<\/p>\n<p> \u00a0padding: 10px;<\/p>\n<p> \u00a0border: 2px solid springgreen;<\/p>\n<p> \u00a0background-color: moccasin;<\/p>\n<p> \u00a0color: magenta;<\/p>\n<p>}<\/p>\n<p>.explanationBox__headline {<\/p>\n<p> \u00a0font-weight: normal;<\/p>\n<p> \u00a0letter-spacing: 5px;<\/p>\n<p> \u00a0padding-left: 15px;<\/p>\n<p> \u00a0font-style: italic;<\/p>\n<p>}<\/code><\/p>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">It is now slightly more clear what styles are applied where. Both the earlier questions are easier to answer, since we can do a search for the more precise class names.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">But we still have the problem of the generic\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0selector. Also class names might be dynamically created and\/or added to an element, so again, in a dynamic setting it might still be hard to find out exactly what&#8217;s going on.<\/div>\n<h3>Take 3 &#8211; inline styles in a React component<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">The basic idea in BEM, as well as in OOCSS or any of the other attempts at bringing structure to CSS, is to think in terms of\u00a0<span style=\"box-sizing: border-box; font-weight: bold;\">components<\/span>. All style definitions, as far as possible, should be tied to a certain component.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">This jives very well with modern JS frameworks, who (almost) all have a component-centric architecture. If components are our main abstraction, then it is very easy to make an API to style individual components.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">React (and most of the competition) does this by letting us provide a CSS-like JS object to the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">style<\/code>\u00a0prop:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">const box = {<br \/><br \/> \u00a0borderRadius: \"15px\",<br \/><br \/> \u00a0padding: \"10px\",<br \/><br \/> \u00a0border: '2px solid springgreen',<br \/><br \/> \u00a0backgroundColor: 'moccasin',<br \/><br \/> \u00a0color: 'magenta'<br \/><br \/>};<br \/><br \/><br \/><br \/>const headline = {<br \/><br \/> \u00a0fontFamily: 'Verdana', \/\/ should live in generic h2 styling, but we're cheating for now<br \/><br \/> \u00a0fontWeight: \"normal\",<br \/><br \/> \u00a0letterSpacing: \"5px\",<br \/><br \/> \u00a0paddingLeft: \"15px\",<br \/><br \/> \u00a0fontStyle: \"italic\",<br \/><br \/> \u00a0fontSize: '14px'<br \/><br \/>};<br \/><br \/><br \/><br \/>export class ExplanationBox extends React.Component {<br \/><br \/> \u00a0render() {<br \/><br \/> \u00a0\u00a0\u00a0return (<br \/><br \/> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;div style={box}&gt;<br \/><br \/> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h2 style={headline}&gt;{this.props.title}&lt;\/h2&gt;<br \/><br \/> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{this.props.children}<br \/><br \/> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<br \/><br \/> \u00a0\u00a0\u00a0);<br \/><br \/> \u00a0}<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Elsewhere in our React app we can now do this&#8230;<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">&lt;ExplanationBox title=\"Did you know?\"&gt;<br \/><br \/> \u00a0&lt;p&gt;Ozelots hate maccaws!&lt;\/p&gt;<br \/><br \/>&lt;\/ExplanationBox&gt;<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">&#8230;and we have our reusable, styled component!<\/div>\n<h3>Take 4 &#8211; imported inline styles<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">However, what you just saw was really nothing but a regression to our\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">Take 0<\/code>\u00a0attempt, where we put all styles inline. Like an\u00a0<em style=\"box-sizing: border-box;\">animal<\/em>.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">But we can improve on this super easily, simply by migrating the styles to a separate file! Imagine the following living in a file named\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">styles.js<\/code>:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">export const typography = {<br \/><br \/> \u00a0h2: {<br \/><br \/> \u00a0\u00a0\u00a0fontFamily: 'Verdana',<br \/><br \/> \u00a0\u00a0\u00a0fontSize: '16px'<br \/><br \/> \u00a0}<br \/><br \/>};<br \/><br \/><br \/><br \/>export const explanation = {<br \/><br \/> \u00a0box: {<br \/><br \/> \u00a0\u00a0\u00a0borderRadius: \"15px\",<br \/><br \/> \u00a0\u00a0\u00a0padding: \"10px\",<br \/><br \/> \u00a0\u00a0\u00a0border: '2px solid springgreen',<br \/><br \/> \u00a0\u00a0\u00a0backgroundColor: 'moccasin,<br \/><br \/> \u00a0\u00a0\u00a0color: 'magenta',<br \/><br \/> \u00a0},<br \/><br \/> \u00a0headline: {<br \/><br \/> \u00a0\u00a0\u00a0...typography.h2,<br \/><br \/> \u00a0\u00a0\u00a0fontWeight: \"normal\",<br \/><br \/> \u00a0\u00a0\u00a0letterSpacing: \"5px\",<br \/><br \/> \u00a0\u00a0\u00a0paddingLeft: \"15px\",<br \/><br \/> \u00a0\u00a0\u00a0fontStyle: \"italic\",<br \/><br \/> \u00a0\u00a0\u00a0fontSize: '14px'<br \/><br \/> \u00a0}<br \/><br \/>};<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Note the handling of the basic\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0styles!<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Our React component now becomes this:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">import {explanation} from styles;<br \/><br \/><br \/><br \/>export class ExplanationBox extends React.Component {<br \/><br \/> \u00a0render() {<br \/><br \/> \u00a0\u00a0\u00a0return (<br \/><br \/> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;div style={explanation.box}&gt;<br \/><br \/> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h2 style={explanation.headline}&gt;{this.props.title}&lt;\/h2&gt;<br \/><br \/> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{this.props.children}<br \/><br \/> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<br \/><br \/> \u00a0\u00a0\u00a0);<br \/><br \/> \u00a0}<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">We have now sort of reinvented the stylesheet! Except, where before the stylesheet used selectors to fire blindly into the dark&#8230;<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">\u00a0<\/div>\n<figure style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin: 0px;\"><img decoding=\"async\" style=\"border: 0px; box-sizing: border-box; height: 260px; margin: 0px 0px 0.5em; max-width: 100%; vertical-align: middle; width: 667.5px;\" src=\"https:\/\/media.graphcms.com\/d45z5AMwRnK95xidH4Ty\" alt=\"cssinjs-selector.svg\" \/><\/figure>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">&#8230;we now let the components go get exactly the styles they need via\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">import<\/code>s:<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">\u00a0<\/div>\n<figure style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin: 0px;\"><img decoding=\"async\" style=\"border: 0px; box-sizing: border-box; height: 266px; margin: 0px 0px 0.5em; max-width: 100%; vertical-align: middle; width: 667.5px;\" src=\"https:\/\/media.graphcms.com\/5O7kcOADQBCVDTFCVCa3\" alt=\"cssinjs-import.svg\" \/><\/figure>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">It might not be immediately obvious, but the flipping of this arrow makes a world of difference!<\/div>\n<h3>Finding the killer<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Remember the first unanswerable question?<\/div>\n<blockquote style=\"border-left-color: #000000; border-left-style: solid; border-left-width: 1px; box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 17.5px; margin: 0px 0px 50px; padding: 10px 20px;\">\n<p><em style=\"box-sizing: border-box;\">What styles are applied to this element?<\/em><\/p>\n<\/blockquote>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">In our imported inline style setup, this becomes trivial to answer. I simply follow the thread backwards from the style prop!<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">\u00a0<\/div>\n<figure style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin: 0px;\"><img decoding=\"async\" style=\"border: 0px; box-sizing: border-box; height: 446px; margin: 0px 0px 0.5em; max-width: 100%; vertical-align: middle; width: 667.5px;\" src=\"https:\/\/media.graphcms.com\/BwnkFjSLSmMMutw4XYfA\" alt=\"cssinjs-findkiller.gif\" \/><\/figure>\n<h3>Finding the victim<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Our second unanswerable question was:<\/div>\n<blockquote style=\"border-left-color: #000000; border-left-style: solid; border-left-width: 1px; box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 17.5px; margin: 0px 0px 50px; padding: 10px 20px;\">\n<p><em style=\"box-sizing: border-box;\">To which elements are these styles applied?<\/em><\/p>\n<\/blockquote>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Again, because of the explicit imports, this becomes very easy to answer (if you have a semi-competent editor):<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">\u00a0<\/div>\n<figure style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin: 0px;\"><img decoding=\"async\" style=\"border: 0px; box-sizing: border-box; height: 538px; margin: 0px 0px 0.5em; max-width: 100%; vertical-align: middle; width: 667.5px;\" src=\"https:\/\/media.graphcms.com\/turP2y4TihGP78jafxAM\" alt=\"cssinjs-findvictim.gif\" \/><\/figure>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">LESS isn&#8217;t more<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">Through moving our style definitions to JS land, the need for CSS preprocessors goes out the window. Remember how we used the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">...<\/code>\u00a0spread operator to mix in the\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">h2<\/code>\u00a0styles into our headline rules?<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">headline: {<br \/><br \/> \u00a0...typography.h2,<br \/><br \/> \u00a0fontWeight: \"normal\",<br \/><br \/> \u00a0letterSpacing: \"5px\",<br \/><br \/> \u00a0paddingLeft: \"15px\",<br \/><br \/> \u00a0fontStyle: \"italic\",<br \/><br \/> \u00a0fontSize: '14px'<br \/><br \/>}<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">That was the equivalent of a LESS\/SASS mixin! You&#8217;ll quickly find that the other syntax they give us can be easily replicated with pure JS. For example, having global variables becomes trivial:<\/div>\n<pre style=\"background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\"><code style=\"background-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;\">export const palette = {<br \/><br \/> \u00a0softcolor: 'moccasin',<br \/><br \/> \u00a0hardcolor: 'magenta',<br \/><br \/> \u00a0accentuationcolor: 'springgreen'<br \/><br \/>}<br \/><br \/><br \/><br \/>export const explanationBlock = {<br \/><br \/> \u00a0box: {<br \/><br \/> \u00a0\u00a0\u00a0borderRadius: \"15px\",<br \/><br \/> \u00a0\u00a0\u00a0padding: \"10px\",<br \/><br \/> \u00a0\u00a0\u00a0border: '2px solid ' + palette.accentuationcolor,<br \/><br \/> \u00a0\u00a0\u00a0backgroundColor: palette.softcolor,<br \/><br \/> \u00a0\u00a0\u00a0color: palette.hardcolor,<br \/><br \/> \u00a0},<br \/><br \/> \u00a0\/\/ ...truncated<\/code><\/pre>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">As do implementing helper functions to add vendor prefixes, saturate colours, etc.<\/div>\n<h3>Wrapping up<\/h3>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">To recap; by turning the arrows around through using JS and inline styles, almost all opaqueness of regular CSS goes away. Previously difficult tasks such as&#8230;<\/div>\n<ul style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 14px; margin-bottom: 10px; margin-top: 0px;\">\n<li style=\"box-sizing: border-box;\">renaming a CSS class<\/li>\n<li style=\"box-sizing: border-box;\">identifying and removing dead CSS code<\/li>\n<li style=\"box-sizing: border-box;\">hitting the correct elements with selectors<\/li>\n<li style=\"box-sizing: border-box;\">NOT hitting the wrong elements with selectors<\/li>\n<\/ul>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">&#8230;suddenly become easy or entirely moot.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">While there are still a lot of questions to be answered regarding moving CSS to JS space, there&#8217;s no doubt in my mind that just being able to flip the arrow of responsibility makes it all worth it.<\/div>\n<div style=\"box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 1em; margin-top: 14px;\">One of the primary downsides of inline JS styles is that we can&#8217;t use pseudoselectors such as\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">:hover<\/code>\u00a0or\u00a0<code style=\"background-color: #f9f2f4; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.399999618530273px; padding: 2px 4px;\">@media<\/code>. I hope to show how we can get around that using helper libraries in an upcoming post.<\/div>\n<p><!-- \/wp:freeform --><\/div>\n<\/div>\n<p><!-- \/wp:group --><\/div>\n<\/div>\n<p><!-- \/wp:group --><\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-25046","post","type-post","status-publish","format-standard","hentry","category-okategoriserad"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"rder-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, &#039;Courier New&#039;, monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;&quot;&gt;h2 { font-family: Verdana; font-size: 14px;}.explanationBox { border-radius: 15px; padding: 10px; border: 2px solid springgreen; background-color: moccasin; color: magenta;}.explanationBox__headline { font-weight: normal; letter-spacing: 5px; padding-left: 15px; font-style: italic;} It is now slightly more clear what styles are applied where. Both the earlier questions are easier to answer, since we can do a search for the more precise class names. But we still have the problem of the generic h2 selector. Also class names might be dynamically created and\/or added to an element, so again, in a dynamic setting it might still be hard to find out exactly what&#039;s going on. Take 3 - inline styles in a React component The basic idea in BEM, as well as in OOCSS or any of the other attempts at bringing structure to CSS, is to think in terms of components. All style definitions, as far as possible, should be tied to a certain component. This jives very well with modern JS frameworks, who (almost) all have a component-centric architecture. If components are our main abstraction, then it is very easy to make an API to style individual components. React (and most of the competition) does this by letting us provide a CSS-like JS object to the style prop: const box = { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: &#039;2px solid springgreen&#039;, backgroundColor: &#039;moccasin&#039;, color: &#039;magenta&#039;};const headline = { fontFamily: &#039;Verdana&#039;, \/\/ should live in generic h2 styling, but we&#039;re cheating for now fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: &#039;14px&#039;};export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} Elsewhere in our React app we can now do this... Ozelots hate maccaws! ...and we have our reusable, styled component! Take 4 - imported inline styles However, what you just saw was really nothing but a regression to our Take 0 attempt, where we put all styles inline. Like an animal. But we can improve on this super easily, simply by migrating the styles to a separate file! Imagine the following living in a file named styles.js: export const typography = { h2: { fontFamily: &#039;Verdana&#039;, fontSize: &#039;16px&#039; }};export const explanation = { box: { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: &#039;2px solid springgreen&#039;, backgroundColor: &#039;moccasin, color: &#039;magenta&#039;, }, headline: { ...typography.h2, fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: &#039;14px&#039; }}; Note the handling of the basic h2 styles! Our React component now becomes this: import {explanation} from styles;export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} We have now sort of reinvented the stylesheet! Except, where before the stylesheet used selectors to fire blindly into the dark... ...we now let the components go get exactly the styles they need via imports: It might not be immediately obvious, but the flipping of this arrow makes a world of difference! Finding the killer Remember the first unanswerable question? What styles are applied to this element? In our imported inline style setup, this becomes trivial to answer. I simply follow the thread backwards from the style prop! Finding the victim Our second unanswerable question was: To which elements are these styles applied? Again, because of the explicit imports, this becomes very easy to answer (if you have a semi-competent editor): LESS isn&#039;t more Through moving our style definitions to JS land, the need for CSS preprocessors goes out the window. Remember how we used the ... spread operator to mix in the h2 styles into our headline rules? headline: { ...typography.h2, fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: &#039;14px&#039;} That was the equivalent of a LESS\/SASS mixin! You&#039;ll quickly find that the other syntax they give us can be easily replicated with pure JS. For example, having global variables becomes trivial: export const palette = { softcolor: &#039;moccasin&#039;, hardcolor: &#039;magenta&#039;, accentuationcolor: &#039;springgreen&#039;}export const explanationBlock = { box: { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: &#039;2px solid &#039; + palette.accentuationcolor, backgroundColor: palette.softcolor, color: palette.hardcolor, }, \/\/ ...truncated As do implementing helper functions to add vendor prefixes, saturate colours, etc. Wrapping up To recap; by turning the arrows around through using JS and inline styles, almost all opaqueness of regular CSS goes away. Previously difficult tasks such as... renaming a CSS class identifying and removing dead CSS code hitting the correct elements with selectors NOT hitting the wrong elements with selectors ...suddenly become easy or entirely moot. While there are still a lot of questions to be answered regarding moving CSS to JS space, there&#039;s no doubt in my mind that just being able to flip the arrow of responsibility makes it all worth it. One of the primary downsides of inline JS styles is that we can&#039;t use pseudoselectors such as :hover or @media. I hope to show how we can get around that using helper libraries in an upcoming post.\" \/>\n\t<meta name=\"robots\" content=\"noindex, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n\t<meta name=\"author\" content=\"Ola\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/informator.se\/en\/widmark\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Informator\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"CSS selectors are evil and JS is the solution - Informator\" \/>\n\t\t<meta property=\"og:description\" content=\"rder-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, &#039;Courier New&#039;, monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;&quot;&gt;h2 { font-family: Verdana; font-size: 14px;}.explanationBox { border-radius: 15px; padding: 10px; border: 2px solid springgreen; background-color: moccasin; color: magenta;}.explanationBox__headline { font-weight: normal; letter-spacing: 5px; padding-left: 15px; font-style: italic;} It is now slightly more clear what styles are applied where. Both the earlier questions are easier to answer, since we can do a search for the more precise class names. But we still have the problem of the generic h2 selector. Also class names might be dynamically created and\/or added to an element, so again, in a dynamic setting it might still be hard to find out exactly what&#039;s going on. Take 3 - inline styles in a React component The basic idea in BEM, as well as in OOCSS or any of the other attempts at bringing structure to CSS, is to think in terms of components. All style definitions, as far as possible, should be tied to a certain component. This jives very well with modern JS frameworks, who (almost) all have a component-centric architecture. If components are our main abstraction, then it is very easy to make an API to style individual components. React (and most of the competition) does this by letting us provide a CSS-like JS object to the style prop: const box = { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: &#039;2px solid springgreen&#039;, backgroundColor: &#039;moccasin&#039;, color: &#039;magenta&#039;};const headline = { fontFamily: &#039;Verdana&#039;, \/\/ should live in generic h2 styling, but we&#039;re cheating for now fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: &#039;14px&#039;};export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} Elsewhere in our React app we can now do this... Ozelots hate maccaws! ...and we have our reusable, styled component! Take 4 - imported inline styles However, what you just saw was really nothing but a regression to our Take 0 attempt, where we put all styles inline. Like an animal. But we can improve on this super easily, simply by migrating the styles to a separate file! Imagine the following living in a file named styles.js: export const typography = { h2: { fontFamily: &#039;Verdana&#039;, fontSize: &#039;16px&#039; }};export const explanation = { box: { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: &#039;2px solid springgreen&#039;, backgroundColor: &#039;moccasin, color: &#039;magenta&#039;, }, headline: { ...typography.h2, fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: &#039;14px&#039; }}; Note the handling of the basic h2 styles! Our React component now becomes this: import {explanation} from styles;export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} We have now sort of reinvented the stylesheet! Except, where before the stylesheet used selectors to fire blindly into the dark... ...we now let the components go get exactly the styles they need via imports: It might not be immediately obvious, but the flipping of this arrow makes a world of difference! Finding the killer Remember the first unanswerable question? What styles are applied to this element? In our imported inline style setup, this becomes trivial to answer. I simply follow the thread backwards from the style prop! Finding the victim Our second unanswerable question was: To which elements are these styles applied? Again, because of the explicit imports, this becomes very easy to answer (if you have a semi-competent editor): LESS isn&#039;t more Through moving our style definitions to JS land, the need for CSS preprocessors goes out the window. Remember how we used the ... spread operator to mix in the h2 styles into our headline rules? headline: { ...typography.h2, fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: &#039;14px&#039;} That was the equivalent of a LESS\/SASS mixin! You&#039;ll quickly find that the other syntax they give us can be easily replicated with pure JS. For example, having global variables becomes trivial: export const palette = { softcolor: &#039;moccasin&#039;, hardcolor: &#039;magenta&#039;, accentuationcolor: &#039;springgreen&#039;}export const explanationBlock = { box: { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: &#039;2px solid &#039; + palette.accentuationcolor, backgroundColor: palette.softcolor, color: palette.hardcolor, }, \/\/ ...truncated As do implementing helper functions to add vendor prefixes, saturate colours, etc. Wrapping up To recap; by turning the arrows around through using JS and inline styles, almost all opaqueness of regular CSS goes away. Previously difficult tasks such as... renaming a CSS class identifying and removing dead CSS code hitting the correct elements with selectors NOT hitting the wrong elements with selectors ...suddenly become easy or entirely moot. While there are still a lot of questions to be answered regarding moving CSS to JS space, there&#039;s no doubt in my mind that just being able to flip the arrow of responsibility makes it all worth it. One of the primary downsides of inline JS styles is that we can&#039;t use pseudoselectors such as :hover or @media. I hope to show how we can get around that using helper libraries in an upcoming post.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/informator.se\/en\/widmark\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/informator.se\/wp-content\/uploads\/2026\/08\/Informator_Logo_OG.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/informator.se\/wp-content\/uploads\/2026\/08\/Informator_Logo_OG.png\" \/>\n\t\t<meta property=\"og:image:width\" content=\"1717\" \/>\n\t\t<meta property=\"og:image:height\" content=\"916\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2024-09-13T08:48:11+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2024-11-15T15:20:53+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/people\/Informator-Utbildning\/61569394055772\/\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"CSS selectors are evil and JS is the solution - Informator\" \/>\n\t\t<meta name=\"twitter:description\" content=\"rder-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, &#039;Courier New&#039;, monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;&quot;&gt;h2 { font-family: Verdana; font-size: 14px;}.explanationBox { border-radius: 15px; padding: 10px; border: 2px solid springgreen; background-color: moccasin; color: magenta;}.explanationBox__headline { font-weight: normal; letter-spacing: 5px; padding-left: 15px; font-style: italic;} It is now slightly more clear what styles are applied where. Both the earlier questions are easier to answer, since we can do a search for the more precise class names. But we still have the problem of the generic h2 selector. Also class names might be dynamically created and\/or added to an element, so again, in a dynamic setting it might still be hard to find out exactly what&#039;s going on. Take 3 - inline styles in a React component The basic idea in BEM, as well as in OOCSS or any of the other attempts at bringing structure to CSS, is to think in terms of components. All style definitions, as far as possible, should be tied to a certain component. This jives very well with modern JS frameworks, who (almost) all have a component-centric architecture. If components are our main abstraction, then it is very easy to make an API to style individual components. React (and most of the competition) does this by letting us provide a CSS-like JS object to the style prop: const box = { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: &#039;2px solid springgreen&#039;, backgroundColor: &#039;moccasin&#039;, color: &#039;magenta&#039;};const headline = { fontFamily: &#039;Verdana&#039;, \/\/ should live in generic h2 styling, but we&#039;re cheating for now fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: &#039;14px&#039;};export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} Elsewhere in our React app we can now do this... Ozelots hate maccaws! ...and we have our reusable, styled component! Take 4 - imported inline styles However, what you just saw was really nothing but a regression to our Take 0 attempt, where we put all styles inline. Like an animal. But we can improve on this super easily, simply by migrating the styles to a separate file! Imagine the following living in a file named styles.js: export const typography = { h2: { fontFamily: &#039;Verdana&#039;, fontSize: &#039;16px&#039; }};export const explanation = { box: { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: &#039;2px solid springgreen&#039;, backgroundColor: &#039;moccasin, color: &#039;magenta&#039;, }, headline: { ...typography.h2, fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: &#039;14px&#039; }}; Note the handling of the basic h2 styles! Our React component now becomes this: import {explanation} from styles;export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} We have now sort of reinvented the stylesheet! Except, where before the stylesheet used selectors to fire blindly into the dark... ...we now let the components go get exactly the styles they need via imports: It might not be immediately obvious, but the flipping of this arrow makes a world of difference! Finding the killer Remember the first unanswerable question? What styles are applied to this element? In our imported inline style setup, this becomes trivial to answer. I simply follow the thread backwards from the style prop! Finding the victim Our second unanswerable question was: To which elements are these styles applied? Again, because of the explicit imports, this becomes very easy to answer (if you have a semi-competent editor): LESS isn&#039;t more Through moving our style definitions to JS land, the need for CSS preprocessors goes out the window. Remember how we used the ... spread operator to mix in the h2 styles into our headline rules? headline: { ...typography.h2, fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: &#039;14px&#039;} That was the equivalent of a LESS\/SASS mixin! You&#039;ll quickly find that the other syntax they give us can be easily replicated with pure JS. For example, having global variables becomes trivial: export const palette = { softcolor: &#039;moccasin&#039;, hardcolor: &#039;magenta&#039;, accentuationcolor: &#039;springgreen&#039;}export const explanationBlock = { box: { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: &#039;2px solid &#039; + palette.accentuationcolor, backgroundColor: palette.softcolor, color: palette.hardcolor, }, \/\/ ...truncated As do implementing helper functions to add vendor prefixes, saturate colours, etc. Wrapping up To recap; by turning the arrows around through using JS and inline styles, almost all opaqueness of regular CSS goes away. Previously difficult tasks such as... renaming a CSS class identifying and removing dead CSS code hitting the correct elements with selectors NOT hitting the wrong elements with selectors ...suddenly become easy or entirely moot. While there are still a lot of questions to be answered regarding moving CSS to JS space, there&#039;s no doubt in my mind that just being able to flip the arrow of responsibility makes it all worth it. One of the primary downsides of inline JS styles is that we can&#039;t use pseudoselectors such as :hover or @media. I hope to show how we can get around that using helper libraries in an upcoming post.\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/informator.se\/wp-content\/uploads\/2024\/08\/informator_logo_white_footer-1.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/widmark\\\/#blogposting\",\"name\":\"CSS selectors are evil and JS is the solution - Informator\",\"headline\":\"CSS selectors are evil and JS is the solution\",\"author\":{\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/author\\\/ola\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/media.graphcms.com\\\/DLcXvGbGTDGeKHcbTkMV\",\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/widmark\\\/#articleImage\"},\"datePublished\":\"2024-09-13T09:48:11+02:00\",\"dateModified\":\"2024-11-15T16:20:53+01:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/widmark\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/widmark\\\/#webpage\"},\"articleSection\":\"Okategoriserad\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/widmark\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/informator.se\\\/en\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/informator.se\\\/category\\\/okategoriserad\\\/#listItem\",\"name\":\"Okategoriserad\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/informator.se\\\/category\\\/okategoriserad\\\/#listItem\",\"position\":2,\"name\":\"Okategoriserad\",\"item\":\"https:\\\/\\\/informator.se\\\/category\\\/okategoriserad\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/widmark\\\/#listItem\",\"name\":\"CSS selectors are evil and JS is the solution\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/widmark\\\/#listItem\",\"position\":3,\"name\":\"CSS selectors are evil and JS is the solution\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/informator.se\\\/category\\\/okategoriserad\\\/#listItem\",\"name\":\"Okategoriserad\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/#organization\",\"name\":\"Informator Utbildning Svenska AB\",\"description\":\"Informator \\u00e4r ett svenskt utbildningsbolag som erbjuder utbildningar inom IT, Tech och ledarskap f\\u00f6r f\\u00f6retag och organisationer.\",\"url\":\"https:\\\/\\\/informator.se\\\/en\\\/\",\"telephone\":\"+46858711610\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/informator.se\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Informator_logo_cmyk-png-FOR-WEBB.png\",\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/widmark\\\/#organizationLogo\",\"width\":355,\"height\":218},\"image\":{\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/widmark\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/people\\\/Informator-Utbildning\\\/61569394055772\\\/\",\"https:\\\/\\\/www.instagram.com\\\/informator_utbildning\\\/\",\"https:\\\/\\\/se.linkedin.com\\\/school\\\/informatorutbildning\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/author\\\/ola\\\/#author\",\"url\":\"https:\\\/\\\/informator.se\\\/en\\\/author\\\/ola\\\/\",\"name\":\"Ola\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/widmark\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8dc8b4e0b2ce4c9877b24492eb6bd485776c74f000707741481e2adcb5f7b25f?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Ola\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/widmark\\\/#webpage\",\"url\":\"https:\\\/\\\/informator.se\\\/en\\\/widmark\\\/\",\"name\":\"CSS selectors are evil and JS is the solution - Informator\",\"description\":\"rder-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\\\">h2 { font-family: Verdana; font-size: 14px;}.explanationBox { border-radius: 15px; padding: 10px; border: 2px solid springgreen; background-color: moccasin; color: magenta;}.explanationBox__headline { font-weight: normal; letter-spacing: 5px; padding-left: 15px; font-style: italic;} It is now slightly more clear what styles are applied where. Both the earlier questions are easier to answer, since we can do a search for the more precise class names. But we still have the problem of the generic h2 selector. Also class names might be dynamically created and\\\/or added to an element, so again, in a dynamic setting it might still be hard to find out exactly what's going on. Take 3 - inline styles in a React component The basic idea in BEM, as well as in OOCSS or any of the other attempts at bringing structure to CSS, is to think in terms of components. All style definitions, as far as possible, should be tied to a certain component. This jives very well with modern JS frameworks, who (almost) all have a component-centric architecture. If components are our main abstraction, then it is very easy to make an API to style individual components. React (and most of the competition) does this by letting us provide a CSS-like JS object to the style prop: const box = { borderRadius: \\\"15px\\\", padding: \\\"10px\\\", border: '2px solid springgreen', backgroundColor: 'moccasin', color: 'magenta'};const headline = { fontFamily: 'Verdana', \\\/\\\/ should live in generic h2 styling, but we're cheating for now fontWeight: \\\"normal\\\", letterSpacing: \\\"5px\\\", paddingLeft: \\\"15px\\\", fontStyle: \\\"italic\\\", fontSize: '14px'};export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} Elsewhere in our React app we can now do this... Ozelots hate maccaws! ...and we have our reusable, styled component! Take 4 - imported inline styles However, what you just saw was really nothing but a regression to our Take 0 attempt, where we put all styles inline. Like an animal. But we can improve on this super easily, simply by migrating the styles to a separate file! Imagine the following living in a file named styles.js: export const typography = { h2: { fontFamily: 'Verdana', fontSize: '16px' }};export const explanation = { box: { borderRadius: \\\"15px\\\", padding: \\\"10px\\\", border: '2px solid springgreen', backgroundColor: 'moccasin, color: 'magenta', }, headline: { ...typography.h2, fontWeight: \\\"normal\\\", letterSpacing: \\\"5px\\\", paddingLeft: \\\"15px\\\", fontStyle: \\\"italic\\\", fontSize: '14px' }}; Note the handling of the basic h2 styles! Our React component now becomes this: import {explanation} from styles;export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} We have now sort of reinvented the stylesheet! Except, where before the stylesheet used selectors to fire blindly into the dark... ...we now let the components go get exactly the styles they need via imports: It might not be immediately obvious, but the flipping of this arrow makes a world of difference! Finding the killer Remember the first unanswerable question? What styles are applied to this element? In our imported inline style setup, this becomes trivial to answer. I simply follow the thread backwards from the style prop! Finding the victim Our second unanswerable question was: To which elements are these styles applied? Again, because of the explicit imports, this becomes very easy to answer (if you have a semi-competent editor): LESS isn't more Through moving our style definitions to JS land, the need for CSS preprocessors goes out the window. Remember how we used the ... spread operator to mix in the h2 styles into our headline rules? headline: { ...typography.h2, fontWeight: \\\"normal\\\", letterSpacing: \\\"5px\\\", paddingLeft: \\\"15px\\\", fontStyle: \\\"italic\\\", fontSize: '14px'} That was the equivalent of a LESS\\\/SASS mixin! You'll quickly find that the other syntax they give us can be easily replicated with pure JS. For example, having global variables becomes trivial: export const palette = { softcolor: 'moccasin', hardcolor: 'magenta', accentuationcolor: 'springgreen'}export const explanationBlock = { box: { borderRadius: \\\"15px\\\", padding: \\\"10px\\\", border: '2px solid ' + palette.accentuationcolor, backgroundColor: palette.softcolor, color: palette.hardcolor, }, \\\/\\\/ ...truncated As do implementing helper functions to add vendor prefixes, saturate colours, etc. Wrapping up To recap; by turning the arrows around through using JS and inline styles, almost all opaqueness of regular CSS goes away. Previously difficult tasks such as... renaming a CSS class identifying and removing dead CSS code hitting the correct elements with selectors NOT hitting the wrong elements with selectors ...suddenly become easy or entirely moot. While there are still a lot of questions to be answered regarding moving CSS to JS space, there's no doubt in my mind that just being able to flip the arrow of responsibility makes it all worth it. One of the primary downsides of inline JS styles is that we can't use pseudoselectors such as :hover or @media. I hope to show how we can get around that using helper libraries in an upcoming post.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/widmark\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/author\\\/ola\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/author\\\/ola\\\/#author\"},\"datePublished\":\"2024-09-13T09:48:11+02:00\",\"dateModified\":\"2024-11-15T16:20:53+01:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/informator.se\\\/en\\\/\",\"name\":\"Informator\",\"description\":\"Sveriges ledande utbildningar inom IT, tech och ledarskap\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/informator.se\\\/en\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"CSS selectors are evil and JS is the solution - Informator","description":"rder-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\">h2 { font-family: Verdana; font-size: 14px;}.explanationBox { border-radius: 15px; padding: 10px; border: 2px solid springgreen; background-color: moccasin; color: magenta;}.explanationBox__headline { font-weight: normal; letter-spacing: 5px; padding-left: 15px; font-style: italic;} It is now slightly more clear what styles are applied where. Both the earlier questions are easier to answer, since we can do a search for the more precise class names. But we still have the problem of the generic h2 selector. Also class names might be dynamically created and\/or added to an element, so again, in a dynamic setting it might still be hard to find out exactly what's going on. Take 3 - inline styles in a React component The basic idea in BEM, as well as in OOCSS or any of the other attempts at bringing structure to CSS, is to think in terms of components. All style definitions, as far as possible, should be tied to a certain component. This jives very well with modern JS frameworks, who (almost) all have a component-centric architecture. If components are our main abstraction, then it is very easy to make an API to style individual components. React (and most of the competition) does this by letting us provide a CSS-like JS object to the style prop: const box = { borderRadius: \"15px\", padding: \"10px\", border: '2px solid springgreen', backgroundColor: 'moccasin', color: 'magenta'};const headline = { fontFamily: 'Verdana', \/\/ should live in generic h2 styling, but we're cheating for now fontWeight: \"normal\", letterSpacing: \"5px\", paddingLeft: \"15px\", fontStyle: \"italic\", fontSize: '14px'};export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} Elsewhere in our React app we can now do this... Ozelots hate maccaws! ...and we have our reusable, styled component! Take 4 - imported inline styles However, what you just saw was really nothing but a regression to our Take 0 attempt, where we put all styles inline. Like an animal. But we can improve on this super easily, simply by migrating the styles to a separate file! Imagine the following living in a file named styles.js: export const typography = { h2: { fontFamily: 'Verdana', fontSize: '16px' }};export const explanation = { box: { borderRadius: \"15px\", padding: \"10px\", border: '2px solid springgreen', backgroundColor: 'moccasin, color: 'magenta', }, headline: { ...typography.h2, fontWeight: \"normal\", letterSpacing: \"5px\", paddingLeft: \"15px\", fontStyle: \"italic\", fontSize: '14px' }}; Note the handling of the basic h2 styles! Our React component now becomes this: import {explanation} from styles;export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} We have now sort of reinvented the stylesheet! Except, where before the stylesheet used selectors to fire blindly into the dark... ...we now let the components go get exactly the styles they need via imports: It might not be immediately obvious, but the flipping of this arrow makes a world of difference! Finding the killer Remember the first unanswerable question? What styles are applied to this element? In our imported inline style setup, this becomes trivial to answer. I simply follow the thread backwards from the style prop! Finding the victim Our second unanswerable question was: To which elements are these styles applied? Again, because of the explicit imports, this becomes very easy to answer (if you have a semi-competent editor): LESS isn't more Through moving our style definitions to JS land, the need for CSS preprocessors goes out the window. Remember how we used the ... spread operator to mix in the h2 styles into our headline rules? headline: { ...typography.h2, fontWeight: \"normal\", letterSpacing: \"5px\", paddingLeft: \"15px\", fontStyle: \"italic\", fontSize: '14px'} That was the equivalent of a LESS\/SASS mixin! You'll quickly find that the other syntax they give us can be easily replicated with pure JS. For example, having global variables becomes trivial: export const palette = { softcolor: 'moccasin', hardcolor: 'magenta', accentuationcolor: 'springgreen'}export const explanationBlock = { box: { borderRadius: \"15px\", padding: \"10px\", border: '2px solid ' + palette.accentuationcolor, backgroundColor: palette.softcolor, color: palette.hardcolor, }, \/\/ ...truncated As do implementing helper functions to add vendor prefixes, saturate colours, etc. Wrapping up To recap; by turning the arrows around through using JS and inline styles, almost all opaqueness of regular CSS goes away. Previously difficult tasks such as... renaming a CSS class identifying and removing dead CSS code hitting the correct elements with selectors NOT hitting the wrong elements with selectors ...suddenly become easy or entirely moot. While there are still a lot of questions to be answered regarding moving CSS to JS space, there's no doubt in my mind that just being able to flip the arrow of responsibility makes it all worth it. One of the primary downsides of inline JS styles is that we can't use pseudoselectors such as :hover or @media. I hope to show how we can get around that using helper libraries in an upcoming post.","canonical_url":"https:\/\/informator.se\/en\/widmark\/","robots":"noindex, max-snippet:-1, max-image-preview:large, max-video-preview:-1","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/informator.se\/en\/widmark\/#blogposting","name":"CSS selectors are evil and JS is the solution - Informator","headline":"CSS selectors are evil and JS is the solution","author":{"@id":"https:\/\/informator.se\/en\/author\/ola\/#author"},"publisher":{"@id":"https:\/\/informator.se\/en\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/media.graphcms.com\/DLcXvGbGTDGeKHcbTkMV","@id":"https:\/\/informator.se\/en\/widmark\/#articleImage"},"datePublished":"2024-09-13T09:48:11+02:00","dateModified":"2024-11-15T16:20:53+01:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/informator.se\/en\/widmark\/#webpage"},"isPartOf":{"@id":"https:\/\/informator.se\/en\/widmark\/#webpage"},"articleSection":"Okategoriserad"},{"@type":"BreadcrumbList","@id":"https:\/\/informator.se\/en\/widmark\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/informator.se\/en\/#listItem","position":1,"name":"Home","item":"https:\/\/informator.se\/en\/","nextItem":{"@type":"ListItem","@id":"https:\/\/informator.se\/category\/okategoriserad\/#listItem","name":"Okategoriserad"}},{"@type":"ListItem","@id":"https:\/\/informator.se\/category\/okategoriserad\/#listItem","position":2,"name":"Okategoriserad","item":"https:\/\/informator.se\/category\/okategoriserad\/","nextItem":{"@type":"ListItem","@id":"https:\/\/informator.se\/en\/widmark\/#listItem","name":"CSS selectors are evil and JS is the solution"},"previousItem":{"@type":"ListItem","@id":"https:\/\/informator.se\/en\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/informator.se\/en\/widmark\/#listItem","position":3,"name":"CSS selectors are evil and JS is the solution","previousItem":{"@type":"ListItem","@id":"https:\/\/informator.se\/category\/okategoriserad\/#listItem","name":"Okategoriserad"}}]},{"@type":"Organization","@id":"https:\/\/informator.se\/en\/#organization","name":"Informator Utbildning Svenska AB","description":"Informator \u00e4r ett svenskt utbildningsbolag som erbjuder utbildningar inom IT, Tech och ledarskap f\u00f6r f\u00f6retag och organisationer.","url":"https:\/\/informator.se\/en\/","telephone":"+46858711610","logo":{"@type":"ImageObject","url":"https:\/\/informator.se\/wp-content\/uploads\/2026\/01\/Informator_logo_cmyk-png-FOR-WEBB.png","@id":"https:\/\/informator.se\/en\/widmark\/#organizationLogo","width":355,"height":218},"image":{"@id":"https:\/\/informator.se\/en\/widmark\/#organizationLogo"},"sameAs":["https:\/\/www.facebook.com\/people\/Informator-Utbildning\/61569394055772\/","https:\/\/www.instagram.com\/informator_utbildning\/","https:\/\/se.linkedin.com\/school\/informatorutbildning\/"]},{"@type":"Person","@id":"https:\/\/informator.se\/en\/author\/ola\/#author","url":"https:\/\/informator.se\/en\/author\/ola\/","name":"Ola","image":{"@type":"ImageObject","@id":"https:\/\/informator.se\/en\/widmark\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/8dc8b4e0b2ce4c9877b24492eb6bd485776c74f000707741481e2adcb5f7b25f?s=96&d=mm&r=g","width":96,"height":96,"caption":"Ola"}},{"@type":"WebPage","@id":"https:\/\/informator.se\/en\/widmark\/#webpage","url":"https:\/\/informator.se\/en\/widmark\/","name":"CSS selectors are evil and JS is the solution - Informator","description":"rder-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;\">h2 { font-family: Verdana; font-size: 14px;}.explanationBox { border-radius: 15px; padding: 10px; border: 2px solid springgreen; background-color: moccasin; color: magenta;}.explanationBox__headline { font-weight: normal; letter-spacing: 5px; padding-left: 15px; font-style: italic;} It is now slightly more clear what styles are applied where. Both the earlier questions are easier to answer, since we can do a search for the more precise class names. But we still have the problem of the generic h2 selector. Also class names might be dynamically created and\/or added to an element, so again, in a dynamic setting it might still be hard to find out exactly what's going on. Take 3 - inline styles in a React component The basic idea in BEM, as well as in OOCSS or any of the other attempts at bringing structure to CSS, is to think in terms of components. All style definitions, as far as possible, should be tied to a certain component. This jives very well with modern JS frameworks, who (almost) all have a component-centric architecture. If components are our main abstraction, then it is very easy to make an API to style individual components. React (and most of the competition) does this by letting us provide a CSS-like JS object to the style prop: const box = { borderRadius: \"15px\", padding: \"10px\", border: '2px solid springgreen', backgroundColor: 'moccasin', color: 'magenta'};const headline = { fontFamily: 'Verdana', \/\/ should live in generic h2 styling, but we're cheating for now fontWeight: \"normal\", letterSpacing: \"5px\", paddingLeft: \"15px\", fontStyle: \"italic\", fontSize: '14px'};export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} Elsewhere in our React app we can now do this... Ozelots hate maccaws! ...and we have our reusable, styled component! Take 4 - imported inline styles However, what you just saw was really nothing but a regression to our Take 0 attempt, where we put all styles inline. Like an animal. But we can improve on this super easily, simply by migrating the styles to a separate file! Imagine the following living in a file named styles.js: export const typography = { h2: { fontFamily: 'Verdana', fontSize: '16px' }};export const explanation = { box: { borderRadius: \"15px\", padding: \"10px\", border: '2px solid springgreen', backgroundColor: 'moccasin, color: 'magenta', }, headline: { ...typography.h2, fontWeight: \"normal\", letterSpacing: \"5px\", paddingLeft: \"15px\", fontStyle: \"italic\", fontSize: '14px' }}; Note the handling of the basic h2 styles! Our React component now becomes this: import {explanation} from styles;export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} We have now sort of reinvented the stylesheet! Except, where before the stylesheet used selectors to fire blindly into the dark... ...we now let the components go get exactly the styles they need via imports: It might not be immediately obvious, but the flipping of this arrow makes a world of difference! Finding the killer Remember the first unanswerable question? What styles are applied to this element? In our imported inline style setup, this becomes trivial to answer. I simply follow the thread backwards from the style prop! Finding the victim Our second unanswerable question was: To which elements are these styles applied? Again, because of the explicit imports, this becomes very easy to answer (if you have a semi-competent editor): LESS isn't more Through moving our style definitions to JS land, the need for CSS preprocessors goes out the window. Remember how we used the ... spread operator to mix in the h2 styles into our headline rules? headline: { ...typography.h2, fontWeight: \"normal\", letterSpacing: \"5px\", paddingLeft: \"15px\", fontStyle: \"italic\", fontSize: '14px'} That was the equivalent of a LESS\/SASS mixin! You'll quickly find that the other syntax they give us can be easily replicated with pure JS. For example, having global variables becomes trivial: export const palette = { softcolor: 'moccasin', hardcolor: 'magenta', accentuationcolor: 'springgreen'}export const explanationBlock = { box: { borderRadius: \"15px\", padding: \"10px\", border: '2px solid ' + palette.accentuationcolor, backgroundColor: palette.softcolor, color: palette.hardcolor, }, \/\/ ...truncated As do implementing helper functions to add vendor prefixes, saturate colours, etc. Wrapping up To recap; by turning the arrows around through using JS and inline styles, almost all opaqueness of regular CSS goes away. Previously difficult tasks such as... renaming a CSS class identifying and removing dead CSS code hitting the correct elements with selectors NOT hitting the wrong elements with selectors ...suddenly become easy or entirely moot. While there are still a lot of questions to be answered regarding moving CSS to JS space, there's no doubt in my mind that just being able to flip the arrow of responsibility makes it all worth it. One of the primary downsides of inline JS styles is that we can't use pseudoselectors such as :hover or @media. I hope to show how we can get around that using helper libraries in an upcoming post.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/informator.se\/en\/#website"},"breadcrumb":{"@id":"https:\/\/informator.se\/en\/widmark\/#breadcrumblist"},"author":{"@id":"https:\/\/informator.se\/en\/author\/ola\/#author"},"creator":{"@id":"https:\/\/informator.se\/en\/author\/ola\/#author"},"datePublished":"2024-09-13T09:48:11+02:00","dateModified":"2024-11-15T16:20:53+01:00"},{"@type":"WebSite","@id":"https:\/\/informator.se\/en\/#website","url":"https:\/\/informator.se\/en\/","name":"Informator","description":"Sveriges ledande utbildningar inom IT, tech och ledarskap","inLanguage":"en-US","publisher":{"@id":"https:\/\/informator.se\/en\/#organization"}}]},"og:locale":"en_US","og:site_name":"Informator","og:type":"article","og:title":"CSS selectors are evil and JS is the solution - Informator","og:description":"rder-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;&quot;&gt;h2 { font-family: Verdana; font-size: 14px;}.explanationBox { border-radius: 15px; padding: 10px; border: 2px solid springgreen; background-color: moccasin; color: magenta;}.explanationBox__headline { font-weight: normal; letter-spacing: 5px; padding-left: 15px; font-style: italic;} It is now slightly more clear what styles are applied where. Both the earlier questions are easier to answer, since we can do a search for the more precise class names. But we still have the problem of the generic h2 selector. Also class names might be dynamically created and\/or added to an element, so again, in a dynamic setting it might still be hard to find out exactly what's going on. Take 3 - inline styles in a React component The basic idea in BEM, as well as in OOCSS or any of the other attempts at bringing structure to CSS, is to think in terms of components. All style definitions, as far as possible, should be tied to a certain component. This jives very well with modern JS frameworks, who (almost) all have a component-centric architecture. If components are our main abstraction, then it is very easy to make an API to style individual components. React (and most of the competition) does this by letting us provide a CSS-like JS object to the style prop: const box = { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: '2px solid springgreen', backgroundColor: 'moccasin', color: 'magenta'};const headline = { fontFamily: 'Verdana', \/\/ should live in generic h2 styling, but we're cheating for now fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: '14px'};export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} Elsewhere in our React app we can now do this... Ozelots hate maccaws! ...and we have our reusable, styled component! Take 4 - imported inline styles However, what you just saw was really nothing but a regression to our Take 0 attempt, where we put all styles inline. Like an animal. But we can improve on this super easily, simply by migrating the styles to a separate file! Imagine the following living in a file named styles.js: export const typography = { h2: { fontFamily: 'Verdana', fontSize: '16px' }};export const explanation = { box: { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: '2px solid springgreen', backgroundColor: 'moccasin, color: 'magenta', }, headline: { ...typography.h2, fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: '14px' }}; Note the handling of the basic h2 styles! Our React component now becomes this: import {explanation} from styles;export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} We have now sort of reinvented the stylesheet! Except, where before the stylesheet used selectors to fire blindly into the dark... ...we now let the components go get exactly the styles they need via imports: It might not be immediately obvious, but the flipping of this arrow makes a world of difference! Finding the killer Remember the first unanswerable question? What styles are applied to this element? In our imported inline style setup, this becomes trivial to answer. I simply follow the thread backwards from the style prop! Finding the victim Our second unanswerable question was: To which elements are these styles applied? Again, because of the explicit imports, this becomes very easy to answer (if you have a semi-competent editor): LESS isn't more Through moving our style definitions to JS land, the need for CSS preprocessors goes out the window. Remember how we used the ... spread operator to mix in the h2 styles into our headline rules? headline: { ...typography.h2, fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: '14px'} That was the equivalent of a LESS\/SASS mixin! You'll quickly find that the other syntax they give us can be easily replicated with pure JS. For example, having global variables becomes trivial: export const palette = { softcolor: 'moccasin', hardcolor: 'magenta', accentuationcolor: 'springgreen'}export const explanationBlock = { box: { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: '2px solid ' + palette.accentuationcolor, backgroundColor: palette.softcolor, color: palette.hardcolor, }, \/\/ ...truncated As do implementing helper functions to add vendor prefixes, saturate colours, etc. Wrapping up To recap; by turning the arrows around through using JS and inline styles, almost all opaqueness of regular CSS goes away. Previously difficult tasks such as... renaming a CSS class identifying and removing dead CSS code hitting the correct elements with selectors NOT hitting the wrong elements with selectors ...suddenly become easy or entirely moot. While there are still a lot of questions to be answered regarding moving CSS to JS space, there's no doubt in my mind that just being able to flip the arrow of responsibility makes it all worth it. One of the primary downsides of inline JS styles is that we can't use pseudoselectors such as :hover or @media. I hope to show how we can get around that using helper libraries in an upcoming post.","og:url":"https:\/\/informator.se\/en\/widmark\/","og:image":"https:\/\/informator.se\/wp-content\/uploads\/2026\/08\/Informator_Logo_OG.png","og:image:secure_url":"https:\/\/informator.se\/wp-content\/uploads\/2026\/08\/Informator_Logo_OG.png","og:image:width":1717,"og:image:height":916,"article:published_time":"2024-09-13T08:48:11+00:00","article:modified_time":"2024-11-15T15:20:53+00:00","article:publisher":"https:\/\/www.facebook.com\/people\/Informator-Utbildning\/61569394055772\/","twitter:card":"summary_large_image","twitter:title":"CSS selectors are evil and JS is the solution - Informator","twitter:description":"rder-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid #cccccc; box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857143; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;&quot;&gt;h2 { font-family: Verdana; font-size: 14px;}.explanationBox { border-radius: 15px; padding: 10px; border: 2px solid springgreen; background-color: moccasin; color: magenta;}.explanationBox__headline { font-weight: normal; letter-spacing: 5px; padding-left: 15px; font-style: italic;} It is now slightly more clear what styles are applied where. Both the earlier questions are easier to answer, since we can do a search for the more precise class names. But we still have the problem of the generic h2 selector. Also class names might be dynamically created and\/or added to an element, so again, in a dynamic setting it might still be hard to find out exactly what's going on. Take 3 - inline styles in a React component The basic idea in BEM, as well as in OOCSS or any of the other attempts at bringing structure to CSS, is to think in terms of components. All style definitions, as far as possible, should be tied to a certain component. This jives very well with modern JS frameworks, who (almost) all have a component-centric architecture. If components are our main abstraction, then it is very easy to make an API to style individual components. React (and most of the competition) does this by letting us provide a CSS-like JS object to the style prop: const box = { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: '2px solid springgreen', backgroundColor: 'moccasin', color: 'magenta'};const headline = { fontFamily: 'Verdana', \/\/ should live in generic h2 styling, but we're cheating for now fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: '14px'};export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} Elsewhere in our React app we can now do this... Ozelots hate maccaws! ...and we have our reusable, styled component! Take 4 - imported inline styles However, what you just saw was really nothing but a regression to our Take 0 attempt, where we put all styles inline. Like an animal. But we can improve on this super easily, simply by migrating the styles to a separate file! Imagine the following living in a file named styles.js: export const typography = { h2: { fontFamily: 'Verdana', fontSize: '16px' }};export const explanation = { box: { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: '2px solid springgreen', backgroundColor: 'moccasin, color: 'magenta', }, headline: { ...typography.h2, fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: '14px' }}; Note the handling of the basic h2 styles! Our React component now becomes this: import {explanation} from styles;export class ExplanationBox extends React.Component { render() { return ( {this.props.title} {this.props.children} ); }} We have now sort of reinvented the stylesheet! Except, where before the stylesheet used selectors to fire blindly into the dark... ...we now let the components go get exactly the styles they need via imports: It might not be immediately obvious, but the flipping of this arrow makes a world of difference! Finding the killer Remember the first unanswerable question? What styles are applied to this element? In our imported inline style setup, this becomes trivial to answer. I simply follow the thread backwards from the style prop! Finding the victim Our second unanswerable question was: To which elements are these styles applied? Again, because of the explicit imports, this becomes very easy to answer (if you have a semi-competent editor): LESS isn't more Through moving our style definitions to JS land, the need for CSS preprocessors goes out the window. Remember how we used the ... spread operator to mix in the h2 styles into our headline rules? headline: { ...typography.h2, fontWeight: &quot;normal&quot;, letterSpacing: &quot;5px&quot;, paddingLeft: &quot;15px&quot;, fontStyle: &quot;italic&quot;, fontSize: '14px'} That was the equivalent of a LESS\/SASS mixin! You'll quickly find that the other syntax they give us can be easily replicated with pure JS. For example, having global variables becomes trivial: export const palette = { softcolor: 'moccasin', hardcolor: 'magenta', accentuationcolor: 'springgreen'}export const explanationBlock = { box: { borderRadius: &quot;15px&quot;, padding: &quot;10px&quot;, border: '2px solid ' + palette.accentuationcolor, backgroundColor: palette.softcolor, color: palette.hardcolor, }, \/\/ ...truncated As do implementing helper functions to add vendor prefixes, saturate colours, etc. Wrapping up To recap; by turning the arrows around through using JS and inline styles, almost all opaqueness of regular CSS goes away. Previously difficult tasks such as... renaming a CSS class identifying and removing dead CSS code hitting the correct elements with selectors NOT hitting the wrong elements with selectors ...suddenly become easy or entirely moot. While there are still a lot of questions to be answered regarding moving CSS to JS space, there's no doubt in my mind that just being able to flip the arrow of responsibility makes it all worth it. One of the primary downsides of inline JS styles is that we can't use pseudoselectors such as :hover or @media. I hope to show how we can get around that using helper libraries in an upcoming post.","twitter:image":"https:\/\/informator.se\/wp-content\/uploads\/2024\/08\/informator_logo_white_footer-1.png"},"aioseo_meta_data":{"post_id":"25046","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2024-10-15 16:00:37","updated":"2025-06-14 01:20:16","seo_analyzer_scan_date":null,"focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/informator.se\/en\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/informator.se\/category\/okategoriserad\/\" title=\"Okategoriserad\">Okategoriserad<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tCSS selectors are evil and JS is the solution\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/informator.se\/en\/"},{"label":"Okategoriserad","link":"https:\/\/informator.se\/category\/okategoriserad\/"},{"label":"CSS selectors are evil and JS is the solution","link":"https:\/\/informator.se\/en\/widmark\/"}],"_links":{"self":[{"href":"https:\/\/informator.se\/en\/wp-json\/wp\/v2\/posts\/25046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informator.se\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/informator.se\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/informator.se\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/informator.se\/en\/wp-json\/wp\/v2\/comments?post=25046"}],"version-history":[{"count":1,"href":"https:\/\/informator.se\/en\/wp-json\/wp\/v2\/posts\/25046\/revisions"}],"predecessor-version":[{"id":30011,"href":"https:\/\/informator.se\/en\/wp-json\/wp\/v2\/posts\/25046\/revisions\/30011"}],"wp:attachment":[{"href":"https:\/\/informator.se\/en\/wp-json\/wp\/v2\/media?parent=25046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/informator.se\/en\/wp-json\/wp\/v2\/categories?post=25046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/informator.se\/en\/wp-json\/wp\/v2\/tags?post=25046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}