Verständnis der Methodik der CSS -Module

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:

<code class="language-css">.base {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}</code>

Verwendung in JavaScript -Komponenten:

<code class="language-javascript">import styles from './styles.css';

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

WebPack kann nach Zusammenstellung generieren:

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

<code class="language-css">._20WEds96_Ee1ra54-24ePy {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}</code>

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

<code class="language-css">:global(.clearfix::after) {
  content: '';
  clear: both;
  display: table;
}

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

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

Anfänger:

Erstellen von Tools wie Webpack oder Browserify sind erforderlich.

WebPack -Konfiguration:

zu

: webpack.config.js hinzufügen

<code class="language-javascript">{
  test: /\.css$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { modules: true } }
  ]
}</code>

Um eine separate CSS -Datei zu generieren, können Sie

: MiniCssExtractPlugin verwenden

<code class="language-javascript">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'
    })
  ]
};</code>

browserify -Konfiguration (Beispiel):

NPM -Skript in

: package.json hinzufügen

<code class="language-json">{
  "scripts": {
    "build": "browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js"
  }
}</code>

Zusammenfassung:

CSS-Module bieten eine nachhaltige, modulare, gut gescopte und wiederverwendbare CSS-Schreibmethode, insbesondere für große Projekte.

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!