Requests for comment/Scoping site CSS

Background
Currently, custom CSS rules can be added globally by editing MediaWiki:Common.css (desktop) or MediaWiki:Movile.css (mobile). This is used by many projects to add CSS rules commonly used by their communities for custom formatting within the articles.

Problem
Unfortunately, those CSS rules are almost always global and might conflict with other rules defined by skins. They are a CSS equivalent of global variables. Enforcing administrators who edit those files to come up with unique CSS classes is unrealistic.

Proposal
Since those CSS rules should be only applied to the article content, they could be scoped to work only for children of. It is unlikely that everyone who edits those rules will remember about this, but there is an easy way of post-processing the rules automatically. Assuming MediaWiki:Common.css contains:

we could wrap it using LESS/Sass nesting syntax:

and use a LESS or Sass compiler (both have PHP versions) to generate the final CSS code.

Users editing the page would see the original CSS, not wrapped in, final CSS generation would happen behind the scenes.

Questions

 * When would be the final CSS compiled? It seems logical to compile it after every save and store it somewhere in parallel to the original page.
 * Should we add a message at the top of the page saying that the rules are scoped  after saving? Or would it confuse users (do they even know that the article is inside a   div)?
 * An added benefit of doing this is that the LESS/Sass syntax could be used inside those files. Should we make it a feature too?