What is the future of CSS?

I think a lot of things that folks like about tooling are coming to CSS or are at least being discussed.

For example, in SASS, you can nest CSS rulesets.

.some-container {
  .some-child-component {
    // insert awesome CSS
  }
}

There is a working draft of this for CSS.

Scoped styles which some CSS tooling does and a lot of CSS in JS frameworks do has a working draft as well.

Aside from that, there are more pseudo selectors and classes. The :has() pseudo-class gives us something folks have wanted for a while. A parent selector.

una.css 👩🏻‍💻🇺🇦

@una

Literally me any time I remember that :has() is in Safari's latest stable release *and* behind a flag in Canary

:has() is REALLY GOOD Y'ALL

Need to make time to explore this one more and make demos!

bram.us/2021/12/21/the…

14:33 PM - 24 Mar 2022

Just like the browser APIs adopted jQuery APIs or were inspired by them, the same appears to be happening for CSS.

All these improvements mean that you can do a lot more in CSS without relying on JS for a lot of things you had to in the past.

utility-first it not an evolution. It's only a trending as it doesn't add anything new to CSS.

The future of CSS is:

• The houdini project where you and me can extend the CSS language with new feature (houdini.how/about/)
• Cascade Layers that bring another level of flexibility related to CSS selectors: css-tricks.com/css-cascade-layers/
• CSS variables, calc(), clamp(), etc. They are quite old but still not used a lot

And many more

Sometimes I feel like CSS is basically the Assembly language of styling, writing lots of code to achieve small "ideas" such as overlap, gridding, theming, and whatnot. Flexbox, Grid, etc I think have gotten us closer to this more-or-less declarative approach, where our code better reflects what the design really wants rather than just serve as a means to achieve that design.

CSS is getting really good at describing reactive, context-aware layouts. New stuff like :is(), :where() and :has(), as well as cascade layers solve scoping across components. Container Queries solve compenent-scope layouting. Auto-fill and masonry grids provide layouting algorithms. There's a spec for full-on if/else. We have variables. Is described some of that in my post about it: dev.to/iamschulz/writing-logic-in-...

I hope we can overcome the current trend of utility-first css. That approach really limits the possibilities of those new features.
Being a pessimist though, I see more tailwind and CSS-inJS.

• SASS will be fully integrated into CSS (nesting, more functions etc)
• There will be an easier way to style web components
• Maybe people will re-discover that naming classes the right way then style them is better than drowning HTML and SASS with utility-only classes, who knows

Hey, I feel this is the future of CSS
Web developers who know CSS are in high demand for businesses. In fact, according to the Bureau of Labor Statistics, web development is a profession expected to grow much faster than the average occupation over the next decade.

It's still hard to test styles in an effective way. I'd like that to be an evolution.

More and more terrible things will become "all the rage".
The web will get incrementally worse until it's only understood by AI parsers.
All hope will be lost.

I feel in future CSS may come up with css components similar to styled-components. We can maintain UI logic and functional logic separate.

dunno if it's the horizon, maybe a part of it at least, but I look forward to using Container Queries. Context and container that react to changes could have a significant impact on component-based projects.

Still early stage, though.