qu'est-ce que le module CSS

Le module CSS est un fichier CSS dans lequel tous les noms de classe n'ont qu'une portée locale, c'est-à-dire que la portée de tous les noms de classe et noms d'animation dans le fichier CSS est par défaut la portée actuelle. Les modules CSS limitent la portée aux composants, évitant ainsi le problème de la portée globale.

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

Le module CSS est :

Fichiers CSS dans lesquels tous les noms de classe et les noms d'animation sont définis localement par défaut sur la portée actuelle.

Le module CSS est un fichier CSS dans lequel tous les noms de classes ont une portée locale.

Les modules CSS ne sont donc pas une spécification ou une implémentation officielle dans les navigateurs, mais une modification (avec l'aide de Webpack ou Browserify) de la portée des noms de classe et des sélecteurs selon le processus de construction du fichier actuel (similaire aux espaces de noms).

À quoi cela ressemble-t-il et pourquoi ? Nous verrons cela dans un instant. Tout d’abord, rappelez-vous comment fonctionnent HTML et CSS en général. Un nom de classe est appliqué au HTML :

<h1 id="An-nbsp-example-nbsp-heading">An example heading</h1>

Définir cette classe en CSS :

.title {  
    background-color: red;  
}

Une fois ce CSS appliqué à ce document HTML, la couleur de fond du h1 auquel cette classe est appliquée passera au rouge. Nous n'avons pas besoin de gérer CSS ou HTML. Les navigateurs comprennent le format de ces fichiers.

Les modules CSS adoptent une approche différente. Contrairement à l'écriture de HTML brut, nous devons écrire notre balisage dans un fichier JavaScript, tel que index.js. Voici un exemple de la façon dont cela fonctionnerait (nous prendrons un exemple plus pratique plus tard) :

import styles from  "./styles.css"; 
element.innerHTML = 
    `<h1 class="${styles.title}"> 
        An example heading 
    </h1>`;

Au cours de notre processus de construction, le compilateur examinera le fichier styles.css que nous avons importé, puis notre fichier JavaScript, appliquera le . classe de titre via styles.title. Notre processus de construction les traitera ensuite dans un nouveau fichier HTML et CSS séparé, remplaçant l'attribut HTML Class et la classe de sélecteur CSS par une nouvelle chaîne.

Le fichier HTML généré peut ressembler à ceci :

<h1 class="_styles__title_309571057">
    An example heading 
</h1>

Le fichier CSS généré peut ressembler à ceci :

._styles__title_309571057 { 
    background-color: red; 
}

Les anciens attributs de classe et le sélecteur .title n'existent plus du tout, remplacés par une toute nouvelle chaîne. Notre CSS précédent n'est plus du tout fourni au navigateur.

Pourquoi devrions-nous utiliser des modules CSS ?

Utilisez les modules CSS, cela garantira que tous les styles sont appliqués à un seul composant :

au même endroit
appliqués uniquement à ce composant et à rien d'autre
De plus, n'importe quel composant peut avoir un De vraies dépendances, comme

import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.red}  ${padding.large}">`;

Le but de cette approche est de résoudre le problème de portée globale en CSS

Avez-vous déjà essayé d'écrire un code simple le plus rapidement possible dans une situation de manque de temps et de ressources ? CSS sans considérer son impact sur d’autres situations ?

Avez-vous déjà laissé quelques mauvais éléments au bas de votre feuille de style et avez-vous essayé de les organiser, mais vous n'y êtes jamais parvenu ?

Avez-vous déjà rencontré un style dont vous n'étiez pas entièrement sûr de ce qu'il faisait ou s'il avait été utilisé ?

Avez-vous déjà pensé que vous pouviez supprimer certains styles sans en casser d'autres ? Vous vous demandez si ce style dépend de vous ou des autres ? Ou remplacer le style ailleurs ?

Ces questions peuvent vous donner des maux de tête, prolonger les délais des projets et vous faire regarder par la fenêtre avec tristesse et envie.

Grâce aux modules CSS et au concept de portée actuelle par défaut, ces problèmes seront évités. Lorsque vous écrivez un style, vous devez penser au résultat final du style.

Par exemple, si vous utilisez random-gross-class en HTML sans l'appliquer comme classe de style de module CSS, le style ne sera pas appliqué car le sélecteur CSS sera converti en ._style_random-gross-class_0038089 .

(Apprentissage partage vidéo :

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!