I have read many of your answers (I don't always agree with them, but I read through all your answers and some of them have helped me immensely).
Would love to know your thoughts on CSS components. styled-components.com
CSS in JS is great for design systems or complex applications.
It allows you to bring in any component without ever worrying about style conflicts due to CSS and it's global nature.
I can use a button from one library and a button from a completely different author and never worry about CSS overlaps (if one or both uses CSS in JS).
Great for complex apps that have a lot of components and the team struggles to keep CSS class names in order (BEM and OOCSS only go so far).
Also great for designers looking to quickly prototype or iterate components using complex CSS without setting up pre/post-processors or build systems for CSS or supersets of it. You get all the benefits of SASS with CSS in JS, without the need to re-build on code change (sorta, if you don't count your app hot-reloading 😅).
.button class and having global conflicts (and forced to resolve them with specificity or dreaded !important tags).Styled components are a tool. It's important to know when a tool is useful. Don't look at every problem as a nail in need of a hammer. Similarly don't use a screwdriver to nail something.
Components which are auto-generated by complex javascript might need to have styles generated at the same time. That said, there are very few places where that is going to be applicable and it's usually better to take advantage of the natural CSS cascade.
Styled components completely defeat the purpose of CSS by tightly coupling styling with structure and behavior. It is for people that never learned HTML and CSS all that well and don't know what the heck they are doing.
Short version:
It's an absolute garbage.
A bit longer:
CSS is a good tool. CSS is enough for itself and what it is. I understand it has lack of some tools, such as nested blocks and etc. So having something such as scss or less might be reasonable, specially for $variables.
Yes, you do not need for loop in css (usually).
I see only people who never care about the actual product go this way, they try to show off and just add another layer of complication to the software, why even it is necessary to run css with javascript?!
Look at these projects final result. Garbage. Doesn't work in different devices. Doesn't animate smoothly. Because they are always busy with fixing styled components.
It has terrible performance, extra learning curve, code structure will change completely, you can't use normal css libraries such as bootstrap, then in order to address such issues, you have to add tons of more libraries to the project.
I would rather stay away this as much as possible, and advise to anyone wants to show off, they can learn some magic tricks to show to girls in a bar rather making a 2 hour work 12 hours and ruin other co-workers weekend, getting laid on is better than getting laid off.
Ali Torabi
Jason Knight
The less code you use, the less there is to break
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.