Ausführliche Antwort auf den Unterschied zwischen CSS mit Gültigkeitsbereich und CSS-Modul im CSS-Bereich

Dieser Artikel vermittelt Ihnen relevante Kenntnisse über den Unterschied zwischen bereichsbezogenem CSS und CSS-Modul, um den lokalen Bereich von CSS zu steuern und Probleme wie die Duplizierung von Klassennamen zu verhindern ? Ich hoffe, es hilft allen.

Vorwort

scoped CSS und CSS-Module dienen dazu, den lokalen Geltungsbereich von CSS zu steuern und Probleme wie die Duplizierung von Klassennamen zu verhindern. Was ist also der Unterschied zwischen den beiden?

1. CSS-Modul

1.1. Erklärung
Erzeugt Klassennamen für alle Klassennamen neu und vermeidet so effektiv die Probleme der CSS-Gewicht und Duplizierung von Klassennamen. Das CSS-Modul ersetzt direkt den Klassennamen, wodurch die Möglichkeit ausgeschlossen wird, dass der Benutzer den Klassennamen so festlegt, dass er den Komponentenstil beeinflusst, sodass Sie sich nicht den Kopf über die Benennung zerbrechen müssen.
1.2 Implementierungsprinzip
Durch Hinzufügen eines Hash-String-Suffixes zum Stilnamen kann der kompilierte Stil in einem bestimmten Bereichskontext global eindeutig sein.
1.3 Verwendung

• In der Datei webpack.base.conf.js übergeben Sie „modules: true“ an den CSS-Loader, um das CSS-Modul zu aktivieren. localIdentName ist die Benennungsregel zum Festlegen des generierten Stils. ?? 4 Nutzungseffekt

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

Kompiliertes Ergebnis:

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

1,5 Hinweise

Bei der Verarbeitung der Keyframes der Animationsanimation muss zuerst der Animationsname geschrieben werden. Wenn beispielsweise die Animation: deni .5s ist, wird sie normal kompiliert; wenn die Animation: .5s deni ist, wird sie abnormal kompiliert. Denken Sie daran, den CSS-Loader zu konfigurieren, da er sonst nicht wirksam wird.

• Wenn Sie den Style-Loader verwenden, müssen Sie ihn konfigurieren und in den Vue-Style-Loader ändern, damit er wirksam wird.

Wie lösen CSS-Module das Gewichtsproblem?

Ermöglicht die Kapselung von Stilregeln durch Umbenennung oder Namespace, wodurch Einschränkungen für Selektoren reduziert werden, sodass Klassennamen bequem verwendet werden können, ohne dass bestimmte Methoden erforderlich sind. Wenn Stilregeln an jede Komponente gekoppelt sind, werden die Stile auch entfernt, wenn die Komponente nicht mehr verwendet wird.

2. Scoped

2.1 Implementierungsprinzip

Vue fügt der DOM-Struktur und dem CSS-Stil eindeutige und sich nicht wiederholende Tags hinzu, um Einzigartigkeit sicherzustellen und den Zweck der Privatisierung und Modularisierung des Stils zu erreichen. Es ist unmöglich, das Problem der CSS-Gewichts- und Klassennamenduplizierung vollständig zu vermeiden.

• 2.2 Verwendung
• Fügen Sie das Attribut
scoped
• im Tag < style > hinzu
• 2.3 Verwendungseffekt
  
  

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

Kompiliertes Ergebnis:

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

Wenn der Benutzer dasselbe definiert an anderer Stelle Der Klassenname kann sich immer noch auf den Stil der Komponente auswirken.
Entsprechend den Merkmalen der CSS-Stilpriorität erhöht die Verarbeitung von Scoped das Gewicht jedes Stils, der auf Komponenten verweist, die Scoped verwenden. Als Unterkomponente wird es schwierig, den Stil der Unterkomponente zu ändern Möglicherweise müssen Sie es als letzten Ausweg verwenden! wichtig
scoped verlangsamt das Rendern von Tag-Selektoren um ein Vielfaches. Wenn Sie Tag-Selektoren verwenden, verringert sich die Leistung erheblich, bei der Verwendung von Klasse oder ID jedoch nicht. 3. Zusammenfassung: Das CSS-Modul ist tatsächlich effektiver als das Scoped-Modul. Gut, und Die Konfiguration des CSS-Moduls ist nicht schwierig, daher empfehle ich das CSS-Modul.
(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonAusführliche Antwort auf den Unterschied zwischen CSS mit Gültigkeitsbereich und CSS-Modul im CSS-Bereich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!