Was sind CSS-Module?

CSS-Module sind weder eine offizielle Spezifikation noch ein Browsermechanismus, sondern eine Möglichkeit, CSS-Klassennamen und -Selektoren während des Erstellungsschritts festzulegen (ähnlich wie Namespaces). Mit Hilfe von Build-Tools können Klassennamen oder Selektornamen bereichert werden.

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

Was sind CSS-Module?

CSS-Module sind also weder eine offizielle Spezifikation noch ein Browsermechanismus, sondern eine Möglichkeit, CSS-Klassennamen und -Selektoren während des Erstellungsschritts (z. B. mithilfe von Webpack oder Browserify) festzulegen (ähnlich dem Namespace).

Vorteile von CSS-Modulen

Das Problem globaler Namenskonflikte lösen CSS-Module kümmern sich nur um die eindeutige Benennung der Komponenten selbst

Modularisierung kann Composes verwenden, um die Stile in ihrem eigenen Modul und die Stile eines anderen Moduls einzuführen

Lösen Sie die Frage mit der Verschachtelungsebene zu tief und verwenden Sie flache Klassennamen.

Warum CSS-Module einführen?

1), globaler Stilkonflikt

Beim Packen des Webpacks werden alle js-Dateien in die Eintragsdatei App.js importiert und die Stile werden auch einheitlich in den Eintrag geladen von CSS, die folgenden Stile Es wird die vorherige Stildeklaration überschreiben, was zu einem Problem mit der globalen Stilüberschreibung führt.

2), Selektoren mit zu tiefen Verschachtelungsebenen

Probleme, die durch extrem tiefe Verschachtelungen verursacht werden:

- Gemäß den Analyseregeln von CSS-Selektoren kann man wissen, dass die Anzahl der Vergleiche umso höher ist, je tiefer die Ebene ist . , was sich auf die Darstellung der gesamten Seite auswirkt

- Erhöhter unnötiger Byte-Overhead- Je mehr Einschränkungen, desto schlechter die Skalierbarkeit

3), Variablen können nicht gemeinsam genutzt werden

Komplexe Komponenten verwenden js und CSS, um Stile gemeinsam zu verwalten.

Lernvideo-Sharing:

CSS-Video-Tutorial

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