What we need
I am missing a syntax to apply a common ancestor to a set of rules. As far as I know, there’s no such concept in CSS selector syntax.
With the increasing usage of CSS definitions to style HTML markup, CSS files grow bigger and bigger. With this it’s getting more and more complex to find rules that apply the a special element and/or to have one’s code structured properly. When ie8 will support the more sophisticated locators like adjacent siblings or attribute selectors the locators and files likely will continue to grow.
Also CSS gets used in situations where you import content from several providers to display it inside one “mashup” site or (like in iGoogle or the Vista desktop) as “snippet”. In this situation one needs to separate the CSS rules of the different providers from each other and from the mashup’s home style.
Basically I want to grab remote content then wrap the grabbed sourcecode into a i.e. a <div id=”#GG”> and integrate that code together with it’s CSS in my site (or fridge display or whatever).
How it could work
The solution to this would be a ancestor grouping concept, i.e.:
ancestor "#GG" {
a { color: black; }
p { margin-top: 3em; }
}
This syntax should then expand to:
#GG a { color: black; }
#GG p { margin-top: 3em; }
Far more added value would be provided by the following construction:
ancestor "#GG" { @import(google.com/styles.css); }
or inside the HTML markup:
<link rel="StyleSheet" href="http://google.com/style.css" type="text/css" ancestor="#GG">
I think the goal should be clear now. (more…)
