Share
«Modules CSS» n’a rien à voir avec le W3C, mais fait plutôt partie d’un processus de construction suggéré. Il compile votre projet en renommant les sélecteurs et les classes afin qu’ils deviennent uniques et qu’ils soient étendus à des composants individuels. Les styles sont verrouillés dans ces composants et ne peuvent être utilisés ailleurs que si vous le spécifiez!
De nos jours, nous sommes assez habitués à l'idée que les technologies Web constituent le moteur des applications. applications Web, applications mobiles et de bureau. Mais contrairement aux sites Web statiques simples, les applications sont généralement plus dynamiques, complexes et se composent souvent de composants allant même au-delà de ce que propose Bootstrap ou ZURB Foundation. Tandis qu'une application devient de plus en plus complexe, la gestion de son code CSS peut s'avérer une tâche ardue..
Au fil du temps, une myriade de stratégies ont été développées, telles que OOCSS, ITCSS, BEM, CSS atomique, etc. pour garder le CSS organisé, réutilisable et (de manière cruciale) évolutif. Ces stratégies exigent que vous et tous les membres de votre équipe respectiez les conventions avec diligence..
Cependant, tôt ou tard, la complexité se rétablira et vous rencontrerez des règles de style telles que celles-ci:
html.progressive-image.js [image-progressive-image], html.progressive-image.js [image-progressive-image] * background-image: none! important; masque-image: aucun! important; opacité: 0 .main # section-enhanced-gallery-heroes.homepage-section.enhanced-gallery .with-single-item transformer: traduire (0, 0)! important
Le problème avec CSS sur de nombreux sites Web et applications à grande échelle est qu’il est si difficile de limiter la spécificité qu’à un moment donné, en ajoutant !important ne peut être évité. Et refactoriser CSS sur une base de code volumineuse est délicat car la suppression de styles risquerait de casser d'autres composants.
Dans ce tutoriel, nous allons examiner les «Modules CSS» et comment cela peut nous aider à minimiser ces problèmes CSS notoires..
Remarque: consultez le dépôt sur Github pour obtenir des exemples de code.
En un mot, «CSS Modules» est un outil qui renomme les classes et les identifiants CSS en sélecteurs uniques, ce qui lui permet d’isoler les règles de style localement aux éléments ou composants attribués. En supposant que nous ayons un bouton, nous pourrions normalement écrire ses règles de style comme suit:
.button background-color: # 9b4dca; bordure: solide 0.1r # 9b4dca; border-radius: .4rem; couleur: #fff; curseur: pointeur; affichage: inline-block; .button: focus, .button: survoler background-color: # 606c76; couleur de bordure: # 606c76; couleur: #fff; contour: 0;
Avec les modules CSS, ces règles de style seront renommées comme suit:
._12We30_button background-color: # 9b4dca; bordure: solide 0.1r # 9b4dca; border-radius: .4rem; couleur: #fff; curseur: pointeur; affichage: inline-block; ._12We30_button: focus, ._12We30_button: hover background-color: # 606c76; couleur de bordure: # 606c76; couleur: #fff; contour: 0;
Si vous jetez un coup d'œil sur de grands sites tels que Facebook, Instagram ou Airbnb via les outils DevTools de votre navigateur, vous constaterez que les classes et les identifiants CSS sont nommés avec ce type de modèle. Voici un exemple de la page d'accueil Airbnb:
Qui a nommé la classe avec des nombres apparemment aléatoires?Utiliser des modules CSS n’aura pas de sens si nous n’avions qu’un seul composant. Développons donc notre exemple en trois composants et voyons comment configurer notre projet pour implémenter des modules CSS..
Dans ce deuxième exemple, nous allons construire trois composants; un bouton avec trois styles différents. Nous les appellerons le «bouton principal», le «bouton de contour» (également appelé «bouton fantôme») et le «bouton d'effacement». Nous allons mettre ces boutons dans un répertoire séparé. Chaque répertoire contiendra index.css et index.js.
dans le index.js, nous créons l'élément et assignons les classes à l'élément, comme suit:
// 1. Importez les styles du fichier index.css. importer les styles de './index.css'; / ** * 2. Créer un élément de bouton et ajouter la classe à partir d'index.css. * @type String * / const button = ''; // 3. Exportez le bouton à utiliser dans les autres fichiers. bouton d'exportation par défaut;
Utiliser le nouveau importation Dans la directive ES6, nous importons la feuille de style et lisons les classes et les ID en tant qu’objet JavaScript. Ensuite, nous créons un élément et ajoutons la classe nommée .bouton using JavaScript JavaScript Templating qui a également été introduit dans ES6. Enfin, nous exportons notre élément pour qu'il puisse également être importé et réutilisé dans les autres fichiers JavaScript..
Au moment d'écrire ces lignes, tous les navigateurs n'avaient pas implémenté les dernières fonctionnalités et syntaxe JavaScript de la spécification ES6. Nous aurons donc besoin de Babel pour transformer ces extraits en syntaxe JavaScript compatible avec la plupart des navigateurs..
Notre feuille de style, index.css, est simple CSS. Il contient un certain nombre de sélecteurs pour styler l'élément de bouton.
/ * 1. Bouton principal * / .button background-color: # 9b4dca; bordure: solide 0.1r # 9b4dca; border-radius: .4rem; couleur: #fff; curseur: pointeur; affichage: inline-block; taille de la police: 1.1rem; poids de police: 700; hauteur: 3.8rem; espacement des lettres: .1rem; hauteur de ligne: 3.8rem; remplissage: 0 3.0rem; text-align: center; texte-décoration: aucun; text-transform: majuscule; espace blanc: maintenant; / * Plus de styles du bouton primaire ici * /
L'un des avantages de l'utilisation des modules CSS est que nous n'avons pas à nous soucier des conventions de dénomination. Vous pouvez toujours utiliser vos méthodologies CSS préférées telles que BEM ou OOCSS, mais rien n'est imposé. vous pouvez écrire les règles de style de la manière la plus pratique pour le composant car le nom de la classe sera éventuellement nompace.
Dans cet exemple, nous nommons toutes les classes de notre composant button. .bouton au lieu de .bouton-primaire ou .contour du bouton.
Travailler avec CSS dans Shadow DOM J'ai toujours la vieille habitude d'utiliser la notation BEM même si je n'ai pas * besoin * de le faire. Encapsulation de style FTW!
- Razvan Caliman (@razvancaliman) 31 juillet 2017
Quand on charge le index.js sur une page HTML, rien n’apparaîtra dans le navigateur. Dans ce cas, nous devrons compiler le code pour le rendre fonctionnel. Nous devrons installer Babel, Babel Preset pour ES2015 (ES6) et Webpack, ainsi que les "chargeurs" suivants pour permettre à Webpack de traiter nos fichiers source..
Accentsconagua
.js fichiers et transformer le code source avec le module de base de Babel..css des dossiers.css-loader dans notre page HTML en utilisant le Dans Vue, nous ajoutons le module attribuer à la style comme indiqué ci-dessus, pour activer les modules CSS. Lorsque nous compilerons ce code, nous obtiendrons à peu près le même résultat.
Emballer
Pour certains d'entre vous, ce sera quelque chose de complètement nouveau. Il est parfaitement compréhensible que le concept de modules CSS soit un peu décoiffant au premier abord. Alors récapitulons ce que nous avons appris sur les modules CSS dans cet article.
- «Modules CSS» permet d’encapsuler les règles de styles en renommant ou en renommant
nom d'espacement les noms de classe, minimisant les conflits sur la spécificité de sélecteur à mesure que le code grandit. - Cela nous permet également d’écrire les noms de classe plus facilement plutôt que de nous en tenir à une méthodologie particulière..
- Enfin, les règles de style étant couplées à chaque composant, les styles seront également supprimés lorsque nous n'utilisons plus le composant..
Dans cet article, nous avons à peine effleuré la surface des modules CSS et des autres outils modernes de développement Web tels que Babel, Webpack et Vue. Donc, ici, j'ai mis en place quelques références pour examiner ces outils plus loin.
Référence supplémentaire
- Découvrez la démo sur Github
- Commencez à coder ES6 avec Babel: Tuts + Course
- Commencer avec Vue: Tuts + Course
- Instant Webpack 2: Tuts + Course
- Stratégies pour maintenir la spécificité CSS faible
- Daniel Eden: Bougez lentement et corrigez les choses
