Provide reference pseudocode for prepending every regular CSS rule with an ID, please

[prlbr]

Markup languages such as HTML offer the options to either set CSS for a single element, e.g. <span style="CSS here">, or globally, e.g. <style>CSS here</style>. There is currently no standard way to make CSS apply to certain parts of a document though.

Somewhat different solutions for this were suggested over the years. <style scoped> actually made it into HTML5, but wasn’t implemented by enough browsers to stay there, apparently because it was too complex for some vendors like Google. There were hopes to use declarative shadow DOM as a basis for a solution, but declarative shadow DOM has been rejected, too.

However, it has been suggested to basically emulate scoped styles by prepending all CSS rules with an ID of a container element like this.

<div id="container">
	<style>
		#container p, #container blockquote {…}
		@media print {
			#container p, #container h2+h3 span {…}
		}
	</style>
	…
</div>

The suggestion is fine with the caveat that prepending every rule with an ID automatically and reliably is not actually trivial for people who are no CSS wizards. Also, the CSS syntax gets enhanced over time and working implementations are not guaranteed to work in the future.

So I ask you to please supply reference pseudocode for the standard task of prepending an ID to every regular CSS rule and update that pseudocode whenever it needs to adapt to changes in the CSS syntax.

This code can then be implemented by software to emulate scoped CSS. This would help a lot in the continued absence of a native scoping mechanism. (And maybe it could even be used by browsers to implement a native solution in the far future.)

[tabatkins]

This isn't really doable via a script (unless you're already conforming to some notion of "components" in whatever framework you use, in which case the framework can do something like this). You need to have IDs on the relevant elements, for example.

The syntax for starting a selector with an ID selector and a descendant combinator will never change.