Share
In diesem Lernprogramm erfahren Sie, wie Sie mit PostCSS die Entwicklung von CSS im BEM / SUIT-Stil einfacher und effizienter gestalten.
Diese beiden Methoden bieten eine Benennungskonvention für Klassen, die es einfacher macht, Ihre Stile funktionsorientiert zu halten, und hilft anderen Entwicklern, den Zweck verschiedener Klassen nur anhand der Namensgebung zu erkennen.
BEM war der Vorläufer dieser von Yandex erstellten Art der Klassennamensmethodik. Die SUIT-Methodik basiert auf BEM, jedoch mit einigen Anpassungen und Ergänzungen von Nicholas Gallagher. SUIT macht alles, was BEM macht, aber für viele Benutzer ist es eine Verbesserung.
Die Verwendung dieser Methoden hilft auf jeden Fall dabei, besser und besser strukturiertes CSS zu erstellen. Der schwierige Teil ist jedoch, dass es mühsam werden kann, die in dieser Struktur erforderlichen Klassennamen manuell einzugeben und zu verfolgen, wie Klassen in Beziehung zueinander stehen, und kann Kopfschmerzen verursachen.
Das postcss-bem-Plugin von Malte-Maurice Dreyer beseitigt diese Probleme durch eine Kombination aus Abkürzungen und Verschachtelungen, die Sie im Verlauf dieses Tutorials verwenden werden.
Lassen Sie uns zunächst jedoch eine kurze Einführung in die BEM- und SUIT-Methoden geben, um sicherzustellen, dass Sie ein klares Bild von den Vorteilen des Postcss-bem-Plugins und seiner Verwendung erhalten.
In BEM Blöcke sind High-Level-Brocken eines Designs; Die Bausteine, aus denen das Gelände besteht. Ein Block sollte ein Teil Ihrer Website sein, der von anderen Teilen unabhängig ist. Er könnte theoretisch an einer beliebigen Stelle in Ihrem Layout platziert werden, sogar in einem anderen Block.
Beispielsweise können Suchformblöcke auf Ihrer Site die Klasse verwenden .Suchformular.
Ein Element in BEM ist ein Unterabschnitt innerhalb eines Blocks. Sie werden durch einen zwei Unterstrich gekennzeichnet __ Trennzeichen und einen Elementnamen zum Namen des übergeordneten Blocks.
Ein Suchformular kann zum Beispiel Überschriften, Textfelder und Schaltflächenelemente zum Senden enthalten. Ihre Klassennamen könnten sein .Suchformular__Kopf, .Suchformular__Textfeld und .Suchformular__Schaltfläche beziehungsweise.
EIN Modifikator wird auf einen Block oder ein Element angewendet, um eine Änderung in seiner Präsentation oder eine Änderung in seinem Status anzuzeigen. Sie werden durch Anhängen eines Trennzeichens und eines Modifikatornamens an den betreffenden Block oder das betreffende Element gekennzeichnet.
Die offiziellen BEM-Site-Dokumente geben an, dass Modifizierer-Trennzeichen ein einzelner Unterstrich sein sollten _. Die "BEM-ähnliche" Konvention der CSS-Richtlinien von Harry Roberts verwendet jedoch zwei Striche -- und ist wahrscheinlich weiter verbreitet und bekannt als das offizielle BEM-Übereinkommen.
In einem Design möchten Sie beispielsweise erweiterte Suchformulare anders darstellen als reguläre Suchformulare und daher die Modifiziererklasse erstellen .Suchformular_Advanced (offizielles BEM) oder .Suchformular - fortgeschritten (BEM-like).
In einem anderen Beispiel möchten Sie möglicherweise das Erscheinungsbild des Formulars aufgrund einer Statusänderung ändern, z. B. wenn gerade ungültiger Inhalt übermittelt wurde, und daher den Modifikator erstellen .Suchformular ungültig (offizielles BEM) oder .Suchformular - ungültig (BEM-like).
ANZUG umfasst Dienstprogramme und Komponenten. Innerhalb von Komponenten kann es sein Modifikatoren, Nachkommenschaft und Zustände.
SUIT verwendet eine Kombination aus PascalCase (PascalCase), CamelCase (CamelCase) und Bindestrichen. Durch seine Konventionen wird die manchmal verwirrende Anzahl von Strichen und Unterstrichen, die in BEM vorkommen können, begrenzt. Zum Beispiel die BEM-Klasse .Suchformular__Textfeld wäre .SearchForm-textField Im Anzug.
Dienstprogramme Struktur und positionelles Styling handhaben und so geschrieben sind, dass sie überall in einer Komponente angewendet werden können. Sie sind mit vorangestellt u- und in Kamelhülle geschrieben. Zum Beispiel, .u-clearFix.
EIN Komponente in ANZUG tritt an die Stelle eines Block in BEM. Komponenten werden immer in Pascal Case geschrieben und sind nur ein Teil von SUIT, der Pascal Case verwendet, wodurch sie leicht zu identifizieren sind. Zum Beispiel, .Suchformular.
Den Komponenten kann optional ein Namensraum und ein einzelner Strich vorangestellt werden nmsp- um sicherzustellen, dass Konflikte verhindert werden, z. .Mine-SearchForm.
EIN absteigend in ANZUG ersetzt ein Element in BEM. Es wird ein einzelner Gedankenstrich verwendet - und ist in Kamelfall geschrieben. Zum Beispiel .SearchForm-Überschrift, .SearchForm-textField und .SearchForm-submitButto.
ANZUG verwendet Modifikatoren Wie bei BEM wird ihre Rolle jedoch stärker kontrolliert. Ein SUIT-Modifikator wird im Allgemeinen nur direkt auf eine Komponente angewendet, nicht auf eine untergeordnete Komponente. Es sollte auch nicht zur Darstellung von Zustandsänderungen verwendet werden, da SUIT eine eigene Namenskonvention für Zustände hat.
Die Modifikatoren sind in Kamelbuchstaben geschrieben und es sind zwei Striche vorangestellt --. Zum Beispiel, .SearchForm - erweitert.
Zustand Klassen können verwendet werden, um Änderungen des Zustands einer Komponente anzuzeigen. Dadurch können sie klar von Modifikatoren unterschieden werden, die die Änderung des Basisaussehens einer Komponente unabhängig vom Status widerspiegeln. Bei Bedarf kann ein Status auch auf ein untergeordnetes Element angewendet werden.
Staaten sind mit vorangestellt ist- und sind in Kamelfall geschrieben. Sie werden auch immer als angrenzende Klassen geschrieben. Zum Beispiel .SearchForm.is-ungültig.
Jetzt, da Sie die Grundlagen von BEM und SUIT haben, müssen Sie Ihr Projekt einrichten.
Je nach Wunsch benötigen Sie ein leeres Projekt, das entweder Gulp oder Grunt verwendet. Wenn Sie für das eine oder das andere nicht bereits eine Präferenz haben, empfehle ich die Verwendung von Gulp, da Sie weniger Code benötigen, um die gleichen Ziele zu erreichen, so dass Sie mit dem Arbeiten ein bisschen einfacher sein sollten.
Wie Sie Gulp- oder Grunt-Projekte für PostCSS einrichten, erfahren Sie in den vorherigen Tutorials
beziehungsweise.
Wenn Sie Ihr Projekt jedoch nicht manuell einrichten möchten, können Sie die an dieses Tutorial angehängten Quelldateien herunterladen und entweder das bereitgestellte Gulp- oder Grunt-Starterprojekt in einen leeren Projektordner extrahieren. Führen Sie dann den Befehl mit einer Terminal- oder Eingabeaufforderung auf den Ordner aus npm installieren.
Als nächstes müssen Sie das postcss-bem-Plugin installieren. Wir werden auch ein Plugin installieren, das gut funktioniert: postcss-nested.
Führen Sie den folgenden Befehl in Ihrem Projektordner aus, unabhängig davon, ob Sie Gulp oder Grunt verwenden:
npm install postcss-bem postcss-nested --save-dev
Nun können wir die Plugins in Ihr Projekt laden.
Wenn Sie Gulp verwenden, fügen Sie diese Variablen unter den bereits in der Datei vorhandenen Variablen hinzu:
Accentsconagua
var bem = requir ('postcss-bem'); var nested = required ('postcss-nested');Fügen Sie nun jeden dieser neuen Variablennamen in Ihre hinzu Prozessoren Array:
var-Prozessoren = [bem, verschachtelt];
Führen Sie einen kurzen Test durch, indem Sie den Befehl ausführen Schluck Css Vergewissern Sie sich, dass eine neue Datei „style.css“ im Ordner „dest“ Ihres Projekts angezeigt wurde.
Wenn Sie Grunt verwenden, aktualisieren Sie die Prozessoren Objekt, das unter dem verschachtelt ist Optionen Objekt zu Folgendem:
Prozessoren: [erfordern ('postcss-bem') (), erfordern ('postcss-nested') ()]Führen Sie einen kurzen Test durch, indem Sie den Befehl ausführen grunzen postcss Vergewissern Sie sich, dass eine neue Datei „style.css“ im Ordner „dest“ Ihres Projekts angezeigt wurde.
Okay, du bist bereit zu gehen. Lernen Sie, wie Sie die BEM- und SUIT-Struktur erstellen.
Beim manuellen Herausschreiben von Code kann es in der BEM- oder SUIT-Struktur zu Unpässlichkeiten kommen, da die ständige Wiederholung der gleichen Bezeichner in Klassennamen ermüdend wird und der Überblick, welche Elemente und Nachkommen zu den Blöcken und Komponenten gehören, die verwirrend werden können.
Wenn Sie jedoch postcss-bem verwenden, wird es leicht, die Struktur Ihres Codes auf einen Blick zu verstehen, und Wiederholungen beim Eingeben von Klassennamen sind praktisch nicht vorhanden.
Trotz seines Namens wird postcss-bem standardmäßig nach der SUIT-Syntax und nicht nach BEM ausgegeben. Sie können die BEM-Syntax ausgeben, auf die wir später eingehen werden. Das Plugin ist jedoch hauptsächlich für die Ausgabe von SUIT konzipiert. Aus diesem Grund beginnen wir mit der SUIT-Syntax.
Verwenden Sie zum Erstellen einer Komponente die Syntax @component ComponentName ….
Probieren Sie dies aus, indem Sie ein Suchformular Komponente zu Ihrer Datei "src / style.css":
@component SearchForm padding: 0; Marge: 0;
Kompilieren Sie es und Ihr resultierender Code sollte sein:
.SearchForm padding: 0; Marge: 0;
Verwenden Sie zum Erstellen eines Nachkommen die Syntax @descendent descName … verschachtelt in der übergeordneten Komponente.
Fügen Sie einen Nachkommen namens hinzu Textfeld in deinem Suchformular Komponente wie folgt:
@component SearchForm padding: 0; Marge: 0; / * Nest absteigend unter Komponente * / @descendent textField border: 1px solid #ccc;
Nach dem Kompilieren sollten Sie jetzt sehen:
.SearchForm padding: 0; Marge: 0; .SearchForm-textField border: 1px solid #ccc;
Erstellen Sie einen Modifikator für eine Komponente mit der Syntax @ modifier name …, verschachtelt in der Komponente, die es bewirkt. Modifikatoren sollten in der Regel über Ihren Nachkommen und Zuständen oben in Ihrer Komponente platziert werden.
Fügen Sie einen Modifikator mit dem Namen hinzu fortgeschritten zu deinem Suchformular Komponente mit dem folgenden Code:
@component SearchForm padding: 0; Marge: 0; / * Normalerweise platzieren Sie Modifizierer über den Nachkommen * / @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc;
Kompilieren Sie Ihren Code neu und Sie sollten Ihren neuen sehen fortgeschritten Komponentenmodifizierer:
.SearchForm padding: 0; Marge: 0; .SearchForm - advanced padding: 1rem; .SearchForm-textField border: 1px solid #ccc;
Zustände werden über die Syntax erstellt @wenn Name … und kann in einer Komponente oder einem Nachkommen verschachtelt sein.
Fügen Sie einen Staat mit dem Namen hinzu ungültig zu deinem Textfeld Abkömmling mit diesem Code:
@component SearchForm padding: 0; Marge: 0; @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc; / * Hiermit wird ein Status für den Nachkommen von textField erstellt. * / @Wenn ungültig border: 1px durchgehend rot;
Wenn Sie nun Ihren Code kompilieren, sehen Sie, dass er Ihren neuen Code enthält ungültig Zustand:
.SearchForm padding: 0; Marge: 0; .SearchForm - advanced padding: 1rem; .SearchForm-textField border: 1px solid #ccc; .SearchForm-textField.is-invalid border: 1px durchgehend rot;
Sie können Ihre Komponenten sowie alle in ihnen verschachtelten Nachkommen, Modifikatoren und Zustände mit einem Namensraum versehen, indem Sie sie mit einschließen @ Name des Komponentennamensbereichs …. Wenn Sie möchten, können Sie Ihr gesamtes Stylesheet mit diesem Namespace umschließen, sodass alle Klassen automatisch mit einem Präfix versehen werden.
Probieren Sie dies aus, indem Sie Ihren gesamten Code mit einschließen @ Komponentennamensraum mein …:
@ Komponentennamensraum mein @component SearchForm padding: 0; Marge: 0; @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc; @wenn ungültig Rand: 1px durchgehend rot;
Nach dem Kompilieren sehen Sie, dass jetzt jede Ihrer Komponenten mit einem Präfix versehen ist Bergwerk-:
.mine-SearchForm padding: 0; Marge: 0; .mine-SearchForm - advanced padding: 1rem; .mine-SearchForm-textField border: 1px solid #ccc; .mine-SearchForm-textField.is-invalid border: 1px durchgehend rot;
Dienstprogramme werden mit der Syntax erstellt @utility utilityName …. Sie erinnern sich, dass Sie beim Einrichten Ihres Projekts das Postcss-Nested-Plugin installiert haben. Wir haben dies getan, da es sehr praktisch sein kann, es gemeinsam mit postcss-bem zu verwenden, wie Sie in diesem Beispiel sehen werden, wo wir ein erstellen clearFix Nützlichkeit:
@utility clearFix &: before, &: after content: ""; Anzeige: Tisch; &: after clear: both; / * Bei Unterstützung von IE 6/7 * / * Zoom: 1;
Nachdem Sie den obigen Code hinzugefügt haben, kompilieren Sie und Sie werden sehen, dass dieses neue Dienstprogramm erstellt wurde:
.u-clearFix / * Bei Unterstützung von IE 6/7 * / zoom: 1; .u-clearFix: before, .u-clearFix: after content: ""; Anzeige: Tisch; .u-clearFix: after clear: both;
Übergeben Sie die Option, um die BEM-Syntaxausgabe in postcss-bem zu aktivieren Stil: 'bem' in deiner Gulpfile oder Gruntfile wie folgt:
/ * Gulpfile * / var-Prozessoren = [bem (style: 'bem'), verschachtelt]; / * Gruntfile * / Prozessoren: [erfordern ('postcss-bem') (Stil: 'bem'), erfordern ('postcss-nested') ()]Standardmäßig verwendet postcss-bem das offizielle Trennzeichen für einen Modifikator eines einzelnen Unterstrichs _. Wenn es für Ihr Projekt wichtig ist, verwenden Sie das allgemeinere Trennzeichen von zwei Strichen -- Stattdessen können Sie die Konfiguration für das Plugin "postcss-bem" ändern, indem Sie in den Ordner node_modules / postcss-bem Ihres Projekts gehen, index.js öffnen, Zeile 15 suchen und Folgendes ändern:
bem: Trennzeichen: Namespace: '-', Nachkomme: '__', Modifikator: '_'
… Dazu:
bem: Trennzeichen: Namespace: '_', Nachkomme: '__', Modifikator: '-'
Da ein "Block" in BEM mit einer "Komponente" in SUIT korreliert, verwenden Sie die Syntax @Komponentenblockname … einen Block erzeugen.
So erstellen Sie eine Suchformular Block diesen Code hinzufügen:
@Komponenten-Suchformular Auffüllen: 0; Marge: 0;
Dann kompilieren Sie und Sie sollten sehen:
.Suchformular Auffüllen: 0; Marge: 0;
Da ein „Element“ in BEM mit einem „Nachkommen“ in SUIT korreliert, können sie mit der Syntax erstellt werden @descendent Elementname … verschachtelt im übergeordneten Block.
So erstellen Sie eine Textfeld Element hinzufügen Folgendes:
@Komponenten-Suchformular Auffüllen: 0; Marge: 0; @descendent text-field border: 1px solid #ccc;
Beim Kompilieren sehen Sie, dass Ihr neues Element erstellt wurde:
.Suchformular Auffüllen: 0; Marge: 0; .search-form__text-field border: 1px fest #ccc;
Obwohl BEM Modifikatoren sowohl für Blöcke als auch für Elemente zulässt, verarbeitet das Plugin postcss-bem nur diese Elemente, wenn sie in Blöcken und nicht in Elementen verschachtelt sind. Dies geschieht aufgrund der Konvention von SUIT, bei der Modifikatoren auf Komponenten angewendet werden, die keine Nachkommen sind. Sie können mit der Syntax erstellt werden @ modifier name …, in seinem übergeordneten Block verschachtelt.
Fügen Sie eine hinzu fortgeschritten Modifikator für Ihre Suchformular Komponente wie folgt:
@Komponenten-Suchformular Auffüllen: 0; Marge: 0; @modifier advanced padding: 1rem; @descendent text-field border: 1px solid #ccc;
Und beim Kompilieren wird es ergeben:
.Suchformular Auffüllen: 0; Marge: 0; .search-form_advanced padding: 1rem; .search-form__text-field border: 1px fest #ccc;
Im BEM-Modus wird der @Nützlichkeit und @wann Syntaxe werden nicht zu irgendetwas kompiliert, da BEM keine Dienstprogramme oder Zustände verwendet.
Obwohl es normalerweise nicht Teil von BEM ist, ist das @ Komponentennamensraum Die Syntax funktioniert weiterhin, wenn Sie sie in Ihrem BEM-Stylesheet verwenden möchten. Ihre Klassen werden mit vorangestellt Name--:
.meine - Suchformular padding: 0; Marge: 0; .mine - search-form_advanced padding: 1rem; .mine - Suchformular__Textfeld border: 1px solid #ccc;
Jetzt wissen Sie, wie Sie Ihre BEM- und SUIT-Entwicklung abkürzen und den gesamten Prozess einfacher machen. Fassen wir alles zusammen, was wir behandelt haben:
@Komponente, @descendent, @Modifikator usw.@ Name des Komponentennamensbereichs … Als Nächstes schauen wir uns eine weitere großartige Möglichkeit an, PostCSS zu nutzen, indem wir ein Toolkit aus Abkürzungen und Abkürzungen zusammenstellen, um die Codierung schneller und effizienter zu gestalten.
Ich sehe dich dort!
