This week folks I'm going to talk about Scoped CSS. Yeah I've never heard of it before either, well until very recently at least.
Scope is a new attribute in HTML5 that allows you to override styles for a particular child element by declaring some inline styles. So basically this mean the style block with the scoped attribute will overwrite the global styles generally found in the head (whether in a style block or linked stylesheet), but only on the sibling/descendent elements inside the same parent.
If you're still not sure look at the example code below with the outcome to see it in action.
and this is what it should look like...
So what is the point or benefit hear you moan. Well;
- It may be desirable to keep the CSS of a particular interactive element together with the HTML. If the element in question is unique on the site (like a complex slider for example), there is no advantage to caching it with global styles.
- Keeping the CSS with the HTML for organization may have value however.
- When working with a team it can be a great way to allow for simultaneous development of various areas of the site without worrying about the state of the global CSS - I can see this as a short term solution.
- If your article is getting aggregated by another site it's possible to customize styles on another website that would otherwise be beyond the reach of your global stylesheet.
- If you enable tags in the comment section of your site you can give your readers the ability to style their... nevermind this is probably a terrible idea.
- For use in widgets on third-party sites where the CSS is unknown and the in-widget styles shouldn't affect anywhere else. Although being able to reset the styles within the widget is the other half of that battle.
- Finally (and most exciting to me), Scoped CSS is ideal for working within Content Management Systems where you have much less flexibility for adding unique markup to common templated areas, or no access to the existing stylesheets.