I've really enjoyed using jxnblk's approach to styling. I started with basscss [1], then moved on to rebass, and finally settled on axs [2]. They all take more or less the same approach, but operate differently. Rebass generates inline styles; basscss is simply a CSS file that defines a set of utility classes (like `mb2`, `p3`, `flex-none`, etc.); and axs dynamically generates CSS classnames and stylesheets.<p>...Or at least, that used to be the case. Looking at the most recent version of rebass, it looks as if it uses the same dynamic classname/stylesheet generation strategy. Now I'm not so sure what the difference between rebass and axs are, except that the former seems to be a comprehensive set of UI components, and the latter a tool for generating your own component library.<p>In any case, I'm glad jxnblk keeps experimenting with these libraries, even if it's hard to keep up with the changes. Their surface area is so small that it's easy to pick up the API and it doesn't feel like a risk or burden to stay on older versions.<p>[1] <a href="http://basscss.com/" rel="nofollow">http://basscss.com/</a><p>[2] <a href="http://jxnblk.com/axs/" rel="nofollow">http://jxnblk.com/axs/</a>
If the rebass approach to css is interesting to you, i recommend checking out tachyons.io<p>It plays nicely with React as well. Sadly most of the discussion around Tachyons is hidden away from the web in a burrow of Slack channels, but it's an active community and there's a lot of help and show+tell to be found.
Didn't dive in too much yet but heads up that your hero animation is a bit funky in Chrome (stable). Here's a screencap: <a href="https://cl.ly/0D031Z0p3v26" rel="nofollow">https://cl.ly/0D031Z0p3v26</a>. The glitch happens towards the end of the recording.
I do really like a lot of things about the styled-components approach and general CSS in JS approach.<p>I do though have a few concerns that stem from loosing the abstraction of ascetics vs function of a component, mainly though - ease of designer collaboration;<p>It seems harder to have a designer collaborate on your styles. (Maybe they are more used to CSS more than JS, or an external contractor, or just more specialised etc). You can't have somebody change your design without them having full access and knowledge of your entire component source and architecture.<p>I notice that styled-components can automatically generate a style sheet with nice names, it would be good if this could be a step at build time. And maybe a step that can also reverse the process? adding any changed styles back into your JS files? (syncing it with an externally edited stylesheet) Does anyone else see value to this?
Why the hell are we now putting CSS in Javascript? I'm losing my mind with web developers trying to control everything in the world with client-side javascript.<p>What a mess.