First off - I love to see people playing with CSS. For now the best way to play around with new concepts and ideas for CSS is by using JavaScript, so I'm happy any time anybody releases some kind of CSS-in-JS or JS-in-CSS solution. We need more of this!
Another thing I like about this project is the name: JSS 😍 Back when we were starting EQCSS the original name we gave to our alpha version was JSS
<script type="text/jss">
@element "#widget" and (min-width: 550px){
#widget {
background: red;
}
#widget a {
background: yellow;
}
}
</script>
Eventually we settled on the name EQCSS for 'Element Query CSS', and because it sounded like 'excess'.
When I use CSS and find it lacking, it's usually in the areas of finding ways to apply styles to elements with better responsive conditions, finding new ways to select elements, and using element-based units to work with layout. I'm not having issues getting my CSS written, sorted, or named. I think generally CSS is very fit for purpose and when I think of ways to improve it I always come back to minor ways to extend CSS, instead of partial (or total) replacements. But my mind is very open. I'm curious about using 100% totally custom script types to style layouts, it's just hard to make something better than CSS. I'll be trying that some time this year (wish me luck!)
It looks like the CSS-in-JS approach of JSS helps with style scoping, it should be very flexible as JavaScript should make it simple to use anything to help make responsive. It should be possible to make responsive styles that change based on the hour of the day, or day of the week. All that power and flexibility is cool and helpful, and CSS and JS do seem like a match made in heaven.
I started researching solutions for element queries and style scoping a few years ago and I was pursuing a CSS-in-JS approach but over time I ended up with the exact opposite: JS-in-CSS. What started out as our JSS proof of concept eventually turned into a fully featured CSS-like syntax for a way that JavaScript can apply styles in all kinds of novel situations that CSS is powerless to reach without a little help from JavaScript.
Another revelation as I've journeyed along that road is that there's a big divide between 'styles that can be rendered in advance' and 'styles that must be interpreted in realtime'. If you're trying to limit what you can to with a CSS-in-JS approach to just stuff that can be rendered in advance server side, you're missing out on some really wild possibilities!
The kinds of things you can do with EQCSS aren't possible to do in vanilla CSS, and definitely can't be pre-rendered in advance (like server-side). I've been wondering if it would be possible to 'compile' EQCSS syntax to 100% JavaScript that could run without being interpreted by a plugin to accomplish equivalent styling behaviour. My compiling experiment is on Github at tomhodgins/eqcss-compiler. Currently it only supports a fraction of what EQCSS supports, but I'm hoping to work more on it to discover if this sort of tool could perform better than interpreting the EQCSS syntax in realtime by the browser. (I'm not convinced it will out-perform realtime interpretation though, so all this could be for no benefit).
If you were going to do any kind of server-side rendering I would hope you'd explore something similar - taking a CSS-in-JS approach and outputting the JS you'd need to accomplish the same thing on the page, getting the full power of CSS with the added smarts of JavaScript - the best of both!
CSS was not designed for components and large sites.
I feel like you're not giving enough credit here, CSS was designed for large sites. I hear this fallacy be repeated almost daily but there's no evidence for it. CSS can be frustrating to figure out at moments, but that doesn't mean it wasn't designed with very large sites in mind.
Even it's full understanding doesn't allow you to scale it in team and code size in a robust way. Its global nature with documents in mind works just for relatively small projects.
There is so much flexibility built into CSS that we hardly make use of. With HTML5 you can create custom attributes, and CSS can make use of these attributes and their values to select things. You don't have to just set classes, different components in your site can each have their own 'namespace' for values by using as many custom attributes as you want to make up. The only limit is your imagination!
I will publish an article soon which explains the difference between scoping and isolation. They are very different terms.
I would be really interested in reading anything relating to style scoping in CSS. Here's an explanation of how I use style scoping, and the section in the element queries spec that covers style scoping so you can see where I'm coming from and how I put it to use :D
Thanks so much for sharing JSS, and hope you can make some really sweet demos with this!