CSS -Module: Ein leistungsstarkes Werkzeug für komponentierte CSS

In diesem Artikel werden CSS -Module eingeführt, eine effektive M?glichkeit, CSS -Global -Namespace -Konflikte zu l?sen und die Benennung von Komponenten zu vereinfachen. Es erfordert einen bestimmten Konfigurations- und Konstruktionsprozess, der normalerweise als Plug-In für Webpack oder Browserify verwendet wird, und wird nicht unabh?ngig ausgeführt.

Kernvorteile:

• Lokaler Bereich: CSS -Module begrenzt den CSS -Bereich standardm??ig auf Komponenten, um globale Namenskonflikte zu vermeiden.
• Dynamisches Namen: Der Konstruktionsprozess erzeugt einen eindeutigen dynamischen Klassennamen, kartieren Sie ihn dem entsprechenden Stil, reduzieren Sie Namenskonflikte und verbessern die Modularit?t.
• Skalierbarkeit: unterstützt das Definieren globaler Klassen und die Erweiterung von Stilen aus anderen Modulen, um die Wiederverwendbarkeit und Wartbarkeit der Code zu verbessern.

Arbeitsprinzip:

CSS -Module werden durch Importieren von CSS -Dateien in JavaScript -Modulen wie React -Komponenten implementiert. Es erstellt ein Objekt, das die in der CSS -Datei definierten Klassennamen in dynamisch generierte, einzigartig abgeschottete Klassennamen ordnet. Diese Klassennamen werden als Zeichenfolgen in JavaScript verwendet.

Zum Beispiel eine einfache CSS -Datei:

.base {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}

Verwendung in JavaScript -Komponenten:

import styles from './styles.css';

element.innerHTML = `<div class="${styles.base}">CSS Modules真有趣！</div>`;

WebPack kann nach Zusammenstellung generieren:

<div class="_20WEds96_Ee1ra54-24ePy">CSS Modules真有趣！</div>

._20WEds96_Ee1ra54-24ePy {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}

Klassenname -Generierung ist konfigurierbar, aber der Schlüssel ist, dass sie dynamisch generiert, einzigartig und zum richtigen Stil zugeordnet sind.

h?ufig gestellte Fragen:

• Klassenname ist h?sslich: Klassenname ist nicht für die ?sthetik, sondern für die Anwendung von Stilen. Dies ist also kein Problem.
• Schwierigkeit beim Debuggen: Sie k?nnen die Quellkarte zum Debuggen verwenden. Da der Stilbereich klar ist, ist das Debuggen relativ einfach.
• Wiederverwendbarkeit von schlechter Stil: CSS -Module sind so konzipiert, dass sie globale Stilkonflikte vermeiden, aber sie k?nnen immer noch Stile erweitern, indem sie globale Klassen oder :global() -Sporte definieren, um die Wiederverwendbarkeit zu verbessern. composes

:global(.clearfix::after) {
  content: '';
  clear: both;
  display: table;
}

.base {
  composes: appearance from '../AnotherModule/styles.css';
}

• Abh?ngig von Build -Tools: Dies ?hnelt SASS oder Postcss, wobei die Build -Schritte erforderlich sind.

Anf?nger:

WebPack -Konfiguration:

: webpack.config.js hinzufügen

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

: MiniCssExtractPlugin verwenden

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ... other configurations
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { modules: true } }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
};

browserify -Konfiguration (Beispiel):

: package.json hinzufügen

{
  "scripts": {
    "build": "browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js"
  }
}

Zusammenfassung:

FAQ:

• Vorteile: Klassennamenkonflikte vermeiden, die Wiederverwendbarkeit und Wartbarkeit der Komponente verbessern und Stilkombinationen unterstützen.
• Implementierung: Konfigurieren Sie WebPack oder Browserify, verwenden Sie die Erweiterung .module.css.
• Globaler Stil: Verwenden Sie :global().
• Stilkombination: Verwenden Sie das Schlüsselwort composes.
• kompatibel mit React -Kompatibilit?t: .
• Unterschiede zu herk?mmlichem CSS: Verschiedene Bereiche sind unterschiedlich, traditionelle CSS weltweit, CSS -Module lokal.
• kompatibel mit SASS/LEWS: , die zus?tzliche Konfiguration erfordern.
• DebugG: Verwenden Sie die Quellkarte.
• Einschr?nkungen: Build -Tools sind erforderlich, zus?tzliche Konfiguration erforderlich ist, um Medienabfragen usw. zu unterstützen.
• serverseitiges Rendering: Zus?tzliche Konfiguration ist erforderlich.

Das obige ist der detaillierte Inhalt vonVerst?ndnis der Methodik der CSS -Module. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!