Was sind CSS-Module? Finden wir es gemeinsam heraus!

Im April dieses Jahres habe ich ein Vorstellungsgespräch mit einem Unternehmen geführt.

Während des technischen Interviews wurde ich gefragt, ob ich das CSS-Modul verstanden hätte.

Er fragte weiterhin, wie es mit Ihrer täglichen Entwicklung sei ? Was soll ich tun, wenn ich Komponenten und Elementen Klassennamen gebe?
Ich habe gesagt, dass Sie den Elementen und Komponenten bestimmte Präfixe hinzufügen sollen, um sicherzustellen, dass die von Ihnen geschriebenen Klassennamen nicht mit den von anderen Kollegen geschriebenen Klassennamen in Konflikt geraten.

Dann hörte es auf und ich wurde viel über die Prinzipien von React gefragt und habe das Interview bestanden.

Heute erklären wir ihm, was CSS-Module sind, damit es klarer wird.

[Empfohlenes Tutorial: CSS-Video-Tutorial ]

Schauen wir uns zunächst ein Bild an:

Ein Bild, um das Funktionsprinzip von CSS-Modulen zu verstehen:

Als wir uns selbst programmierten, hatten wir zwei Dateien, eine ist ProductList .less-Datei, eine davon ist die ProductList.jsx-Datei
Nach dem Erstellen wird die less-Datei in die Datei mit einem blauen Titel konvertiert.

Daraus ist ersichtlich:

• Die Schaltflächenklasse wird nach der Erstellung in ProductList_button_1FU0u umbenannt. button ist der lokale Name und ProductList_button_1FU0u ist der globale Name. Sie können kurze und beschreibende Namen verwenden, ohne sich Gedanken über Namenskonflikte machen zu müssen.

Dann müssen Sie nur noch .button {…} in die CSS/less-Datei schreiben und über „styles.button“ in der Komponente darauf verweisen.

Globales CSS definieren

CSS-Module sind standardmäßig lokal gültig. Wenn Sie eine globale Regel deklarieren möchten, können Sie die :global-Syntax verwenden.

Zum Beispiel:

.title {
	color: red;
}
:global(.title) {
	color: green;
}

Bei Anführungszeichen:

<App className={styles.title} /> // red
<App className="title" />        // green

Klassennamen-Paket

In einigen komplexen Szenarien kann ein Element mehreren Klassennamen entsprechen, und jeder Klassenname bestimmt anhand einiger Bedingungen, ob er angezeigt wird. Zu diesem Zeitpunkt ist die Klassennamenbibliothek sehr nützlich.

import classnames from 'classnames';
const App = (props) => {
	const cls = classnames({
		btn: true,
		btnLarge: props.type === 'submit',
		btnSmall: props.type === 'edit',
	});
	return <div className={ cls } />;
}

Wenn auf diese Weise unterschiedliche Typen an die App-Komponente übergeben werden, werden unterschiedliche Klassennamenkombinationen zurückgegeben:

<App type="submit" /> // btn btnLarge
<App type="edit" />   // btn btnSmall

Weitere Programmierkenntnisse finden Sie unter: Programmier-Tutorial! !

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