Die Kombination der Kräfte von SEM-und BIO-Verbesserung CSS

0
38

CSS ist einfach, einige könnte argumentieren, sondern die “Leichtigkeit” kann dazu führen, chaotisch-code. Dies ist vor allem durch die power von Präprozessoren wie Sass oder Less, wo, wenn Sie nicht vorsichtig sind, Ihre CSS kann schwieriger geworden, zu beschäftigen, statt einfacher. Sass? Härter? Diese Kernaussage zeigt ein großartiges Beispiel für Sass Verschachtelung der Hölle.

Wenn Ihr Sass-code aussieht, kann man definitiv verbessern Sie Ihre code mit SEM-und BIO –, eine CSS-Technik, die ich einführen werde Sie jetzt!

In diesem Artikel werde ich die Verwendung des code-Beispiel unten, um zu erklären, wie SEM und BIO funktioniert und wie Sie helfen können, verbessern Sie Ihre CSS-Strategie.

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

In der Regel, SEM beschäftigt sich mit high-level-CSS-Philosophie in der Erwägung, dass BIO ist eine aktuelle Technik, um Ihnen helfen, besser zu schreiben CSS zu erreichen SEM. Der Hauptzweck der beiden SEM-und BIO-ist besser zu handhaben, die CSS-Spezifität ist eines der wichtigsten Konzepte, die Sie verstehen sollten, für CSS.

Credit: Nana Jeon

Zuerst von allen, lassen Sie uns darüber reden SEM.

SEM

SEM steht für:

  • Skalierbar
  • Erweiterbar
  • Wartbar

Versuchen, zu erreichen, diese drei Faktoren können auf jeden Fall verbessern Sie Ihre CSS-code, und es hilft Ihnen dabei, Ihre Komponenten, die viel mehr solide ist.

Let ‘ s talk mehr über die einzelnen Faktoren im detail.

Skalierbar

Eine skalierbare (oder wiederverwendbaren) Komponenten bedeutet, dass die gleiche aussehende Komponenten sollten verwendet werden, wo immer Sie wollen, ohne irgendwelche coding-änderungen.

Credit: Nana Jeon

Aus der CodePen-Beispiel weiter oben die “Suchen” – button in der Kopfzeile sieht genau das gleiche wie die ‘Link’ – Schaltfläche in der Seitenleiste. Wenn wir vergleichen, die HTML-markup,

  • die “Suchen” – Taste < – Taste> – element
  • aber der “Link” – Taste ist die <a role=”button” … > – element

…und selbst wenn das markup ist Verschieden, die Stile identisch sind, durch Verwendung der gleichen Klassen: .c-btn und .c-btn-gelb.

Die button-Stile sind skalierbar und ermöglicht es Ihnen, fügen Sie die gleichen Komponenten suchen, wohin Sie wollen, da es nicht verschmutzt sein, von seinen Eltern oder Geschwistern. Dies kann sparen Sie von den großen Kopfschmerzen, nicht zu wissen, warum völlig Unbeteiligte Komponenten defekt sind, auch wenn die änderungen auf eine andere Komponente aus einer völlig anderen Ort.

Quelle: Cartoon Network

Erweiterbar

Eine erweiterbare Komponente ist einfach und bietet zusätzliche features/Funktionen, ohne zu brechen, sich selbst oder werden von Grund auf neu geschrieben.

Schauen wir uns die CodePen-Beispiel wieder.

Finden Sie den Stift, indem Sie iamryanyu (@iamryanyu) auf CodePen.

Die Schaltfläche in der Kopfzeile und in der main-Sektion sehen sich sehr ähnlich, neben der 3D-Effekt. In diesem Fall, anstatt zwei verschiedene Sätze von Tasten mit völlig unterschiedlichen code-Basen, konnten wir verlängern die nur-Text-Schaltfläche Stil, indem Sie nur den 3D-Effekt.

Es geht das gleiche mit dem button in der Fußzeile. Auch wenn der button hat eine andere Farbe und Größe, wir konnten einfach erweitern, indem Sie hinzufügen oder entfernen von neuen oder anderen features.

Credit: Nana Jeon

Wartbar

Wahrscheinlich eine der größten Herausforderungen für die meisten front-enders ist zu verstehen, CSS, geschrieben von anderen Menschen, oder unsere Vergangenheit selbst. Wir manchmal verbringen Sie mehr Zeit mit dem Versuch zu verstehen, den vorhandenen code als Zugabe schrecklich geschriebenen neuen code.

Das Problem kommt in der Regel aus:

  • keine Kommentare, was auch immer
  • over-engineering
  • keine einzige Quelle der Wahrheit
  • keine Kodierung standard/best practice angesehen
  • oder alle oben
Credit: Nana Jeon

Mit SEM und BIO, wir können definitiv verbessern den code und speichern Sie die anderen (uns eingeschlossen!) vom chaotischen, wartbaren code.

BIO

Es gibt viele tolle Techniken gibt, um zu verbessern, wie wir schreiben, CSS, und aus meiner Erfahrung, ich fand die folgenden drei Techniken, make-up, die BIO Akronym arbeiten sehr gut zusammen

  • BEM
  • ITCSS
  • OOCSS
Credit: Nana Jeon

Viele Entwickler/Ingenieure schon wissen, diese berühmten Techniken, aber ich möchte gehen Sie durch jeden von Ihnen und sprechen über die Art, wie ich mit diesen Techniken.

BEM

BEM ist sehr beliebt Methodik und es hat geholfen, uns deutlich zu verbessern, die Art, wie wir denken über CSS und Sass/Less.

BEM steht für:

  • Block
  • Element
  • Modifier
Credit: Nana Jeon

Als schlechtes Beispiel oben zeigt, tendieren wir dazu, zu Häufig die macht des Sass/Less und fallen in Schachteln-die Hölle. Aber mit BEM, haben wir eine sehr niedrige CSS-Spezifität durch die Aufrechterhaltung der Arten in einem (oder zwei) Ebenen verschachteln.

Wenn Sie erlebt habe, die irgendwelche Schlachten, Kämpfe höheren CSS-Spezifität, werden Sie wissen, wie schmerzhaft es ist ein Gewinner.

Gehen wir zurück zu unserem Beispiel, das HTML-markup sieht wie folgt aus:

<div class=”o-grid”>
<div class=”o-grid__item o-grid – __ – header”>

</div>
<div class=”o-grid__item o-grid “__main”>

</div>
<div class=”o-grid__item o-grid – __ – sidebar”>

</div>
<div class=”o-grid__item o-grid – __ – footer”>

</div>
</div>

Das Beispiel besteht aus:

  • block: .o-grid
  • Elemente: .o-grid__item .o-grid – __ – header .o-grid ” __main .o-grid – __ – Seitenleiste .o-grid__Fußzeile

Da BEM bietet eine Namenskonvention, betont einzigartige Klassen, wir müssen nicht gehen in die Tiefe Verschachtelung wie:

.o-grid {
.o-grid__item {

}
}

Stattdessen können wir definieren die Stile, die es mit weniger Ebenen:

.o-grid__item {

}

Das ist der größte Vorteil der BEM; Senkung der CSS-Spezifität, die verbessert die gesamte CSS-Codierung Effizienz und Erfahrung.

Ein Problem sehe ich noch gelegentlich sogar mit BEM, ist die schlechte Namensgebung. Wenn Sie nicht zahlen genug Aufmerksamkeit, Sie können wind-up mit einer wirklich langen Klasse nam wie:

/* Huch! */
.o-grid__item-search-button-text-svg-icon {

}

Wenn Sie eine Klasse erstellen-name, gehen Sie mit dem core-Konzept von BEM: die Komponente ist ein block und alle Elemente im inneren sind individuell an den block.

Aus unserem Beispiel wieder, die ich benannt .o-grid – __ – Formular statt .o-grid__item-form, weil die form selbst ist ein separates Bauteil und muss nicht mit gebunden werden und ein Kind von o-grid__item.

Auch, um effizienter zu Steuern Stile, ich habe eine weitere Klasse, name o-grid – __ – header zusammen mit o-grid__item zu erweitern, die Stile. Außerdem den button enthält BEM-Stil-Klassen, die mit dem Ansatz von OOCSS, die wir berühren uns auf weiter.

OOCSS

Wie wir bereits besprochen haben, es gibt viele tolle CSS-Methoden und Strategien helfen uns bei der Verbesserung der Art, wie wir schreiben von CSS. Allerdings sehe ich eine Menge Leute zwingen sich zu entscheiden, auf eine Methode zu verwenden, aus dem Bündel heraus.

Aus meiner Erfahrung, die Kombination von Methoden kann tatsächlich erhöhen Sie Ihren nutzen durch die Kombination der beste aus mehreren Welten. Zum Beispiel, ich persönlich habe festgestellt, dass BEM und OOCSS arbeiten sehr gut zusammen.

OOCSS steht für Object Oriented CSS und Sie können sich vorstellen, dass es funktioniert wie Lego-Blöcke:

Quelle: Flickr

OOCSS erstellt für jedes einzelne Teil separat und dann konstruiert Sie zusammen, um die Möglichkeit, Komponenten zu erstellen.

In unserem Beispiel habe ich Schaltflächen mit dem OOCSS Namenskonvention:

  • .c-btn
  • .c-btn-gelb
  • .c-btn-blau
  • .c-btn–3d
  • .c-btn-groß

Zum Rendern der gelben Schaltfläche suchen in unserem Beispiel-header, kombinieren wir diese Klassen:

  • .c-btn
  • .c-btn-gelb

Wenn wir wollen, um die 3D-Schaltfläche in der main-Sektion fügen wir in der 3D-Klasse .c-btn–3d und nennen es einen Tag.

Und für die Blaue Schaltfläche in der Fußzeile, können wir wechseln die gelb-Modifizierer blau zusammen mit der großen modifier. Wie Sie sehen können, die Taste ist nicht abhängig von der header-block geben uns mehr Flexibilität, wie wir Sie verwenden und wiederverwenden von Komponenten. Und, by doing so, können wir konstruieren die Tasten, ohne Auswirkungen auf andere Komponenten oder mustern, indem man den Vorteil, leicht zu erweitern, neue Layout-Funktion, wie alternative Farben und Formen.

Hier Beispiel für ein button-Sammlung erstellt mit OOCSS zu erstellen, die Variationen:

Finden Sie die Stift-Moderner Button-Sammlung von Ryan Yu (@iamryanyu) auf CodePen.

Auf der Oberseite des BEM und OOCSS, mit Hilfe von ITCSS, können wir der weiteren Verbesserung unserer CSS-Strategie. Schauen wir uns die Methode weiter.

ITCSS

ITCSS steht für Umgekehrtes Dreieck CSS und es hilft bei der Organisation von CSS durch die Anwendung einer Struktur, die bestimmt, wie bestimmte man mit einer bestimmten Komponente. Lubos Kmeťko geschrieben hat, einen hervorragenden überblick über ITCSS zu Lesen lohnt.

Sie können sehen, wie ich ITCSS zu verwenden, durch die Spaltung von Stilen durch gruppierte Ebenen der Spezifität in diesem Gist.

Basierend auf diesem Beispiel können Sie sehen, wie ich den Namen von Komponenten durch hinzufügen eines namespace der Klasse. So zum Beispiel eine “button” – Komponente vorangestellt ist ein “c” (.c-Taste) zur Angabe der Komponente, status und verhindern, dass es fälschlicherweise als ein anderes Element. Damit jeder an dem Projekt arbeitet, kennt die Funktion der jeweiligen Klasse und wie ändern sich seine Eigenschaften beeinflussen könnte, in anderen Bereichen.

Hier ist eine visuelle, die zeigt, alle ITCSS Ebenen:

Wir gehen durch jeden Abschnitt.

Einstellungen

Einstellungen sind in der Regel eine Sammlung von Variablen, die nicht zum generieren von CSS, aber angewendet werden, um die Klassen. Einige Beispiele sind:

  • Base
  • Farbe
  • Typografie
  • Animation

Tools

Tools auch nicht produzieren keine CSS noch und sind in der Regel Präprozessor-Funktionen für das schreiben oder erweitern Sie die Eigenschaften auf Klassen:

  • Funktionen
  • Platzhalter
  • Mixins in Verbindung
  • Media queries

Anbieter

Anbieter sind Drittanbieter-Stile, die verwendet werden auf ein Projekt. Denke an Sachen wie reset.css, normalisieren.css, oder auch Foundation und Bootstrap.

Der Grund für diese Stile gibt, die höher in der Struktur ist, so können wir diese überschreiben, wenn nötig. Wie Sie sich erinnern können, wenn Sie die gleiche Klasse ist zweimal genannt, die cascade machen die Eigenschaften der zweiten Instanz, vorausgesetzt, die Eigenschaften sind genau die gleichen:

.btn–große {
padding: 3em;
}

/* Diese gewinnt man aus */
.btn–große {
padding: 5em;
}

Nur für die Randbemerkung, in Sass, die Sie verwenden können, ~ auf den node_modules-Ordner, so dass Sie in der Lage sind, zu importieren Stil Vermögenswerte aus der Quelle, anstatt Sie in Ihre eigenen Verzeichnisse.

@import ‘~modern-normalize/moderne-normalisieren’;
Objekte

Objekte (namespace: o-) werden verwendet für die design-patterns, wie layouts, in denen Elemente werden angeordnet, anstatt dekoriert. Objekt-Klassen werden verwendet auf allen Seiten, so dass, wenn Sie änderungen an der Objekt-Klassen, sollten Sie sehr vorsichtig sein, denn alle änderungen werden auf jeder und jede Seite der gesamten website.

Die häufigsten Objekt-Klassen, die ich benutze sind:

  • .a-Seite: die äußeren container, die in der Regel enthält max-width: 100vw und overflow: hidden.
  • .o-main: der äußere Behälter für das main-Gebiet.
  • .o-container: der äußere container für Komponenten und in der Regel bietet eine Feste Breite.
  • .o – – – Inhalt: im Fall, wenn keine extra Konfiguration notwendig ist für den eigentlichen content-Bereich.
  • .o-grid: wenn ein grid-layout mit unterschiedlicher Anzahl von Spalten, erforderlich sind.

Verwenden Sie keine anderen Objektklassen? Wenn ja, bitte mit mir teilen. 😃

Elemente

Elemente (namespace: e-) sind die native HTML-Elemente, die wir würde nicht Stil basiert auf dem class-Namen. Zum Beispiel, wir liefern sollte, die Standard-Formatvorlagen zu den <a> – element statt .Klasse link.

// Dies für den Standard-link-Stil
{
text-decoration: none;

&:hover {
background-color: blue;
Farbe: weiß;
}
}

// Bieten nicht die Standard-link-Stil zu einer Klasse
.link {
text-decoration: none;

&:hover {
background-color: blue;
Farbe: weiß;
}
}

Es ist da, vor allem in einem CMS wie WordPress, Sie würden nicht wollen, um eine Klasse jedes einzelne mal, wenn Sie verwenden möchten, eine Verknüpfung im Inhalt. Daher bieten wir eine Standard-Stil, um das <a> – element ohne Klasse, der link wird immer noch gut aussehende Stile.

Komponenten

Eine Komponente (Namensraum: c-) ist ein kleines feature, das macht einen Teil der website. Denke, buttons, Akkordeons, Schieber, modale Dialoge, etc. Jede Komponente ist voll funktionsfähig, durch sich selbst und verlässt sich nicht auf andere Komponenten. Diese Tatsache sollte berücksichtigt werden, wenn Sie den Namen der Komponente.

Zum Beispiel der button in der Haupt-Abschnitt aus dem Beispiel oben sollte nicht aufgerufen werden .c-main-button, denn wichtigsten Bereiche es in der main-Sektion und die Grenzen der it-Einsatz in anderen Orten, wie eine sidebar. So etwas wie .c-btn ist viel schöner, weil die Schaltfläche nicht mehr gebunden, andere spezifische Abschnitte der Seite.

Wenn Sie brauchen keine extra-features, Sie können immer erweitern Sie die Eigenschaften mit einem BEM-Modifizierer (das kombinieren der Kräfte!) oder verwenden Sie Rahmen, die kommen in ein bisschen.

Muster

Viele Entwickler/Ingenieure verwenden die Begriffe Komponente und Muster Synonym und das ist völlig in Ordnung, wenn Sie mehr sind komfortabel mit. Es ist nur meine Vorliebe zum trennen dieser beiden Begriffe.

Für eine Allgemeine Faustregel, denke ich an ein Muster (namespace: p) als eine Kombination von Komponenten, sondern in einer Weise, die ist nicht skalierbar.

Zum Beispiel halte ich das Akkordeon als eine Komponente. Es ist skalierbar und wiederverwendbar auf seine eigene, was bedeutet, dass es kann verwendet werden, in anderen teilen der website, ohne irgendwelche änderungen, auch wenn das Akkordeon enthalten würde, andere Komponenten wie Schaltflächen.

Auf der anderen Seite, der header, zum Beispiel, würde ein Muster sein, weil es nicht skalierbar (die header kann nicht verwendet werden, im content oder sidebar Bereich) und enthält auch andere Komponenten, wie buttons, Akkordeons, Menüs, logos, Suchformular, etc.

Umfang

Seien Sie gewarnt; ich verwende nur den Rahmen, wenn es absolut notwendig ist. Der Zweck, der Geltungsbereich (namespace: s-) ist, um uns die höchste Spezifität, so können wir überschreiben alle Stile, die für einen bestimmten Zweck.

Denken Sie daran, Wenn Sie finden, sich selbst mit dem Umfang der Klasse viele Male, die Sie werden könnte, schreiben die Stile, die sind zu spezifisch und sollten Sie überlegen, umgestalten CSS-Struktur.

Hier ist ein einfaches Beispiel für die Verwendung des scope-Klasse .s-Haus.

.c-Akkordeon {
.s-home & {
// Ändern der Hintergrundfarbe, der speziell auf der homepage
background-color: tomato;
}
}

Als seitliche Anmerkung, das oben genannte Beispiel könnte tatsächlich umgestaltet werden, indem Sie einen Modifikator auf das Akkordeon (zB, .c-Akkordeon–bg-Tomate) statt mit dem Umfang der Klasse. Das wäre ein viel mehr erweiterbare Art und Weise des Schreibens und damit die Komponente mehr modular.

Extra-Namespace

Auf der Oberseite der namespaces, die wir oben besprochen, gibt es zwei weitere, die ich oft benutze:

  • ist-: dieses zeigt den Stand der block oder das element. Die am häufigsten verwendeten Klasse ist .ist-aktiv, wie der aktive link in der navigation.
  • js-: dies bedeutet, dass das jeweilige element gebunden ist, JavaScript-Ereignisse. Zum Beispiel, js-Menü-klicken zeigt an, dass das element gebunden ist, um das click-Ereignis.

Linting

Schließlich machen die Regeln .stylelint und .eslint können erheblich verbessern die code-Qualität.

In der frontend-workflow, ich Mach es nicht als eine Empfehlung; ich mache es zwingend erforderlich, so dass nicht von den Regeln nicht genehmigt zu bekommen.

Auf diese Weise können wir sicherstellen, dass die Codierung Qualität bleibt bei seiner besten Seite und sorgen für eine bessere code an andere Entwickler, darunter Ihre Zukunft selbst.

In Aktion

In diesem Abschnitt möchte ich diskutieren, wie wir könnten, SEM und BIO. Ich habe ein einfaches, praktisches Beispiel um uns begann:

Finden Sie den Stift, indem Sie iamryanyu (@iamryanyu) auf CodePen.

Die wichtigsten Praxis-Beispiel ist der Bau eines Akkordeons, die verwendet werden können, wie:

  • ein normales Akkordeon, aber mit verschiedenen Farb-Themen in der main-Sektion
  • ein Menü in der sidebar
  • ein blockieren der Anzeige von social-media-Symbole in der Fußzeile

Was wir erreichen ist eine Komponente, die ist:

  • Skalierbar: es können Hinzugefügt werden, in jedem Teil der Seite ohne jegliche coding-änderungen
  • Erweiterbar: es können unterschiedliche Funktionen mit den Funktionen der core unverändert
  • Wartbar: wie ist es organisiert in einer Weise, die Sinn macht

Zu erreichen, SEM, BIO verwendet worden, einschließlich:

  • BEM: .c-Akkordeon-block-und Kinder-Elemente, die auch verwendet Modifikatoren, z.B., .c-Akkordeon–Licht und .c-Akkordeon-dunkel
  • ITCSS: Die Reihenfolge/Sortierung der SASS-Dateien verarbeitet die CSS-Spezifität auch ganz gut. Zum Beispiel die Akkordeon-button in die Seitenleiste enthält class=”c-Akkordeon – __ – trigger p-sidebar-Menü__button”, der das Muster (p-) überschreibt die Komponente (c-) ohne Probleme.
  • OOCSS: das Akkordeon ist konstruiert mit mehreren Klassen, z.B. class=”c-Akkordeon c-Akkordeon-dunkle c-Akkordeon-Einzel -” das schafft ein dunkles Thema mit der Eröffnung eines single-panel nur jedes mal.

Abschließende Gedanken

Ich habe diese Methode für fast alle meine Projekte, einschließlich der Universitäten, staatlichen Einrichtungen, kommerziellen Händlern und vielen anderen websites. In jedem Fall, ich habe erfolgreich alle Projekte für die Kunden (fast keine Probleme bei der client-Zulassung Bühne und ausgeliefert auf Zeit); dieser Ansatz hat sich für mich sehr gut bisher und ich denke, es könnte für Sie als gut.

Dass gesagt wird, die Technologien immer ändern (vor allem auf dem front-end) und ich bin mehr als glücklich, zu hören und diskutieren Sie Ihre Ideen/Konzepte/Strategien, die für Sie gearbeitet. Lasst mich in den Kommentaren wissen!

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!