DEV Community

Discussion on: What is the future of CSS?

Collapse
 
polterguy profile image
Thomas Hansen

Nested selectors is about time. I'm not sure about :has() since it makes the rendering engines more complex algorithmically, possibly degrading performance, or ...?

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

At the very least, I'd expect :has() to have no performance impact where it isn't use. If that can be achieved, and it just turns into one of these features that shouldn't be overused, but won't instantly kill your whole website, then I wouldn't mind having it as a feature tbh.

Thread Thread
 
alohci profile image
Nicholas Stimpson • Edited

This is the fundamental problem. :has() does have a performance impact even where it isn't used. When a DOM element is mutated, the cascade needs to be recomputed. Without :has() implemented in browsers, only the cascade of the descendant elements of the parent of the mutated element needs to be recomputed. With :has() implemented, it was believed that the cascade of every element in the DOM would need recomputing, even if :has() wasn't used in any selector. The work done recently to implement :has() was essentially about finding a way to short cut that process to minimise the amount of the cascade that needs to be recomputed. But it can't be entirely eliminated.

Thread Thread
 
polterguy profile image
Thomas Hansen

Similar ideas is the reason why Hyperlambda is so blistering fast, because parsing only implies "forward operations", and nothing during parsing can change anything backwards in the file, which of course allows the parser to exclusively look forward ignoring everything it's already seen. Thank you for re-iterating that fact ...

Thread Thread
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

It's super easy:

  • list all your selectors with :has() somewhere in them
  • keep track of all elements that match the rest of the selector
  • follow the selector up to whatever ancestor (or descendant) the :has() applies to
  • keep track of these elements and only re-compute styles for changes inside them
  • spend another three to four decades fixing the countless bugs in your implementation, and the bugs you create by fixing those bugs, and the bugs resulting from optimisations of your previous bugfixes...

/s