Thread
Popular posts
As you can see, styled-components lets you write actual CSS in your JavaScript
Aka where CSS has absolutely ZERO blasted business being in 98%+ of usage scenarios. That's your stylesheet's flipping job, not your scripting or markup's!
Putting style into the JavaScript that way is as bad as slopping it into your markup. It violates separation of concerns, is typically inefficient, and in all but a few cases (even fewer now that CSS3 transitions are in play) is as flawed in mindset and methodology as using innerHTML. It reeks of the same mindset as the people who insist on using presentational classes in a manner that drags everything back to the worst of pre HTML 4 Strict browser wars era practices.
That once built it seems to slop it into blocking scripts in the document HEAD tag? Epic /FAIL/ at web development and like MOST of this type of stuff, a complete failure to grasp the POINT of HTML, CSS, or JavaScript.
Though they have a lack of a live demo on the site itself, so I'm mostly looking at shoddy jsFiddles to have an idea what it's doing; what I'm seeing it do though? I'd deliver a slap with a wet trout to someone trying to deploy code like that.
... and like a great many such projects, a simple 'view source' of their website tells me all I need to know about it, as those working on it are clearly unqualified to even be creating websites in the first place, much less telling others how to do so. AGAIN, as I often say if you don't know what's wrong with code like this: (I'm adding linefeeds to show how absurd it is)
<div class="root"><div id="__next"><div><div><nav
class="Navbar__Wrapper-sc-1mplyxk-0 fPBwEL"><div
class="Navbar__NormalNavbar-sc-1mplyxk-1 eLgvpE"><div
class="Navbar__StartWrapper-sc-1mplyxk-2 dnhgPr"><a href="/"
class="Navbar__LogoLink-sc-1mplyxk-4 hWRxVU"><div class="Logo-sc-
1wiu9k4-0 liDlwg"></div></a><nav class="NavLinks__Wrapper-sc-82sbtk-0
dSoyDF"><a href="/docs" class="NavLinks__NavLink-sc-82sbtk-1
fvbpKX">Documentation</a><span class="NavSeparator-sc-1afez1g-0
fHcBJS"></span><a href="/ecosystem" class="NavLinks__NavLink-sc-82sbtk-1
fvbpKX">Ecosystem</a><span class="NavSeparator-sc-1afez1g-0 fHcBJS">
</span><a href="/releases" class="NavLinks__NavLink-sc-82sbtk-1
fvbpKX">Releases</a></nav></div><div class="Navbar__EndWrapper-sc-
1mplyxk-3 hQtIPP"><nav class="Social__Wrapper-sc-4j9mhd-0 iiZscp"><a
href="spectrum.chat/styled-components" class="Social__SocialLink-sc-
4j9mhd-1 cNhMzF"><svg width="14" height="14" viewBox="0 0 15 15"
class="Social__Svg-sc-4j9mhd-2 hObLqm"><title>spectrum</title><path
fill="#FFF" d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-
1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"></path></svg></a><a
href="github.com/styled-components" class="Social__SocialLink-sc-
4j9mhd-1 cNhMzF"><svg width="17" height="17" viewBox="0 0 17 17"
class="Social__Svg-sc-4j9mhd-2 dRxKSQ"><title>github</title><path fill="#FFF"
d="M15.86 4.34c-.76-1.335-1.79-2.392-3.093-3.17C11.463.39 10.042 0 8.5 0
6.958 0 5.536.39 4.233 1.17 2.93 1.947 1.9 3.004 1.14 4.34.38 5.674 0 7.132 0
8.713c0 1.898.54 3.606 1.62 5.122 1.082 1.517 2.48 2.566 4.19
3.148.2.038.347.01.443-.08.096-.09.144-.203.144-.34l-.006-.612v-
1l-.25.05c-.16.03-.36.05-.61.04-.24
0-.5-.03-.77-.08-.26-.05-.51-.16-.74-.34-.23-.18-.39-.41-.49-.7l-.11-.26c-.07-.17-.1
9-.36-.35-.58-.16-.21-.32-.35-.48-.43l-.08-.05c-.05-.04-.09-.08-.14-.132-.04-.053-.
08-.106-.1-.16-.02-.053
0-.097.06-.13.06-.035.17-.052.32-.052l.22.036c.15.03.33.12.55.27.22.154.4.35.
54.59.17.31.375.55.615.71.24.164.484.245.727.245s.456-.02.63-.056c.18-.037.
346-.094.5-.17.067-.507.248-.896.54-1.17-.42-.043-.795-.112-
1.13-.203-.34-.09-.685-.24-1.04-.44-.36-.2-.657-.455-.894-.76-.234-.3-.43-.7-.58-
1.19-.15-.49-.225-1.06-.225-1.7 0-.917.29-1.695.875-2.34-.27-.69-.244-1.46.08-
2.313.214-.07.53-.015.95.155.42.17.73.314.926.435.195.12.35.225.47.308.684-
.2 1.394-.3 2.124-.3s1.44.1 2.124.297l.42-.27c.288-.184.628-.35
1.02-.5.39-.15.69-.195.895-.126.334.857.364 1.63.09 2.317.584.645.875
1.42.875 2.34 0 .64-.072 1.21-.223 1.707-.15.5-.343.897-.583
1.196-.24.298-.54.55-.896.754-.355.202-.702.35-1.04.44-.334.09-.712.16-
1.132.205.38.34.57.875.57 1.61v2.39c0
.136.045.25.137.34.096.09.24.118.44.08 1.71-.582 3.11-1.632 4.19-3.15 1.06-
1.525 1.6-3.235 1.6-5.13 0-1.58-.38-3.04-1.14-4.37z"></path></svg></a><a
href="medium.com/styled-components" class="Social__SocialLink-sc-
4j9mhd-1 cNhMzF"><svg width="17" height="14" viewBox="0 0 17 14"
class="Social__Svg-sc-4j9mhd-2 hVjyIc"><title>medium</title><path fill="#fff"
d="M5.3 0H.5l1.8 2.4v9L0 13.7h5.3l-2-2.3V3.7L7.8 14 12 3.7v8.7l-1.3 1.3H17l-
1.5-1.3v-11L17 0h-4.5L9 8.2 5.2 0z"></path></svg></a></nav></div></div><div
class="MobileNavbar__Wrapper-sc-1mwg5kk-0 iIccpC"><a href="/"
class="MobileNavbar__LogoLink-sc-1mwg5kk-2 fDeVhK" aria-label="styled
components"><div class="Logo-sc-1wiu9k4-0 bKXIGg"></div></a><button
class="NavButton-bbdxin-0 izEEdw"><div
class="MobileNavbar__ArrowWrapper-sc-1mwg5kk-3 hbSZxl"><svg
xmlns="w3.org/2000/svg" width="12" height="8"
xmlns:xlink="w3.org/1999/xlink" class="NavIcons__Svg-gjgetu-0
hQUWPV"><title>arrow down</title><use fill="#FFF" xlink:href="#menuArrow"
transform="translate(1 1)"></use><defs><path id="menuArrow" d="M5
5l-.7.7.7.7.7-.7L5 5zM9.3-.7l-5 5 1.4 1.4 5-5L9.3-.7zm-3.6 5l-5-5L-.7.7l5 5 1.4-
1.4z"></path></defs></svg></div></button><div
class="MobileNavbar__SecondaryMenu-sc-1mwg5kk-1 dEouRT"><nav
class="NavLinks__Wrapper-sc-82sbtk-0 dSoyDF"><a href="/docs"
class="NavLinks__NavLink-sc-82sbtk-1 fvbpKX">Documentation</a><span
class="NavSeparator-sc-1afez1g-0 fHcBJS"></span><a href="/ecosystem"
class="NavLinks__NavLink-sc-82sbtk-1 fvbpKX">Ecosystem</a><span
class="NavSeparator-sc-1afez1g-0 fHcBJS"></span><a href="/releases"
class="NavLinks__NavLink-sc-82sbtk-1 fvbpKX">Releases</a></nav><span
class="NavSeparator-sc-1afez1g-0 fHcBJS"></span><div
class="MobileNavbar__SecondaryMenuItem-sc-1mwg5kk-4 jNELfW"><nav
class="Social__Wrapper-sc-4j9mhd-0 iiZscp"><a
href="spectrum.chat/styled-components" class="Social__SocialLink-sc-
4j9mhd-1 cNhMzF"><svg width="14" height="14" viewBox="0 0 15 15"
class="Social__Svg-sc-4j9mhd-2 hObLqm"><title>spectrum</title><path
fill="#FFF" d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-
1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"></path></svg></a><a
href="github.com/styled-components" class="Social__SocialLink-sc-
4j9mhd-1 cNhMzF"><svg width="17" height="17" viewBox="0 0 17 17"
class="Social__Svg-sc-4j9mhd-2 dRxKSQ"><title>github</title><path fill="#FFF"
d="M15.86 4.34c-.76-1.335-1.79-2.392-3.093-3.17C11.463.39 10.042 0 8.5 0
6.958 0 5.536.39 4.233 1.17 2.93 1.947 1.9 3.004 1.14 4.34.38 5.674 0 7.132 0
8.713c0 1.898.54 3.606 1.62 5.122 1.082 1.517 2.48 2.566 4.19
3.148.2.038.347.01.443-.08.096-.09.144-.203.144-.34l-.006-.612v-
1l-.25.05c-.16.03-.36.05-.61.04-.24
0-.5-.03-.77-.08-.26-.05-.51-.16-.74-.34-.23-.18-.39-.41-.49-.7l-.11-.26c-.07-.17-.1
9-.36-.35-.58-.16-.21-.32-.35-.48-.43l-.08-.05c-.05-.04-.09-.08-.14-.132-.04-.053-.
08-.106-.1-.16-.02-.053
0-.097.06-.13.06-.035.17-.052.32-.052l.22.036c.15.03.33.12.55.27.22.154.4.35.
54.59.17.31.375.55.615.71.24.164.484.245.727.245s.456-.02.63-.056c.18-.037.
346-.094.5-.17.067-.507.248-.896.54-1.17-.42-.043-.795-.112-
1.13-.203-.34-.09-.685-.24-1.04-.44-.36-.2-.657-.455-.894-.76-.234-.3-.43-.7-.58-
1.19-.15-.49-.225-1.06-.225-1.7 0-.917.29-1.695.875-2.34-.27-.69-.244-1.46.08-
2.313.214-.07.53-.015.95.155.42.17.73.314.926.435.195.12.35.225.47.308.684-
.2 1.394-.3 2.124-.3s1.44.1 2.124.297l.42-.27c.288-.184.628-.35
1.02-.5.39-.15.69-.195.895-.126.334.857.364 1.63.09 2.317.584.645.875
1.42.875 2.34 0 .64-.072 1.21-.223 1.707-.15.5-.343.897-.583
1.196-.24.298-.54.55-.896.754-.355.202-.702.35-1.04.44-.334.09-.712.16-
1.132.205.38.34.57.875.57 1.61v2.39c0
.136.045.25.137.34.096.09.24.118.44.08 1.71-.582 3.11-1.632 4.19-3.15 1.06-
1.525 1.6-3.235 1.6-5.13 0-1.58-.38-3.04-1.14-4.37z"></path></svg></a><a
href="medium.com/styled-components" class="Social__SocialLink-sc-
4j9mhd-1 cNhMzF"><svg width="17" height="14" viewBox="0 0 17 14"
class="Social__Svg-sc-4j9mhd-2 hVjyIc"><title>medium</title><path fill="#fff"
d="M5.3 0H.5l1.8 2.4v9L0 13.7h5.3l-2-2.3V3.7L7.8 14 12 3.7v8.7l-1.3 1.3H17l-
1.5-1.3v-11L17 0h-4.5L9 8.2 5.2 0z"></path></svg></a></nav></div></div>
</div></nav></div>
You probably shouldn't be building websites. For those of you who don't know what's wrong with that, endless pointless classes for nothing, static images in the markup, no graceful degradation, presentational images in the markup... it's 6k of ignorance doing the job of:
<div id="top">
<h1><a href="/">Styled Components</a></h1>
<input type="checkbox" id="mainMenuShowHide">
<label for="mainMenuShowHide"></label>
<div>
<ul id="mainMenu">
<li><a href="/docs">Documentation</a></li>
<li><a href="/ecosystem">Ecosystem</a></li>
<li><a href="/releases">Releases</a></li>
</u>
<ul id="socialMenu">
<li class="spectrum">
<a href="spectrum.chat/styled-components">
Spectrum
</a>
</li>
<li class="github">
<a href="github.com/styled-components">
github
</a>
</li>
<li class="medium">
<a href="medium.com/styled-components">
Medium
</a>
</li>
</ul>
</div>
<!-- #top --></div>
Not even 1k of code -- and the mobile menu wouldn't even rely on JavaScript to work. Unlike their site which scripting off goes bits-up face-down. NOTHING they are doing in that section of code warrants that bloated wreck of markup. In particular the "let's put the social menu in TWICE" nonsense! Even if we yanked the SVG it's still a ridiculously absurd bloated train wreck of how NOT to write HTML!
The inexorable conclusion is that they do not know enough about HTML or CSS to be screwing around with it in JavaScript, much less creating a system for others to do so. If they can't even make their website properly I'm sure as shine-ola not going to trust some sort of rubbish about slopping style into JavaScript where again -- IT DOESN'T BELONG!!!
More so when apparently it derps it into the huffing markup anyways.
Bottom line, if you REALLY want to write code like that, go back to writing HTML 3.2 under a 4 Tranny doctype with all those FONT and CENTER tags, ALIGN, BORDER, and BGCOLOR attributes, and tables for layout everyone seems to so clearly miss and desperately try to recreate.