que sont les modules CSS

Les modules CSS ne sont pas une spécification officielle, ni un mécanisme de navigateur, mais un moyen de définir la portée des noms de classes CSS et des sélecteurs pendant l'étape de construction (similaire aux espaces de noms). À l'aide d'outils de construction, les noms de classe ou les noms de sélecteurs peuvent être étendus.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

Que sont les modules CSS

Selon le projet CSS Modules sur Gihub, il est interprété comme :

Tous les noms de classe et les noms d'animation ont leurs propres fichiers CSS étendus par défaut.

Les modules CSS ne sont donc pas une spécification officielle, ni un mécanisme de navigateur, mais une portée pour les noms de classes CSS et les sélecteurs pendant l'étape de construction (comme l'utilisation de Webpack ou Browserify). à l'espace de noms).

Avantages des modules CSS

Résoudre les conflits de noms globaux les modules CSS ne se soucient que de la dénomination unique des composants eux-mêmes

La modularisation peut être introduite dans son propres modules en utilisant compose Le style et le style d'un autre module

Pour résoudre le problème d'un niveau d'imbrication trop profond, utilisez des noms de classe plats

Pourquoi introduire des modules CSS ?

1), conflit de style global

Lorsque les packages webpack, tous les fichiers js sont importés dans le fichier d'entrée App.js, et les styles sont également chargés uniformément dans l'entrée. Selon les règles de mise en page de CSS, les styles ultérieurs écraseront les déclarations de style précédentes, provoquant un problème de couverture de style global.

2) Sélecteurs avec des niveaux d'imbrication trop profonds

Problèmes causés par une imbrication particulièrement profonde :

- Selon le sélecteur css On peut le savoir depuis les règles d'analyse selon lesquelles plus le niveau est profond, plus le nombre de comparaisons est élevé, ce qui affecte le rendu de la page entière

- ajoute une surcharge d'octets inutile

- confusion sémantique et mauvaise évolutivité Eh bien, le plus de contraintes, plus l'évolutivité est mauvaise

3), les variables ne peuvent pas être partagées

Les composants complexes doivent utiliser js et css pour gérer conjointement les styles.

Partage de vidéos d'apprentissage : tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!