Les sélecteurs CSS existent tous dans la même portée globale. Toute personne qui a travaillé avec CSS assez longtemps a dû se rendre compte de sa nature agressive à l’échelle mondiale-un modèle clairement conçu à l’ère des documents, qui luttent maintenant pour offrir un environnement de travail sain pour les applications Web modernes d’aujourd’hui. Chaque sélecteur a le potentiel d’avoir des effets secondaires involontaires en ciblant les éléments indésirables ou en s’affrontant avec d’autres sélecteurs. Plus surprenant encore, nos sélecteurs peuvent même perdre dans la guerre de spécificité globale, ayant finalement peu ou pas d’effet sur la page du tout.

Chaque fois que nous faisons une modification à un fichier CSS, nous devons examiner attentivement l’environnement global dans lequel nos styles seront assis. Aucune autre technologie frontale n’exige tant de discipline juste pour garder le code à un niveau minimum de maintenabilité. Mais ça n’a pas à être comme ça. Il est temps de quitter l’ère des feuilles de style global derrière.

Il est temps pour CSS locale.

Dans d’autres langues, il est admis que la modification de l’environnement global est quelque chose à faire rarement, si jamais.

Dans la communauté JavaScript, grâce à des outils comme Browserify, WebPack et JSPM, il est maintenant prévu que notre code sera composé de petits modules, chacun encapsulant leurs dépendances explicites, l’exportation d’une API minimale.

Pourtant, d’une certaine manière, CSS semble toujours être obtenir un laissez-passer.

Beaucoup d’entre nous-moi-même inclus, jusqu’à récemment-ont travaillé avec CSS si longtemps que nous ne voyons pas le manque de portée locale comme un problème que nous pouvons résoudre sans l’aide significative des vendeurs de navigateurs. Même alors, nous aurions encore besoin d’attendre que la majorité de nos utilisateurs utilisent un navigateur avec le support Shadow DOM approprié.

Nous avons travaillé sur les questions de portée mondiale avec une série de conventions de dénomination comme OOCSS, smacss, BEM et costume, chacun fournissant un moyen pour nous d’éviter les collisions de noms et émuler les règles de portée saine.

Nous n’avons plus besoin d’ajouter de longs préfixes à tous nos sélecteurs pour simuler la portée. D’autres composants pourraient définir leurs propres identificateurs foo et bar qui, contrairement au modèle de sélecteur global traditionnel, ne produirait aucune collision de dénomination.

import styles from './MyComponent.css';
import React, { Component } from 'react';
export default class MyComponent extends Component {
 render() {
    return (
      <div>
        <div className={styles.foo}>Foo</div>
        <div className={styles.bar}>Bar</div>
      </div>
    );
  }

Les avantages du CSS global — réutilisation de style entre les composants via des classes utilitaires, etc. — sont encore réalisables avec ce modèle. La principale différence est que, tout comme lorsque nous travaillons dans d’autres technologies, nous devons importer explicitement les classes sur lesquelles nous dépendons. Notre code ne peut pas faire beaucoup, le cas échéant, des hypothèses sur l’environnement global.

L’écriture de CSS maintenable est maintenant encouragée, non pas par une adhésion attentive à une convention d’appellation, mais par l’encapsulation de style pendant le développement.

Une fois que vous avez essayé de travailler avec CSS locale, il n’y a vraiment pas de retour. L’expérience d’une véritable portée locale dans nos feuilles de style — d’une manière qui fonctionne sur tous les navigateurs — n’est pas quelque chose à être facilement ignoré.

L’introduction de la portée locale a eu un effet d’entraînement significatif sur la façon dont nous abordons notre CSS. Les conventions d’appellation, les modèles de réutilisation et l’extraction potentielle des styles dans des packages distincts sont tous directement touchés par ce changement, et nous ne sommes qu’au début de cette nouvelle ère de CSS locale.

Process. env. NODE_ENV = = = 'developpement'? 
    ' [nom] _ _ [local] [Hash: base64:5]':
    '[Hash: base64:5] '
)

Comprendre les ramifications de ce changement est quelque chose que nous travaillons encore. Avec votre précieuse contribution et l’expérimentation, j’espère que c’est une conversation que nous pouvons avoir ensemble comme une communauté plus large.

Remarque: l’optimisation automatique du style de réutilisation entre les composants serait un pas en avant étonnant, mais il exige certainement l’aide des gens beaucoup plus intelligents que moi.