Réponse détaillée à la différence entre le CSS étendu et le module CSS dans la portée CSS

Cet article vous apporte des connaissances pertinentes sur la différence entre le CSS étendu et le module CSS. Les deux CSS étendus et le module CSS sont utilisés pour contrôler la portée locale du CSS et éviter des problèmes tels que la duplication des noms de classe. Alors, quelle est la différence entre les deux. ? J'espère que cela aide tout le monde.

Avant-propos

scoped CSS et module CSS sont conçus pour contrôler la portée locale du CSS et éviter des problèmes tels que la duplication des noms de classe. Alors quelle est la différence entre les deux ?

1. module css

1.1. Explication
Régénère les noms de classe pour tous les noms de classe, évitant efficacement les problèmes de poids CSS et de duplication des noms de classe. Le module css remplace directement le nom de la classe, éliminant la possibilité pour l'utilisateur de définir le nom de la classe pour affecter le style du composant, il n'est donc pas nécessaire de se creuser la tête pour nommer.
1.2 Principe de mise en œuvre
En ajoutant un suffixe de chaîne de hachage au nom du style, le style compilé dans un contexte de portée spécifique peut être globalement unique.
1.3 Utilisation

• Dans le fichier webpack.base.conf.js, transmettez modules: true à css-loader pour activer le module CSS. localIdentName est la règle de dénomination pour définir le style généré.

//webpack.base.conf.jsmodule: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }

• Ajoutez l'attribut de module dans la balise < style >

<style module>.red {
  color: red;}.bold {
  font-weight: bold;}</style>

• Utilisez-le dans le modèle vue via une liaison de classe dynamique

<template>
  <p :class="$style.red">
    This should be red  </p></template><template>
  <p>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold    </p>
  </p></template>

• Utilisez-le dans js

<script>export default {
  created () {
    console.log(this.$style.red)
    // -> "red_1VyoJ-uZ"
    // 一个基于文件名和类名生成的标识符
  }}</script>

1.4 effet d'utilisation

<template>
 <p :class="$style.gray">
 Im gray </p></template><style module>.gray {
 color: gray;}</style>

Résultat compilé :

//编译结果<p class="gray_3FI3s6uz">Im gray</p>.gray_3FI3s6uz {
 color: gray;}

1.5 Notes

• Lors du traitement des images clés de l'animation, le nom de l'animation doit être écrit en premier. Par exemple, si animation : deni .5s, elle se compilera normalement ; si animation : .5s deni, elle se compilera anormalement. Pensez à configurer css-loader, sinon cela ne prendra pas effet.
• Si vous utilisez style-loader, vous devez le configurer et le modifier en vue-style-loader pour qu'il prenne effet.
• Comment les modules CSS résolvent-ils le problème du poids ?
Permet d'encapsuler les règles de style en renommant ou en espace de noms, réduisant ainsi les contraintes sur les sélecteurs, afin que les noms de classe puissent être utilisés confortablement sans avoir besoin de méthodes spécifiques.
• Lorsque des règles de style sont couplées à chaque composant, les styles sont également supprimés lorsque le composant n'est plus utilisé.
  
  
2. Scoped

2.1 Principe de mise en œuvre

Vue ajoute des balises uniques et non répétitives à la structure DOM et au style CSS pour garantir l'unicité et atteindre l'objectif de privatisation et de modularisation du style. Il est impossible d'éviter complètement le problème de la duplication du poids CSS et du nom de classe.
2.2 Comment utiliser
Ajoutez l'attribut scoped
dans la balise < style > Si l'utilisateur définit la même chose ailleurs Le nom de la classe peut toujours affecter le style du composant.
Selon les caractéristiques de la priorité du style CSS, le traitement de scoped augmentera le poids de chaque style. Référence aux composants qui utilisent scoped En tant que sous-composant, il devient difficile de modifier le style du sous-composant, et vous devrez peut-être l'utiliser en dernier recours ! important

scoped ralentira le rendu du sélecteur de balises à plusieurs reprises. Lors de l'utilisation de sélecteurs de balises, scoped réduira considérablement les performances, mais l'utilisation de class ou d'id ne le fera pas

3. RésuméLe module CSS est en fait plus efficace que scoped Bon, et La configuration du module CSS n'est pas difficile, je recommande donc le module CSS.

(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!