Die Architektur des umgekehrten Dreiecks: Verwalten großer CSS-Projekte

Ihnen wird eine kleine Aufgabe zugewiesen, um hier und da einige kleine Stylingprobleme zu beheben. Sie haben die richtigen CSS-Regeln gefunden, um das Update anzuwenden. Sie können diese Regeln also schnell am Ende Ihrer CSS-Datei ablegen, Ihre Änderungen übernehmen und dann mit wichtigeren Dingen fortfahren.

Im Laufe der Zeit passiert dies ein paar Mal und bevor Sie es wissen, besteht der „Ende“ Ihrer CSS-Datei aus ein paar hundert Codezeilen, die niemand versteht und die niemand zu entfernen wagt, da dies unweigerlich zu Problemen führt.

Erkennen Sie dieses Szenario, weil Sie dies entweder selbst getan haben oder Kollegen dies gesehen haben? Lesen Sie weiter und versprechen Sie sich, dass Sie dies nie wieder tun werden, da dies eine einfachere Möglichkeit ist, Ihre CSS-Dateien zu verwalten.

Einführung in die Architektur des umgekehrten Dreiecks

Die Inverted Triangle-Architektur, auch als ITCSS bekannt, ist eine Methode zur effektivsten und am wenigsten verschwenderischen Strukturierung Ihres CSS.

ITCSS wurde zuerst von Harry Roberts eingeführt und kann am besten durch ein umgedrehtes, geschichtetes Dreieck visualisiert werden. ITCSS definiert die gemeinsam genutzten CSS-Regeln eines Projekts auf logische und vernünftige Weise und bietet gleichzeitig ein solides Maß an Kapselung und Entkopplung, das verhindert, dass sich nicht gemeinsam genutzte CSS-Regeln gegenseitig stören.

ITCSS ist sehr flexibel, da Sie nicht gezwungen sind, bestimmte Methoden für Namenskonventionen wie SMACCS, OOCSS oder BEM zu verwenden.

Die Grundsätze

ITCSS strukturiert Ihr gesamtes CSS-Projekt nach diesen drei Prinzipien:

  1. Generisch bis explizit

    Wir beginnen mit den allgemeinsten, einfachsten und einfachsten Stilen. Dies können Schriftarteinstellungen oder beispielsweise Farbvariablen sein, wenn Sie SCSS verwenden.

  2. Niedrige bis hohe Spezifität

    Die Selektoren mit der niedrigsten Spezifität werden zu Beginn Ihres Projekts angezeigt. Die Spezifität nimmt stetig zu. Auf diese Weise vermeiden wir Spezifitätskonflikte und Spezifitätsüberschreibungen !important.

  3. Weitreichend bis lokalisiert

    Selektoren zu Beginn unseres Projekts wirken sich auf viele DOM-Elemente aus, z. B. das Zurücksetzen von Stilen durch Ihren Browser, während Selektoren später in unserem Projekt sehr lokalisiert werden, z. B. bestimmte Stile für eine Komponente.

Die Dreiecksebenen

Wenn wir uns an die oben genannten Prinzipien halten, müssen wir unser CSS in Ebenen aufteilen. Jede Ebene muss an einer Stelle eingeführt werden, die jedes der Kriterien erfüllt.

Es kommt häufig vor, dass CSS beispielsweise nach typografischen Stilen, Formularstilen und Stilen für eine bestimmte Komponente gruppiert wird. Diese Gruppen werden häufig nicht in der effizientesten Reihenfolge importiert, was zu Vererbungs- oder Spezifitätsproblemen führt.

In ITCSS ist jede Schicht eine logische Folge der letzten. Es nimmt an Spezifität zu, verringert die Reichweite und wird expliziter. Dies bedeutet, dass unser CSS einfacher zu skalieren ist, da wir nur das hinzufügen, was bereits vorhanden ist, und nicht das überschreiben, was zuvor geschrieben wurde.

Ein weiterer großer Vorteil dieser Struktur ist, dass jeder immer weiß, wo bestimmte CSS-Regeln zu finden sind, wenn sie logisch platziert sind. Dadurch wird vermieden, dass Benutzer ihre CSS-Regeln am Ende der Datei ablegen.

Harry Roberts, der Schöpfer von ITCSS, legte sieben Schichten an. Er bestellte sie wie folgt:

  1. die Einstellungen

    Wenn Sie einen Präprozessor wie SCSS verwenden, ist dies Ihr Ausgangspunkt. In dieser Ebene definieren Sie Ihre Variablen.

  2. Werkzeuge

    Diese Ebene kann für Ihre Werkzeuge verwendet werden. Denken Sie an Mixins und Funktionen, die global verfügbar sein müssen. Wenn dies nicht erforderlich ist, platzieren Sie sie einfach in der Ebene, in der sie benötigt werden.

  3. Generisch

    In dieser Ebene beherbergen wir alle sehr hochrangigen, weitreichenden Stile. Diese Ebene ist in allen Projekten häufig dieselbe, da sie Dinge wie Normalize.css, CSS-Resets und beispielsweise Regeln für die Boxgröße enthält.

  4. Elemente

    In dieser Ebene setzen wir Stile für nackte, nicht klassifizierte HTML-Elemente. Sie können beispielsweise an Unterstreichungen für Anker beim Schweben oder an Schriftgrößen für die verschiedenen Überschriften denken.

  5. Objekte

    In der Objektebene formatieren wir die ersten Elemente mit Klassen. Denken Sie an Ihre Container, Wrapper oder Reihen. Hier können Sie auch Ihr Raster definieren.

  6. Komponenten

    Die Komponentenebene ist der Ort, an dem der größte Teil der Styling-Magie stattfindet, da Sie hier Ihre UI-Elemente stylen werden. In komponentenbasierten Frameworks wie Angular, Vue oder React ist dies die Ebene, auf der Sie Ihr Styling für jede Komponente importieren, wenn Sie sie nicht direkt in Ihre Komponente aufnehmen.

  7. Trümpfe

    Die Trumpfschicht ist die schmutzige Schicht. Selbst nachdem Sie Ihr Styling nach den ITCSS-Prinzipien strukturiert haben, kann es vorkommen, dass Sie !importantbeispielsweise Styling von Drittanbietern überschreiben müssen. Tun Sie dies in dieser Ebene, da dies die spezifischste, lokalste und expliziteste Ebene ist.

Das Endergebnis

Nachdem ich die Ebenen erklärt habe, ist es Zeit zu untersuchen, wie ein einfaches Endergebnis möglicherweise aussehen könnte.

// [email protected] "globals";@import "branding";
// [email protected] "mixins";
// [email protected] "normalize";
// [email protected] "fonts";@import "form";
// [email protected] "grid";@import "wrappers";
// [email protected] "header";@import "sidebar";@import "carousel";@import "card";
// [email protected] "overrides";

Fazit

So wie ITCSS Sie nicht zwingt, bestimmte Namenskonventionen zu verwenden, zwingt es Sie nicht, alle Ebenen zu verwenden. Verwenden Sie eine Ebenenstruktur, die für Sie am besten geeignet ist, während Sie die ITCSS-Prinzipien von generisch bis explizit, von niedriger bis hoher Spezifität und weitreichend bis lokal beibehalten beibehalten.

Wenn Sie feststellen, dass Sie Stile überschreiben müssen, bedeutet dies fast immer, dass Ihre Struktur ineffizient ist. Wenn Sie mehr darüber erfahren möchten, empfehle ich Ihnen, dieses Video anzuschauen:

Auf der Suche nach einem Job in Amsterdam?

Ich arbeite für Sytac als Senior-Front-End-Entwickler und wir suchen Medior / Senior-Entwickler, die sich auf Angular, React, Java oder Scala spezialisiert haben. Sytac ist ein ehrgeiziges Beratungsunternehmen in den Niederlanden, das für viele renommierte Unternehmen in den Bereichen Banken, Fluggesellschaften, Behörden und Einzelhandel tätig ist.

Wenn Sie der Meinung sind, dass Sie das Zeug dazu haben, mit den Besten zusammenzuarbeiten, senden Sie mir eine E-Mail an luuk [dot] gruijs [at] sytac [dot] io, und ich würde Ihnen gerne mehr erzählen.