Scoped style attribute is a new way of defining CSS styles for smaller section of website. Read this article by David Walsh to know how it works.
With respect to the rising popularity of frontend frameworks like ReactJS, Polymer etc, I think scoped style attribute, if it gets matured and adopted well by modern browsers, will give us a way to manage and write CSS properly in such applications. What's your opinion on this?
Robert van der Elst
Front End Designer
So far I didn't know about it. Thanks for sharing.
At this time, I am a big fan of Radium stack.formidable.com/radium - yet still hoping for Shadow DOM github.com/Wildhoney/ReactShadow to be the future.
'style scoped' might introduce a new level of irritations because the selectors aren't expressive anymore.
But will keeping an eye on it. If it helps to write and maintain independent components, it will be adopted and used.
While it's another way of getting the job done, this should be used sparingly due to the fact it could get out of hand quickly if abused. It is a great alternative when small amounts of CSS are needed seeing as how Google recommends using small inline styles to aid in page loads anyway.
So to recap the story, you can now take your inline style, and place it inside a style block inside your element instead of using inline styles.
Although I think it looks much better than inline styles, it's probably only useful for packaged web components.
I'm not so sure what this is trying to solve to be honest. I mean, in the example of David Walsh, you could just add a class to either div and be done, so why put inline styling (within a style element I mean) to get the same result?
Are there usecases for this?
What I can imagine though is that you can set the scope based on an internal anchor within the CSS, something like this (warning: pseudo code and weird attributes ;) )
That way you can relate the used styles to a part of the stylesheet.
In that stylesheet you could have something like this (again: pseudo code):
Anyway, just my brainfart for this morning ;)