Something I'm very keen to implement in a desktop browser engine, if I get that far, is a WYSIWYG CSS editor! Which you can use to restyle your own pages, specific other pages for yourself, or all other pages.
This would be a sidebar where you highlight a sample of elements to choose a CSS selector which matches them. When you hover over a selector it'll highlight all the elements it styles.
From there its a matter of organizing & laying out UI controls, displaying restylings live!
1/2
Each UI control would be paired with a menu button offering to flag the field as "!important", to unset the value, CSS vars, etc. And ofcourse links to MDN documentation!
To help make CSS selectors more intuitive I'd echo the syntax when labelling elements on the page, but I'm more relying on the interactivity to communicate with non-devs.
Also there'd be a screen where you can reorder selectors, possibly grouping them so you can apply media queries, etc. Or load fonts & other stylesheets.
2/2
The algorithm I'd use to generate these CSS selectors: Treat CSS selectors as being sets of "tests". Take the most specific selector for all elements, & take the intersection. Sort subsets by their simplicity & how few other elements they style.
Maybe then split the user-selection up & repeat this process so the style rule can have multiple selectors.
2.5/2 Truly fin!
@alcinnz What you're describing sounds like an improved version of ublock's element picker. If you did the selector alone, it'd probably be welcome and useful in ublock.
(That said, that picker has sadly gotten less useful over the years due to advertisers avoiding elements that _can_ be found using css selectors.)
