Tech

Le temps passe

Les sélecteurs CSS existent tous dans la même portée globale. Quiconque a travaillé suffisamment longtemps avec les feuilles de style CSS a dû s'accommoder de leur nature agressivement globale - un modèle clairement conçu à l'ère des documents, qui peine aujourd'hui à offrir un environnement de travail sain pour les applications web modernes d'aujourd'hui. Chaque sélecteur peut avoir des effets secondaires involontaires en ciblant des éléments non désirés ou en entrant en conflit avec d'autres sélecteurs. Plus surprenant encore, nos sélecteurs peuvent même perdre dans la guerre de la spécificité globale, n'ayant finalement que peu ou pas d'effet du tout sur la page.

Chaque fois que nous apportons une modification à un fichier CSS, nous devons soigneusement prendre en compte l'environnement global dans lequel nos styles s'inscriront. Aucune autre technologie frontale n'exige autant de discipline pour maintenir le code à un niveau minimum de maintenabilité. Mais il n'est pas nécessaire qu'il en soit ainsi. Il est temps de laisser derrière nous l'ère des feuilles de style globales.

C'est l'heure du CSS local.

Dans d'autres langues, il est admis que la modification de l'environnement mondial est une chose à faire rarement, voire jamais.

Dans la communauté JavaScript, grâce à des outils comme Browserify, Webpack et JSPM, on s'attend désormais à ce que notre code soit constitué de petits modules, chacun encapsulant ses dépendances explicites et exportant une API minimale.

Pourtant, d'une manière ou d'une autre, le CSS semble toujours bénéficier d'un laissez-passer.

Beaucoup d'entre nous - moi y compris, jusqu'à récemment - travaillent avec CSS depuis si longtemps qu'ils ne considèrent pas le manque de portée locale comme un problème que nous pouvons résoudre sans une aide significative de la part des éditeurs de navigateurs. Même dans ce cas, nous devrions attendre que la majorité de nos utilisateurs se servent d'un navigateur supportant correctement le Shadow DOM.

Nous avons contourné les problèmes liés à la portée globale en adoptant une série de conventions de dénomination telles que OOCSS, SMACSS, BEM et SUITchacun nous permettant d'éviter les collisions de noms et d'émuler des règles de cadrage saines.

Nous n'avons plus besoin d'ajouter de longs préfixes à tous nos sélecteurs pour simuler le scoping. Davantage de composants pourraient définir leurs propres identifiants foo et bar, ce qui, contrairement au modèle de sélecteur global traditionnel, n'entraînerait aucune collision de noms.

l'importation styles de './MyComponent.css' ;
l'importation React, { Component } de réagir" ;
exporter la classe par défaut MonComposant s'étend Composant {
 rendre() {
    retourner (
      <div>
        <divstyles.foo}>Foo</div>
        <divstyles.bar}>Barre</div>
      </div>
    );
  }

Les avantages du CSS global - réutilisation du style entre les composants par le biais de classes utilitaires, etc.- sont toujours possibles avec ce modèle. La principale différence est que, tout comme lorsque nous travaillons avec d'autres technologies, nous devons importer explicitement les classes dont nous dépendons. Notre code ne peut pas faire beaucoup d'hypothèses, voire aucune, sur l'environnement global.

L'écriture de feuilles de style CSS faciles à maintenir est désormais encouragée, non pas par des le respect scrupuleux d'une convention de dénominationmais par l'encapsulation du style pendant le développement.

Une fois que vous avez essayé de travailler avec des feuilles de style CSS locales, vous ne pouvez plus revenir en arrière. Faire l'expérience d'une véritable portée locale dans nos feuilles de style - d'une manière qui fonctionne dans tous les navigateurs - n'est pas quelque chose que l'on peut facilement ignorer.

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 paquets séparés sont tous directement affectés par ce changement, et nous ne sommes qu'au début de cette nouvelle ère du CSS local.

process.env.NODE_ENV === 'development' ?
    '[name]__[local]___[hash:base64:5]' :
    '[hash:base64:5]".
)

Nous sommes encore en train de travailler sur les ramifications de ce changement. Grâce à vos précieuses contributions et à vos expériences, j'espère que nous pourrons en discuter ensemble au sein d'une communauté élargie.

Remarque : l'optimisation automatique de la réutilisation du style entre les composants serait une avancée extraordinaire, mais elle nécessite certainement l'aide de personnes beaucoup plus intelligentes que moi.

par l'administration