gistfile1.html

<div class="whatever">
	<style>
		.whatever {
			p {
				margin: 0;
			}
		}

		/* Or even better... */
		:root {
			p {
				margin: 0;
			}
		}
		/* Where :root would be the style root element, rather than document root element */
	</style>
	<link rel="stylesheet" href="...">
	<div>...More stuff...</div>
</div>

David Storey points out that :root would be a backwards incompatible change. Perhaps a new pseudo element with the same behaviour would be needed.

I hadn't considered this approach (scope based on declarative :root). I'll give it some thought. The style element is still on the page, though. (Sorry if I am confused as a result of our 140-char conversation: http://twitter.com/jaffathecake/status/126934244093206529 :) ).

I'm not against allowing style & link elements in the body, having style elements in the body isn't optimal though (because of the combining & minification thing).

What I've tried to show above is there's no point having a scoped attribute on style elements, the problem should be solved in the CSS rather than the HTML.

If the scoping was handled in the CSS, I could put them in the body for landmarking and discovery, but a build script could combine all the stylesheets and put them in the head of the document.

My problem with the scoped attribute is it seems redundant compared to selector nesting.

cool. Since the :root method achieves effectively the same thing as scoped, I'd be very happy to put my vote on it (or something similar that's back-compat). thx for gisting this! -- J