Over the last few years, CSS-in-JS solutions have become prevalent across the front-end landscape with many offerings such as styled-components, an...
For further actions, you may consider blocking this person and/or reporting abuse
Thanks for the article, Nick.
Would you consider embedding gist?
{% gist https://gist.github.com/LukeSmetham/fa938f04d2dd834643b49cdc6d490dcc %}show the gist.Thanks for the pro-tip! Done and done!
Thanks. It looks awesome :)
Styled components are nice but they need more adoption to become mainstream. For example let's say I want to buy an HTML template (because I'm bored to build my own theme from scratch). Almost all the times they are using some sort of preprocessors like SCSS or Less.
I wouldn't say that it isn't mainstream at all, it's a huge library - but I totally agree, it can be harder to implement styled-components as effectively in parallel with things like SCSS and Less which can make it harder to adopt - although you being bored enough to buy a template that doesn't work perfectly with your stack shouldn't be a good pointer of how successful a library is either 😝
You made a clear point for me - engineers will like components, designers probably not (speaking as the former - so I am speculating about the latter!). Too much confusion of professional roles in styled components?
I 100% disagree. Fair enough it may be overkill if your writing a very small app, but even just to have legitimate media queries and SCSS rules like
& > * + *is a huge win over doing plain style in your jsx file surely.Nice, Thanks for sharing!
Thank you! Of course!
I really despise CSS-in-JS. I think it's a personal taste, though. I also see your long list of styled-components CONS list, with huge and loud arguments that totally outweigh the PROS... and yet you recommend going with it. So that really confirms is a matter of taste.
Most of my applications that I build with a frontend are SPA at this point. Even when they're not, having the styled-components more closely associated with my JS is really nice.
I definitely think there's a use case for both, but I find myself favoring styled-components more and more often.
import this in a separate file and make it the default export, move all the CSS from your template inside of the template string and then import the file into your global styles.
Then you can still utilize your theme and all the other SC features inside of the CSS provided by your template and customize it however you see fit.
styled components were designed by focusing on full-stack devs :)