Lösen Sie Ihre Kopfschmerzen mit CSS-Modulen

„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!

Präambel

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.

CSS-Module verwenden

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?

Mehrere Komponenten

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.

Eine Komponente erstellen

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

Module mit Webpack kompilieren

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.

  • babel-loader: laden .js Dateien und verwandeln den Quellcode mit dem Babel-Kernmodul.
  • css-loader: laden .css Dateien.
  • Style-Loader: zum Einfügen interner Styles aus dem css-loader in unsere HTML-Seite mit der 

    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.

    Einpacken

    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.

    • Mit „CSS-Modulen“ können Sie Stilregeln durch Umbenennen von oder kapseln Namensraum Die Klassennamen minimieren das Zusammentreffen der Selektorspezifität, wenn die Codebase wächst.
    • Dies erlaubt uns auch, die Klassennamen komfortabler zu schreiben, anstatt an einer bestimmten Methodik festzuhalten.
    • Da Stilregeln an jede Komponente gekoppelt sind, werden die Stile auch entfernt, wenn wir die Komponente nicht mehr verwenden.

    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.

    Weitere Hinweise

    • Schauen Sie sich die Demo auf Github an
    • Starten Sie die Codierung von ES6 mit Babel: Tuts + Course
    • Erste Schritte mit Vue: Tuts + Course
    • Instant Webpack 2: Tuts + Kurs
    • Strategien, um die CSS-Spezifität niedrig zu halten
    • Daniel Eden: Bewegen Sie sich langsam und korrigieren Sie die Dinge