Was ist ein CSS-Modul?

Das CSS-Modul ist eine CSS-Datei, in der alle Klassennamen nur einen lokalen Geltungsbereich haben, d. h. der Geltungsbereich aller Klassennamen und Animationsnamen in der CSS-Datei ist standardmäßig der aktuelle Geltungsbereich. CSS-Module beschränken den Geltungsbereich auf Komponenten und vermeiden so das Problem des globalen Geltungsbereichs.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

CSS-Modul ist:

CSS-Dateien, in denen alle Klassennamen und Animationsnamen standardmäßig lokal festgelegt sind. Alle haben standardmäßig den aktuellen Gültigkeitsbereich.

CSS-Modul ist eine CSS-Datei, in der alle Klassennamen einen lokalen Gültigkeitsbereich haben.

CSS-Module sind also keine offizielle Spezifikation oder Implementierung in Browsern, sondern ein (mit Hilfe von Webpack oder Browserify) Änderung des Umfangs von Klassennamen und Selektoren auf den Konstruktionsprozess der aktuellen Datei (ähnlich wie Namespaces).

Wie sieht das aus und warum? Das werden wir gleich sehen. Denken Sie zunächst daran, wie HTML und CSS im Allgemeinen funktionieren. Ein Klassenname wird auf HTML angewendet:

<h1 class="title">An example heading</h1>

Definieren Sie diese Klasse in CSS:

.title {  
    background-color: red;  
}

Sobald dieses CSS auf dieses HTML-Dokument angewendet wird, ändert sich die Hintergrundfarbe von h1, auf das diese Klasse angewendet wird, in Rot. Wir müssen uns nicht mit CSS oder HTML befassen. Browser verstehen das Format dieser Dateien.

CSS-Module verfolgen einen anderen Ansatz. Im Gegensatz zum Schreiben von einfachem HTML müssen wir unser Markup in eine JavaScript-Datei schreiben, z. B. index.js. Hier ist ein Beispiel dafür, wie es funktionieren würde (wir werden uns später mit einem praktischeren Beispiel befassen):

import styles from  "./styles.css"; 
element.innerHTML = 
    `<h1 class="${styles.title}"> 
        An example heading 
    </h1>`;

Während unseres Build-Prozesses schaut sich der Compiler die von uns importierte Datei „styles.css“ an und wendet dann die Datei „styles.css“ in unserer JavaScript-Datei an. Titelklasse überstyles.title. Unser Build-Prozess verarbeitet diese dann in einer neuen, separaten HTML- und CSS-Datei und ersetzt dabei das HTML-Klassenattribut und die CSS-Auswahlklasse durch eine neue Zeichenfolge.

Die generierte HTML-Datei könnte so aussehen:

<h1 class="_styles__title_309571057">
    An example heading 
</h1>

Die generierte CSS-Datei könnte so aussehen:

._styles__title_309571057 { 
    background-color: red; 
}

Die vorherigen Klassenattribute und der Selektor .title existieren überhaupt nicht mehr und wurden durch eine brandneue Zeichenfolge ersetzt. Unser bisheriges CSS wird dem Browser überhaupt nicht mehr zur Verfügung gestellt.

Warum sollten wir CSS-Module verwenden?

Verwenden Sie CSS-Module, um sicherzustellen, dass alle Stile auf eine einzelne Komponente angewendet werden:

an einer Stelle
nur auf diese Komponente und nichts anderes angewendet
Darüber hinaus kann jede Komponente eine haben Echte Abhängigkeiten wie

import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.red}  ${padding.large}">`;

Der Zweck dieses Ansatzes besteht darin, das Problem des globalen Geltungsbereichs in CSS zu lösen

Haben Sie jemals versucht, in einer Situation mit Zeit- und Ressourcenmangel so schnell wie möglich einen einfachen Code zu schreiben? CSS ohne Berücksichtigung seiner Auswirkungen auf andere Situationen?

Haben Sie jemals ein paar zufällige fehlerhafte Teile am Ende Ihres Stylesheets übrig gelassen und versucht, sie zu organisieren, haben es aber nie geschafft?

Sind Sie jemals auf einen Stil gestoßen, bei dem Sie nicht ganz sicher waren, was er bewirkt oder ob er bereits verwendet wurde?

Haben Sie jemals darüber nachgedacht, dass Sie einige Stile entfernen könnten, ohne andere kaputt zu machen? Sie fragen sich, ob dieser Stil von Ihnen oder von anderen abhängt? Oder den Stil woanders überschreiben?

Diese Fragen bereiten Ihnen möglicherweise Kopfschmerzen, verlängern die Projektfristen und schauen traurig und sehnsüchtig aus dem Fenster.

Durch die Verwendung von CSS-Modulen und dem Konzept des standardmäßigen aktuellen Bereichs werden diese Probleme vermieden. Wenn Sie einen Stil schreiben, müssen Sie über das Endergebnis des Stils nachdenken.

Wenn Sie beispielsweise „random-gross-class“ in HTML verwenden, ohne es als CSS-Modulstilklasse anzuwenden, wird der Stil nicht angewendet, da der CSS-Selektor in „._style_random-gross-class_0038089“ konvertiert wird.

(Lernen Video-Sharing:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonWas ist ein CSS-Modul?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!