Die CSS-Modularisierung löst Namenskonflikte: CSS-Modul

CSS modulare Konfliktlösung

Der CSS-Bereich ist global, Projekte werden immer größer und es gibt immer mehr Menschen. Die Benennung ist nach und nach zu einem Problem geworden. Es ist unvermeidlich, dass Namen dupliziert werden, sodass entsprechende modulare Lösungen geboren wurden.
Derzeit gibt es diese Kategorien:

• 1. CSS-Benennungsmethodik: Benennungsregeln manuell vereinbaren.
• 2.CSS-Module: Eine CSS-Datei ist ein unabhängiges Modul.
• 3.CSS-in-JS: Schreiben Sie CSS in JS.
• 4. HTML5-Stilbereich

CSS-Benennungsmethodik

GUT

BEM ist ein Blockelementmodifikator (Block Element Modifier), benannt in der Form .block__element–modifier, also den drei Teilen von .module name__element name – modifier name . Verwenden Sie doppelte Unterstriche__, um den Modulnamen und den Elementnamen klar zu unterscheiden. Verwenden Sie doppelte Bindestriche, um Elementnamen klar von Modifikatornamen zu unterscheiden.

.box__menu-item--active {
    
    }

Diese Art der Benennung ist hauptsächlich künstlich, um Namensbeschränkungen einzuhalten.

Atomares CSS

Atomic CSS ist atomares CSS, das ein einzelnes Attribut in einer Klasse kapselt, um sicherzustellen, dass es keine doppelten Stile gibt. Dies erleichtert die Wiederverwendung von Attributen, führt aber auch dazu, dass die Klasse von Elementen mit komplexen Stilen sehr aufgebläht wird.

<div class="mt-10 w-100 h-15"></div> 

CSS-Module

Das CSS-Modul folgt den folgenden Ideen, um Klassennamenkonflikte zu lösen:

• In großen Projekten kommt es häufig zu Konflikten mit CSS-Klassennamen
• Große Projekte verwenden häufig Build-Tools (Webpack usw.), um Projekte zu erstellen
• Mithilfe von Build-Tools können CSS-Stile in detailliertere Module aufgeteilt werden
• Wie bei JS-Variablen ist es schwierig, widersprüchliche Klassennamen in jeder CSS-Moduldatei anzuzeigen. Widersprüchliche Klassennamen treten häufig in verschiedenen CSS-Moduldateien auf.
• Stellen Sie einfach sicher, dass das Build-Tool nach dem Zusammenführen des Stilcodes keine Klassennamenkonflikte aufweist.

CSS ModulesEs handelt sich weder um einen offiziellen Standard noch um eine Browserfunktion, sondern um eine Möglichkeit, CSS-Klassennamenselektoren während des Erstellungsschritts (z. B. mithilfe von Webpack oder Browserify) zu erweitern (durch Implementierung einer Namespace-ähnlichen Methode durch Hashing).

webpackDie eingebauten css-loader Komponenten sind im Lieferumfang enthalten CSS Modulesund können durch einfache Konfiguration genutzt werden.

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        use: [
          'style-loader',
          {
    
    
            loader: 'css-loader',
            options: {
    
    
              modules: true,
            }
          }
        ],
      },
    ]
  }
};

Der Standard-Hash-Algorithmus für benutzerdefinierte generierte Klassennamen
css-loaderist [hash:base64], aber wir müssen möglicherweise das gewünschte Klassennamenformat anpassen, das uns Parameter zur Angabe des generierten Namensformats css-loaderbereitstellt .localIdentName

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        use: [
          'style-loader',
          {
    
    
            loader: 'css-loader',
              options: {
    
    
                modules: {
    
    
                  localIdentName: '[name]__[local]-[hash:base64:5]'
             },
          }
        ],
      },
    ]
  }
};

Vue verwendet Module

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

Zusammengestelltes Ergebnis:

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

Umfang

CSS Modules :localDie Lokalisierung von Stilen wird durch den standardmäßigen lokalen Bereich erreicht, und der globale Bereich wird verwendet :global , um die Globalisierung von Stilen zu erreichen. Gleichzeitig wird die Verpackung des globalen Klassennamens nicht in eine Hash-Zeichenfolge kompiliert.

// 局部样式(可以省略:local)
.normal {
    
    
  color: green;
}

:local(.normal) {
    
    
  color: green; 
}


// 全局样式
:global(.btn) {
    
    
  color: red;
}

Globaler Klassenname

Einige Klassennamen sind global und statisch und erfordern keine Konvertierung. Sie müssen lediglich eine spezielle Syntax an der Position des Klassennamens verwenden:

:global(.main){
    
    
    ...
}

Klassennamen, die „global“ verwenden, werden nicht konvertiert. Im Gegensatz dazu bedeuten Klassennamen, die nicht „global“ verwenden, dass standardmäßig „local“ verwendet wird.

:local(.main){
    
    
    ...
}

Der lokale Klassenname wird zur Darstellung des lokalen Klassennamens verwendet. Es handelt sich um einen Klassennamen, der Konflikte verursachen kann und vom CSS-Modul konvertiert wird.

wichtiger Punkt

Bei der Verarbeitung von Keyframes einer Animationsanimation muss zuerst der Animationsname geschrieben werden. Beispiel: Animation: deni .5s wird normal kompiliert; Animation: .5s deni wird abnormal kompiliert.
Denken Sie daran, den CSS-Loader zu konfigurieren, da er sonst nicht wirksam wird.
Wenn Sie Style-Loader verwenden, müssen Sie ihn konfigurieren und in Vue-Style-Loader ändern, damit er wirksam wird.
Wie lösen CSS-Module das Gewichtsproblem?

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

CSS in JS

Lassen Sie es komplett hinter sich CSS, verwenden Sie JavaScriptschriftliche CSS Regeln und Inline-Stile. Reagieren: CSS in JS // Speaker Deck. Radium im Reaktionsstil fällt in diese Kategorie. Aber es gibt folgende Probleme:

• Pseudoklassen, Medienabfragen usw. können nicht verwendet werden.
• Es gibt auch viele Duplikate des Stilcodes.
• Vollständige CSS-Präprozessoren (oder Postprozessoren) können nicht genutzt werden.

Verwenden Sie JS, um Stilmodule zu verwalten.
Verwenden Sie JS, um native CSS-Dateien zu kompilieren, um sie modular zu machen.

CSS-Bereich

Vue erreicht den Zweck der Privatisierung und Modularisierung von Stilen, indem es der DOM-Struktur und den CSS-Stilen einzigartige und sich nicht wiederholende Tags hinzufügt, um Einzigartigkeit sicherzustellen. Es ist unmöglich, das Problem der CSS-Gewichts- und Klassennamenduplizierung vollständig zu vermeiden.

<style scoped>
.example {
    
    
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

Konvertieren

<style>
.example[data-v-f3f3eg9] {
    
    
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

Beachten:

1. scoped在DOM中添加了一个唯一的属性data-v-f3f3eg9，在css中也添加了一个属性.example[data-v-f3f3eg9]
来保证唯一性，这样如果外部使用了同名的class，依然有可能影响组件的样式
2. scoped使用了属性选择器，会使得选择的效率降低
3. scoped在html和css中都添加了哈希值，会使得两者的提交都变大，降低加载速度，影响渲染效率
4. scoped修改子组件的样式，必须使用深度选择器

Mangel:

Wenn der Benutzer denselben Klassennamen an anderer Stelle definiert, kann dies dennoch Auswirkungen auf den Stil der Komponente haben.
Gemäß den Merkmalen der CSS-Stilpriorität erhöht die bereichsbezogene Verarbeitung das Gewicht jedes Stils. Wenn Sie eine bereichsbezogene Komponente
als Unterkomponente bezeichnen, wird es schwierig, den Stil der Unterkomponente zu ändern, und Sie müssen ihn möglicherweise verwenden! Wichtiger
Gültigkeitsbereich verlangsamt das Rendern von Tag-Selektoren um ein Vielfaches. Bei der Verwendung von Tag-Selektoren verringert Scoped die Leistung erheblich, die Verwendung von Class oder ID jedoch nicht.

Insgesamt sind CSS-Module besser als bereichsgebunden und es wird empfohlen, CSS-Module zu verwenden.
Abschließend möchte ich jedem ein Plug-In empfehlen, das unsere Entwicklungseffizienz erheblich verbessern kann. Beim Schreiben von Stilen.

Bewegen Sie die Maus bei gedrückter Strg-Taste und klicken Sie, um zum Stil zu springen.

Referenzartikel: https://juejin.cn/post/6994046975851102239