3 ms·
I think the future of CSS is that we'll see all the innovation from the CSS-in-JS world come back home to CSS stylesheets. It's hard to beat the high-level dec
by err4nt 7y ago
I think the future of CSS is that we'll see all the innovation from the CSS-in-JS world come back home to CSS stylesheets.
It's hard to beat the high-level declarative nature of writing style rules in a stylesheet that can style any HTML or XML DOM you use them with. I think a lot of current CSS-in-JS tooling ends up being too limited in that it often requires you to know the DOM in advance and couples the styles tightly with the DOM - while also leaving you unable to style anything you run across or need to work with that was created outside your particular workflow or pre-exists outside of your app.
The future looks like CSS, augmented by Layout worklets written in JS, and augmented by Paint worklets written in JS, and Animation worklets written in JS, and Custom Property definitions that can be supported by JS. And we believe custom script-supported at-rules, functions, and selectors are next to come to CSS.
The long and sort of it - you should be writing CSS in CSS stylesheets, and JavaScript in your JavaScript files, and find ways to use Javascript to define the custom features you want to use in your stylesheets. This is how the technology is growing, and when you extend real CSS with real JS, you can style anything, any DOM made by any tools.
More reading:
- https://houdini.glitch.me https://houdini.glitch.me
- https://css-houdini.rocks https://css-houdini.rocks
- https://developer.mozilla.org/en-US/docs/Web/API/Worklet https://developer.mozilla.org/en-US/docs/Web/API/Worklet
- mmckelvy 7y agoSo a lot of that sounds good, and the Houdini stuff looks interesting, but how does "extending CSS" with JS or worklets solve the two main problems of CSS, namely the ability to define local styles and the ability to dynamically change or define styles on the fly? Also, it doesn't look like browser support for those new APIs is going be very good for quite some time.
- err4nt 7y agoI'm not quite sure what you're asking about the 'two main problems of CSS' - can you explain more about what's problematic about defining 'local styles' or updating styles dynamically? CSS custom properties, which already do have browser support, are a wonderful example of allowing JS to set values that CSS is able to take and use dynamically - check out libraries like Splitting.js or ScrollMagic for examples of applications of that. Houdini worklets (pluggable Layout, Paint, Animation worklets) are definitely coming - this is what's currently being worked on as well as the 'Typed Object Model' for CSS where they're tightening the bolts and helping JS become aware of the different values and types inside the CSS language. Also, when looking at support, keep in mind that as of Jan 15th, Edge will have the same support as Chrome :D