Scoped Stylesheet -vs- CSS Hierarchies

Status of scoped stylesheets

Since their initial introduction, Scoped Stylesheets did not gain much traction among Web developpers. The most important problem of scoped stylesheets is that they have a big compatibility issue: they are honored as global stylesheets in browsers that don't support them, and that virtuallly includes all of them at this time.

Another problem is that they tend to promote a bad design pattern in which formatting is nested inside semantic content. While inline formatting is not to reject for small, one-shot style adjustements, using the <style> tag (and even the style attribute) in production has become less and less mainstream over time.

My call to action would be to remove the scoped stylesheet from the HTML5 specification and rely on new CSS proposals like CSS Hierarchies to provide similar features.

We can do better

Based on the fact the objective of scoped stylesheets is to apply 'local' styling, I think it's probably a better solution to extend the style attribute to accept new input, namely anything that can be found in a regular CSS rule, including concepts introduced by CSS Hierarchies.

CSS Hierarchies in action

a.hiddenLink {
    color: inherit; text-decoration: none;
    &:hover {
        color: blue; text-decoration: underline;

article {
    padding: 20px;
    & h1 { margin-top: 0.5px; }

In the style attribute

<a class="hiddenLink" style="color: blue; &:hover { color: red; }">
    I'm a link who doesn't follow the traditionnal look and feel of links in the site.

<article style="& h1 { margin-top: 0px; }">...</article>

Why is it better?

This is better for many reasons:

1] Browsers that don't support CSS Hierarchies in the style tag will properly ignore the new style declaration (beside IE6 which has a bug in the way he parse the style tag).

2] Because developers tend to avoid multiline style attributes, this prevents them to have them write long local stylesheets that are contrary to the "Styling and content independance" design pattern, while giving the possibility to do so when they are requied (AJAX loading, ...).

3] It keeps the symmetry between the style attribute and the CSS rule syntaxes. Indeed, if we're going to make it possible to write nested sub-rules inside traditionnal CSS rules, there'll be pressure to enable them in the style attribute as well, and it would be logical to do so. If we do that, there'll be no need for scoped stylesheets anymore.

4] This removes the problem of @fontface / @keyframe rules that are implemented globally by browsers and can't be used properly in a scoped stylesheet. Because you can't use them as nested rules inside a CSS rule, you'll not be able to use them in a scoped style attribute either.

Call to action

1] Remove the scoped attribute from the HTML5 specification and recommands support of CSS Hierarchies instead.

2] Modify the CSS Style Attribute specification to introduce a new cascade level between "document" and "!important" that would host rules defined by the style attribute.

3] If you agree with me but can't do any of the above, maybe could you just spread the word using social media, maybe you'll end up by reaching someone else who can ;-)

François REMY

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Publié 07 mars 12 03:01 par FREMYCOMPANY
Classé sous : , ,


Pas de commentaires
Les commentaires anonymes sont désactivés


François REMY est un jeune développeur belge plein d'entrain qui traite surtout des technologies du web et de DotNet dans ses articles.

Les 10 derniers blogs postés

- Office 365: La gestion des Attachments dans les listes riches de SharePoint Online par Blog Technique de Romelard Fabrice le 01-10-2017, 17:56

- [IIS] On désactive le recyclage des pools, ou on le contrôle ? par Blog de Jérémy Jeanson le 01-06-2017, 20:48

- Bon Visual Studio 2017 ! par Blog de Jérémy Jeanson le 01-06-2017, 12:53

- Office 365: Message d’erreur sur SharePoint Online “The file [file name] is checked out or locked for editing by [username]” par Blog Technique de Romelard Fabrice le 01-05-2017, 16:02

- Office 365 : Script PowerShell pour créer le mapping des utilisateurs dans ShareGate à partir de SharePoint 2007 par Blog Technique de Romelard Fabrice le 12-29-2016, 15:36

- Regroupez vos sections javascript ! par Blog de Jérémy Jeanson le 12-29-2016, 13:02

- Retour en arrière sur Windows Server Core 2016 par Blog de Jérémy Jeanson le 12-20-2016, 13:07

- SharePoint 2007: Script PowerShell pour nettoyer les listes vides avant migration vers Office 365 - Updated par Blog Technique de Romelard Fabrice le 12-14-2016, 16:34

- Server Essentials 2016 et site remote web access indisponible par Blog de Jérémy Jeanson le 12-09-2016, 13:10

- Office 365: Utiliser les alertes dans SharePoint Online par Blog Technique de Romelard Fabrice le 11-30-2016, 12:45



Ce blog