„CSS-Module“ haben nichts mit dem W3C zu tun, sondern sind Teil eines vorgeschlagenen Build-Prozesses. Es kompiliert Ihr Projekt und benennt die Selektoren und Klassen so um, dass sie einzigartig werden und sich auf einzelne Komponenten beziehen. Stile sind in diesen Komponenten verankert und können nicht anderweitig verwendet werden, wenn Sie dies nicht ausdrücklich sagen!
Heutzutage sind wir ziemlich daran gewöhnt, dass Web-Technologien die treibende Kraft hinter Apps sind. Web-Apps, mobile und Desktop-Apps. Im Gegensatz zu einfachen statischen Websites sind Apps normalerweise dynamischer, komplexer und bestehen oft sogar aus Komponenten, die über das hinausgehen, was Bootstrap oder die ZURB Foundation bieten. Da eine App immer komplexer wird, kann das Verwalten von CSS eine höllische Aufgabe sein.
Im Laufe der Zeit wurden unzählige Strategien entwickelt, z. B. OOCSS, ITCSS, BEM, Atomic CSS usw., um CSS organisiert, wiederverwendbar und (entscheidend) zu halten. skalierbar. Diese Strategien setzen voraus, dass Sie und jeder in Ihrem Team die Konventionen gewissenhaft befolgen.
Früher oder später schleicht sich jedoch die Komplexität wieder ein, und Sie werden mit Stilregeln wie den folgenden stoßen:
html.progressive-image.js [data-progressive-image], html.progressive-image.js [data-progressive-image] * Hintergrundbild: keine! Important; Maskenbild: keine! wichtig; Deckkraft: 0 .main # section-enhanced-gallery-heroes.homepage-section.enhanced-gallery .with-single-item transform: translate (0, 0)! important
Das Problem mit CSS bei vielen großen Websites und Apps ist, dass es so schwierig ist, die Spezifität so gering wie möglich zu halten !wichtig
kann nicht vermieden werden Das Umgestalten von CSS in einer großen Codebasis ist schwierig, da das Entfernen von Stilen andere Komponenten beschädigen kann.
In diesem Tutorial werden wir uns mit den „CSS-Modulen“ befassen und aufzeigen, wie wir diese notorischen CSS-Probleme minimieren können.
Hinweis: Im Repo von Github finden Sie Codebeispiele.
Kurz gesagt: "CSS-Module" ist ein Werkzeug, das CSS-Klassen und IDs in eindeutige Selektoren umbenennt und die Stilregeln lokal für die zugewiesenen Elemente oder Komponenten isoliert. Angenommen, wir haben eine Schaltfläche, schreiben wir die Stilregeln normalerweise wie folgt:
.Schaltfläche Hintergrundfarbe: # 9b4dca; Grenze: 0.1rem solid # 9b4dca; Grenzradius: .4rem; Farbe: #fff; Cursor: Zeiger; Anzeige: Inline-Block; .button: Fokus, .button: hover Hintergrundfarbe: # 606c76; Rahmenfarbe: # 606c76; Farbe: #fff; Umriss: 0;
Mit CSS-Modulen werden diese Stilregeln folgendermaßen umbenannt:
._12We30_button Hintergrundfarbe: # 9b4dca; Grenze: 0.1rem solid # 9b4dca; Grenzradius: .4rem; Farbe: #fff; Cursor: Zeiger; Anzeige: Inline-Block; ._12We30_button: focus, ._12We30_button: hover Hintergrundfarbe: # 606c76; Rahmenfarbe: # 606c76; Farbe: #fff; Umriss: 0;
Wenn Sie große Websites wie Facebook, Instagram oder Airbnb durch die DevTools Ihres Browsers betrachten, werden Sie feststellen, dass die CSS-Klassen und -IDs mit einem solchen Muster benannt werden. Hier ein Beispiel von der Airbnb-Homepage:
Wer hat die Klasse mit scheinbar zufälligen Zahlen benannt?Die Verwendung von CSS-Modulen macht wenig Sinn, wenn wir nur eine Komponente haben. Lassen Sie uns unser Beispiel auf drei Komponenten erweitern und sehen, wie Sie unser Projekt für die Implementierung von CSS-Modulen konfigurieren.
In diesem zweiten Beispiel werden wir drei Komponenten erstellen. eine Schaltfläche mit drei verschiedenen Stilen. Wir nennen sie die "primäre Taste", die "Umriss-Schaltfläche" (auch als "Geist-Schaltfläche" bezeichnet) und die "Lösch-Schaltfläche". Wir legen diese Schaltflächen in ein separates Verzeichnis. Jedes Verzeichnis enthält index.css
und index.js
.
In dem index.js
, Wir erstellen das Element und weisen dem Element die Klassen wie folgt zu:
// 1. Importieren Sie die Stile aus der Datei index.css. Stile aus './index.css' importieren; / ** * 2. Erstellen eines Schaltflächenelements und Hinzufügen der Klasse aus index.css. * @type String * / const button = ''; // 3. Exportieren Sie die Schaltfläche, die in den anderen Dateien verwendet werden soll. Standardschaltfläche exportieren;
Das neue verwenden einführen
Direktive in ES6 importieren wir das Stylesheet und lesen die Klassen und die IDs als JavaScript-Objekt. Dann erstellen wir ein Element und fügen die benannte Klasse hinzu .Taste
mit nativem JavaScript Templating, das auch in ES6 eingeführt wurde. Zuletzt exportieren wir unser Element, sodass das Element auch in den anderen JavaScript-Dateien importiert und wiederverwendet werden kann.
Zum jetzigen Zeitpunkt hat nicht jeder Browser die neuesten JavaScript-Funktionen und -Syntax der ES6-Spezifikation implementiert. Daher benötigen wir Babel, um diese Snippets in eine JavaScript-Syntax umzuwandeln, die in den meisten Browsern kompatibel ist.
Unser Stylesheet, index.css
, ist einfaches CSS. Es enthält eine Reihe von Selektoren, um das Schaltflächenelement zu gestalten.
/ * 1. Primary Button * / .button Hintergrundfarbe: # 9b4dca; Grenze: 0.1rem solid # 9b4dca; Grenzradius: .4rem; Farbe: #fff; Cursor: Zeiger; Anzeige: Inline-Block; Schriftgröße: 1.1rem; Schriftgewicht: 700; Höhe: 3,8rem; Buchstabenabstand: .1rem; Zeilenhöhe: 3.8rem; Polsterung: 0 3,0rem; Text ausrichten: Mitte; Textdekoration: keine; Text-Transformation: Großbuchstaben; Leerraum: Nowrap; / * Weitere Styles des Primary Buttons hier * /
Die Verwendung von CSS-Modulen hat den Vorteil, dass wir uns nicht um Namenskonventionen kümmern müssen. Sie können immer noch Ihre bevorzugten CSS-Methoden wie BEM oder OOCSS verwenden, es wird jedoch nichts durchgesetzt. Sie können die Stilregeln auf die praktischste Weise für die Komponente schreiben, da der Klassenname letztendlich der Fall sein wird Namensraum.
In diesem Beispiel werden alle Klassen unserer Button-Komponente benannt .Taste
anstatt .Taste-Primär
oder .Knopfumriss
.
Mit CSS in Shadow DOM arbeiten Ich habe immer noch die alte Angewohnheit, die BEM-Notation zu verwenden, auch wenn ich dies nicht brauche. Style-Kapselung FTW!
- Razvan Caliman (@razvancaliman) 31. Juli 2017
Wenn wir das laden index.js
Auf einer HTML-Seite wird im Browser nichts angezeigt. In diesem Fall müssen wir den Code kompilieren, damit er funktionsfähig ist. Wir müssen Babel, Babel Preset für ES2015 (ES6) und Webpack zusammen mit den folgenden sogenannten "Loadern" installieren, damit Webpack unsere Quelldateien verarbeiten kann.
.js
Dateien und verwandeln den Quellcode mit dem Babel-Kernmodul..css
Dateien.css-loader
in unsere HTML-Seite mit der
.Wir installieren diese Pakete mit NPM und speichern sie unter package.json
Datei als unsere Entwicklungsabhängigkeiten.
Ähnlich wie Grunt mit seinem gruntfile.js
oder Gulp mit seinem gulpfile.js
, Nun müssen wir Webpack mit einer Datei namens einrichten webpack.config.js
. Nachfolgend die vollständige Webpack-Konfiguration in unserem Projekt:
var path = required ('pfad'); module.exports = entry: './src/main.js', // 1. output: path: path.resolve (__ dirname, 'dist / js'), Dateiname: 'main.js', module: loaders: [// 4. test: /\.css$/, verwenden Sie: [loader: 'style-loader', loader: 'css-loader', Optionen: modules: true, localIdentName: ' [hash: base64: 5] __ [local] '], test: /\.js$/, ausschließen: / node_modules /, use: [loader:' babel-loader ', Optionen: Voreinstellungen: ['es2015']]]
Die Konfiguration weist Webpack an, unsere Haupt-JavaScript-Datei main.js zu kompilieren / dist / js
Verzeichnis. Wir haben auch die aktiviert Module
Option in css-loader
sowie das Benennungsmuster für Klassen und ID auf [hash: base64: 5] __ [lokal]
. Wir stellen an Babel-Lader
um unsere ES6-JavaScript-Dateien zu kompilieren.
Sobald wir die Abhängigkeiten installiert und die Konfiguration eingerichtet haben, importieren wir alle unsere drei Schaltflächen in der Datei main.js.
// Importiere die Schaltflächenelemente; importiere ButtonPrimary von './button-primary'; importiere ButtonOutline von './button-outline'; importiere ButtonClear von './button-clear'; // füge das Element zum Inhalt hinzu; document.getElementById ('content'). innerHTML = '$ ButtonPrimary $ ButtonOutline $ ButtonClear';
Dann führe das aus Webpack
Befehl wie folgt:
./node_modules/.bin/webpack
Wenn wir laden /dist/js/main.js
Im Browser sollten wir sehen, dass unsere Schaltflächen mit den benannten Klassen nach dem Muster eingefügt werden, das wir in festgelegt haben css-loader
. Wir können auch die Stile finden, die der Seite hinzugefügt wurden Stile
Element.
CSS-Vorprozessoren wie LESS und Sass ermöglichen die Wiederverwendung von Stilen, indem andere Klassen oder IDs aus anderen Stylesheets erweitert werden. Mit CSS-Modulen können wir das verwenden komponieren
Anweisung, das Gleiche zu tun. In diesem Beispiel habe ich die gemeinsamen Stilregeln, die für unsere drei Schaltflächen gelten, in eine andere Datei eingefügt und die Klasse aus der neuen Datei wie folgt importiert:
.button / * Erweitern der .button-Klasse, um die grundlegenden Schaltflächenstile anzuwenden * / composes: button from "./button.css"; Farbe: #fff; Hintergrundfarbe: # 9b4dca; Grenze: 0.1rem solid # 9b4dca;
Sobald der Code neu kompiliert und in den Browser geladen wurde, können wir feststellen, dass die Schaltfläche mit zwei Klassen gerendert wird. Es gibt jetzt auch vier Stil
Elemente, die in die Seite eingefügt werden, darunter die _3f6Pb__button
Klasse, die die gemeinsamen Stilregeln unserer Komponenten enthält.
In einem echten Projekt würden wir CSS-Module wahrscheinlich nicht mit reinem JavaScript verwenden. Wir würden stattdessen ein JavaScript-Framework wie Vue verwenden. Glücklicherweise wurden CSS-Module über V mit Vue integriert vue-loader
; ein Webpack Loader, der das kompiliert .vue
. Unten sehen Sie ein Beispiel, wie wir unseren primären Button in einen portieren würden .vue
Komponente.
In Vue fügen wir das hinzu Modul
Attribut zum Stil
wie oben gezeigt, um die CSS-Module zu aktivieren. Wenn wir diesen Code kompilieren, erhalten wir fast das gleiche Ergebnis.
Für einige von euch wird dies etwas völlig Neues sein. Es ist durchaus verständlich, wenn das Konzept von CSS-Modulen auf den ersten Blick ein bisschen Kopfzerkratzer ist. Lassen Sie uns zusammenfassen, was wir in diesem Artikel über CSS-Module gelernt haben.
Namensraum
Die Klassennamen minimieren das Zusammentreffen der Selektorspezifität, wenn die Codebase wächst.In diesem Artikel haben wir die Oberfläche von CSS-Modulen und anderen modernen Tools für die Webentwicklung wie Babel, Webpack und Vue kaum zerkratzt. Daher habe ich hier einige Referenzen zusammengestellt, um diese Werkzeuge weiter zu untersuchen.