"Several of Ply's core features have been released as Inactive CSS in Mozilla Firefox 70."
"Learning CSS" is a years-long pursuit, and it's constantly evolving. I was a frontend developer most of my career (and by all accounts a pretty damn good one), but I've spent the last four years almost completely on backend work. I have some frontend work coming up and I am honestly nervous that it will take quite a bit of time and consternation for me to become productive with whatever has changed. (It's almost certain I'm going to need to learn grid, who knows what else.)
Am I going to look to a tool like this to help me get back up to speed? You bet your ass I am.
Flexbox and CSS Grid have introduced another level of complexity, in that, the display value of an element turns its direct children into flexbox/grid elements, making their display value irrelevant. It also makes their flex-* properties effective. You'd have to parse the DOM tree to detect such dependencies.
Also, pruning innefective properties isn't that easy because you need to take into account the context. Let's say you have a blue button with white text. This button is in dark navbar that also has white text. Apparently, the button's color is ineffective because inheriting its value from the navbar would suffice. But that same button in a dark text context would make the color property effective again. Since the button would have the same CSS class, you can't prune the color for all instances.
Definitely a hard problem to tackle.
In fact, I’d love to have a CLI tool that would take a website (or a set of CSS files and a sample HTML layout) and spat out the minimally effective CSS required for it — an optimizing compiler, if you would.
Using a limited number of selectors helps you reason about what each property is doing and highlights how many superfluous properties you've been using to accomplish what could be done rather simply.
So the way Ply works is it deletes each CSS property and looks for visual regression; but what if the deletion of a CSS property introduces visual differences only under certain screen sizes due to the use of media query?