Verwalten Sie große CSS-Projekte mit ITCSS
Harry Roberts wird bei sprechen Bangalore generieren am 2. Dezember. Verpassen Sie nicht sein Gespräch CSS umgestalten, ohne den Verstand zu verlieren , in dem er seine Tipps und Techniken für den Umgang mit Legacy-CSS teilt. Buchen Sie jetzt Gründungsmitglied von Generate werden und 50% Rabatt auf alle zukünftigen Generate-Konferenzen weltweit erhalten!
Die CSS-Architektur scheint derzeit etwas in Mode zu sein. Es ist etwas, das Sie zweifellos im letzten Jahr oder so mehrfach erwähnt haben, und das aus gutem Grund: Benutzeroberflächen (und die Teams, die sie aufbauen) werden größer und komplizierter als je zuvor.
Es gibt eine Reihe von Aspekten von CSS, die es problematisch machen. Es ist deklarativ, was bedeutet, dass es keine Logik oder keinen Kontrollfluss gibt, um anderen Entwicklern viel über den Status oder die Konstruktion des Projekts zu erzählen. Es arbeitet in einem globalen Namespace, was bedeutet, dass wir Kollisionen, undichte Stile und versehentliche Regressionen erhalten. Es nutzt die Vererbung und macht alles etwas voneinander abhängig und spröde. Schließlich kann das unvermeidbare Spezifitätsmodell Probleme verursachen, wenn Selektoren gegeneinander um die Bekanntheit kämpfen.
Dies sind alles Probleme an und für sich, aber wenn man in einem vernünftigen Maßstab arbeitet, werden sie entweder direkt offensichtlicher oder die Wahrscheinlichkeit, auf solche Probleme zu stoßen, ist statistisch viel höher. Geben Sie eine CSS-Architektur ein: eine Möglichkeit, Ihr CSS für große und langfristige Projekte zu planen und zu strukturieren.
Einführung in ITCSS
Die Architektur, die wir uns heute ansehen werden, heißt ITCSS - 'Inverted Triangle CSS'. Dies ist eine Methode, bei der Sie Ihr gesamtes CSS-Projekt als geschichtetes, umgedrehtes Dreieck visualisieren. Diese hierarchische Form stellt ein Modell dar, mit dem Sie Ihr CSS auf die effektivste und am wenigsten verschwenderische Weise bestellen können. Lass uns eintauchen!
An ITCSS arbeite ich seit ungefähr vier Jahren in der einen oder anderen Form. Es ist kein Zufall, dass ich in den letzten vier Jahren ausschließlich an digitalen Produkten gearbeitet habe: große, lang laufende Projekte, bei denen ganze Ingenieurteams monatelang an derselben Codebasis arbeiten.
In dieser Art von Umgebung (Vermächtnis, neue Funktionen, zahlreiche Mitwirkende, hohe Geschwindigkeit, aufgelaufene technische Schulden, widersprüchliche Bedenken der Stakeholder) ist bei dem von uns geschriebenen Code viel mehr Sorgfalt und Struktur erforderlich. Deshalb habe ich ITCSS erfunden. um Entwicklern bei der Arbeit an diesen großen Projekten zu helfen, ihr CSS besser zu organisieren, zu skalieren und zu verwalten.
Ziel von ITCSS ist es, der Art und Weise, wie wir unser CSS schreiben, ein Maß an Formalität und Struktur zu verleihen. Es ist keine große Abweichung von der Norm, was bedeutet, dass der Übergang zu ITCSS nicht allzu schwierig sein sollte. Wenn die meisten Architekturen und Ansätze versuchen, die lästigen Aspekte von CSS zu vermeiden, werden sie von ITCSS berücksichtigt, gezähmt und zu unserem Vorteil eingesetzt. ITCSS definiert die gemeinsamen Aspekte eines Projekts auf logische und vernünftige Weise und bietet gleichzeitig ein solides Maß an Kapselung und Entkopplung, das verhindert, dass sich die nicht gemeinsam genutzten Aspekte gegenseitig stören.
ITCSS ist auch unglaublich flexibel. Es ist kompatibel mit Aspekten anderer Methoden wie SMACSS, OOCSS und sogar BEM. Es kann je nach Projekt je nach Projekt erweitert oder reduziert werden. Es funktioniert mit oder ohne Präprozessor und erzwingt keine spezifischen Namenskonventionen (obwohl ich immer empfehlen würde, eine zu verwenden). Diese Flexibilität bedeutet, dass ITCSS für jede Projektgröße und -art verwendet werden kann.
Voraussetzungen
Bevor wir uns mit den Einzelheiten befassen, gibt es einige Voraussetzungen für die Arbeit mit ITCSS. All dies wird zur Standardpraxis für jeden modernen UI-Entwickler. Erstens keine IDs in CSS. IDs sind Schwergewichte der Spezifität, und ihre Verwendung wird unsere Spezifität völlig aus dem Gleichgewicht bringen.
Zweitens müssen Sie an einer komponentenbasierten UI-Architektur arbeiten. Sie erstellen nicht mehr das Modell 'Seiten', sondern das Muster 'Widgets / Module / Komponenten' (ITCSS bezeichnet diese als 'Komponenten'). Sie erstellen diskrete, in sich geschlossene Teile der Benutzeroberfläche als wiederverwendbare Komponenten.
Schließlich erfordert ITCSS, dass Sie für eine klassenbasierte Architektur sind. Sie haben keine Angst davor, Ihrem HTML-Code Klassen hinzuzufügen. Sie glauben nicht, dass 'weniger Markup' und 'sauberes Markup' dasselbe sind. und Sie verstehen, dass das Binden an Klassen anstelle von bloßen HTML-Elementen eine robustere und skalierbarere Architektur bietet.
Schlüsselkennzahlen
ITCSS ist eine vollständig verwaltete Architektur, dh Sie erfahren, wie Sie Ihr gesamtes CSS-Projekt erstellen. Sie erfahren beispielsweise nicht nur, wie Sie Ihre Komponenten erstellen, sondern können auch alles von der Sass-Architektur über die Quellreihenfolge, typografische Stile auf niedriger Ebene bis hin zu Themen und vielem mehr verwalten.
ITCSS ordnet Ihr gesamtes CSS-Projekt nach drei Schlüsselkennzahlen. Wir werden uns diese jetzt ansehen.
01. Generisch bis explizit
Wir beginnen mit den allgemeinsten, unauffälligsten und unauffälligsten Stilen auf niedriger Ebene und gehen schließlich zu expliziteren und spezifischeren Regeln über, während wir uns durch das Projekt bewegen. Wir könnten mit dem Zurücksetzen beginnen und dann zu etwas umfangreicheren Regeln wie h1–6 {} übergehen, bis hin zu extrem expliziten Regeln wie .text-center {}.
02. Niedrige Spezifität bis hohe Spezifität
Die Selektoren mit der niedrigsten Spezifität erscheinen zu Beginn, wobei die Spezifität im Verlauf des Projekts stetig zunimmt. Wir möchten sicherstellen, dass wir so viele Spezifitätskriege wie möglich vermeiden. Deshalb versuchen wir, keine Selektoren mit höherer Spezifität vor Selektoren mit niedrigerer Spezifität zu schreiben. Wir fügen immer Spezifität in die gleiche Richtung hinzu, um Konflikte zu vermeiden.
03. Weitreichend bis lokalisiert
Selektoren zu Beginn des Projekts wirken sich auf einen Großteil des DOM aus, wobei diese Reichweite im Verlauf der Codebasis zunehmend abnimmt. Wir möchten das DOM 'passieren', indem wir Regeln schreiben, die sich immer weniger darauf auswirken.
Wir könnten damit beginnen, die Ränder und Auffüllungen von allem abzuwischen, dann könnten wir jeden Elementtyp formatieren, dann auf jeden Elementtyp eingrenzen, auf den eine bestimmte Klasse angewendet wird, und so weiter. Es ist diese allmähliche Verengung der Reichweite, die uns die Dreiecksform gibt.
Die Bestellung unserer Projekte nach diesen Schlüsselkennzahlen hat mehrere Vorteile. Wir können beginnen, globale und weitreichende Stile viel effektiver und effizienter zu teilen, wir verringern die Wahrscheinlichkeit von Spezifitätsproblemen erheblich und wir schreiben CSS in einer logischen und progressiven Reihenfolge. Dies bedeutet eine größere Erweiterbarkeit und weniger Redundanz, was wiederum weniger Abfall und viel kleinere Dateigrößen bedeutet.
Schichten
Wir können uns an diese Metriken halten, indem wir unser CSS in mehrere Abschnitte oder 'Ebenen' aufteilen. Jede Ebene muss an einer Stelle eingeführt werden, die jedes der Kriterien erfüllt. Die meisten Menschen (und Architekturen) versuchen, CSS-Projekte in thematische Gruppen aufzuteilen: Hier sind unsere typografischen Stile, hier sind unsere Formularstile, hier sind unsere Bildergalerie-Stile. Der Nachteil dabei ist, dass es nicht sehr sympathisch ist, wie CSS tatsächlich funktioniert, und CSS nicht so bestellt, dass die Kaskade, Vererbung oder Spezifität am besten genutzt, gezähmt oder ausgenutzt wird.
In ITCSS ist jede Schicht eine logische Folge der letzten. Es nimmt an Spezifität zu, wird expliziter und zielgerichteter und verringert die Reichweite der verwendeten Selektoren. Dies bedeutet, dass unser CSS von Natur aus einfacher zu skalieren ist, da wir es in einer Reihenfolge schreiben, die immer nur zu dem beiträgt, was zuvor geschrieben wurde. Wir verschwenden keine Zeit damit, überbewertetes CSS, das zuvor geschrieben wurde, rückgängig zu machen oder zu überschreiben.
Es bedeutet auch, dass jedes Ding und jede Art von Ding seinen eigenen konsistenten, vorhersehbaren Ort zum Leben hat. Dies vereinfacht das Suchen und Hinzufügen von Stilen erheblich. Dies ist besonders nützlich, wenn mehrere Entwickler zur Codebasis beitragen.
ITCSS hat standardmäßig sieben Ebenen. Wir werden uns diese nun nacheinander ansehen.
01. Einstellungen
Wenn Sie einen Präprozessor verwenden, beginnen Sie hier. Dies enthält alle globalen Einstellungen für Ihr Projekt. Ich möchte das Wort global hervorheben - diese Ebene sollte nur Einstellungen enthalten, auf die von überall aus zugegriffen werden muss. Einstellungen wie $ Heading-Size-1 sollten im Teil Headings definiert werden. Dies stellt sicher, dass diese Ebene schön und schlank bleibt, und bedeutet, dass die meisten Einstellungen neben dem Code gefunden werden, der sie verwendet, was das Auffinden von Dingen erheblich vereinfacht.
Beispiele für globale Einstellungen sind beispielsweise die Basisschriftgröße, Farbpaletten, die Konfiguration (z. B. $ environment: dev;) usw.
02. Werkzeuge
Die nächste Ebene enthält Ihre weltweit verfügbaren Werkzeuge - nämlich Mixins und Funktionen. Jedes Mixin oder jede Funktion, auf die nicht global zugegriffen werden muss, sollte zu dem Teil gehören, auf den es sich bezieht. Die Ebene 'Extras' folgt auf die Ebene 'Einstellungen', da für ein Mixin möglicherweise eine der globalen Einstellungen als Standardparameter erforderlich ist. Beispiele für globale Tools können Farbverlaufsmischungen, Schriftgrößengrößenmischungen usw. sein.
03. Generisch
Die generische Ebene ist die erste, die tatsächlich CSS erzeugt. Es beherbergt sehr hochrangige, weitreichende Stile. Diese Ebene wird selten geändert und ist normalerweise für alle Projekte, an denen Sie arbeiten, gleich. Es enthält Dinge wie Normalize.css, globale Regeln für die Boxgröße, CSS-Resets und so weiter. Die generische Ebene wirkt sich auf einen Großteil des DOM aus, daher ist sie im Triangle-Modell schön breit und tritt sehr früh auf.
04. Elemente
Dies sind nackte, nicht klassifizierte HTML-Elemente. Wie sieht ein h1 ohne Klasse aus? Wie sieht ein a ohne Klasse aus? Die Elements-Ebene wird nur an bloße HTML-Element- (oder Typ-) Selektoren gebunden. Es ist etwas expliziter als in der vorherigen Ebene, dass wir jetzt sagen: 'Mache jedes h1 so groß' oder 'mache jedes a zu einer bestimmten Farbe'. Es ist immer noch eine Schicht mit sehr geringer Spezifität, wirkt sich jedoch etwas weniger auf das DOM aus und ist etwas eigensinniger, daher seine Position im Dreieck.
Die Elements-Ebene ist normalerweise die letzte, in der wir bloße, elementbasierte Selektoren finden, und wird nach der Ersteinrichtung sehr selten hinzugefügt oder geändert. Sobald wir Stile auf Elementebene definiert haben, sollten alle Ergänzungen und Abweichungen mithilfe von Klassen implementiert werden.
05. Objekte
Benutzer von OOCSS sind mit dem Konzept von Objekten vertraut. Dies ist die erste Ebene, in der wir klassenbasierte Selektoren finden. Diese befassen sich mit der Gestaltung nichtkosmetischer Designmuster oder „Objekte“. Objekte können von etwas so Einfachem wie einem .wrapper-Element über Layoutsysteme bis hin zu Dingen wie dem OOCSS-Aushängeschild - dem Medienobjekt - reichen. Diese Ebene wirkt sich weniger auf das DOM aus als die letzte Ebene, hat eine höhere Spezifität und ist etwas expliziter, da wir jetzt Abschnitte des DOM mit Klassen ansprechen.
06. Komponenten
In der Ebene 'Komponenten' beginnen wir, erkennbare Teile der Benutzeroberfläche zu formatieren. Wir sind hier immer noch an Klassen gebunden, daher hat sich unsere Spezifität noch nicht erhöht. Diese Ebene ist jedoch expliziter als die letzte, da wir jetzt explizite, entworfene Teile des DOM gestalten.
Wir sollten in dieser Ebene keine Selektoren mit einer niedrigeren Spezifität als eine Klasse finden. Hier wird der Großteil Ihrer Arbeit nach der ersten Projekteinrichtung erledigt. Das Hinzufügen neuer Komponenten und Funktionen macht normalerweise den größten Teil der Entwicklung aus.
07. Trumps
Diese Ebene schlägt - oder 'übertrumpft' - alle anderen Ebenen und hat die Macht, alles zu überschreiben, was vorher gegangen ist. Es ist unelegant und hartnäckig und enthält Utility- und Helferklassen, Hacks und Overrides.
Viele der Deklarationen in dieser Ebene enthalten! Wichtig (z. B. .text-center {text-align: center! Important;}). Dies ist die Ebene mit der höchsten Spezifität - sie enthält die explizitesten Regeltypen mit dem engsten Fokus. Diese Schicht bildet den Punkt des Dreiecks.
Anstatt Dinge in 'typografische Stile' oder 'Formstile' zu gruppieren, teilen wir sie in Gruppen auf, die auf Spezifität, Reichweite und Aussagekraft basieren. Dieses Format ermöglicht es uns, unser CSS in einer Reihenfolge zu schreiben, die immer nur das ergänzt und von dem erbt, was zuvor kam.
Wir verbringen sehr wenig Zeit damit, Dinge rückgängig zu machen, weil unsere Kaskade und Spezifität alle in die gleiche Richtung weisen. Wir reduzieren die Anzahl von Kollisionen, Lecks und Neudefinitionen drastisch.
Teilweise
Jede Ebene enthält eine Reihe von Teiltönen. Ich empfehle die Namenskonvention _ .. scss (zum Beispiel: _settings.colors.scss, _elements.headings.scss, _components.tabs.scss).
Diese Teilbereiche sollten so klein und detailliert wie möglich gehalten werden, wobei jeder Teil nur so viel CSS enthält, wie er zur Erfüllung seiner Rolle benötigt. _Elements.headings.scss würde also nur die Regeln h1 bis h6 enthalten und nichts weiter. Wenn Sie beispielsweise eine Seitentitelkomponente haben, die eine Hauptüberschrift (z. B. h1) und eine Unterüberschrift (z. B. h2) auf eine bestimmte Weise aussehen lässt, erstellen Sie einen Teil _components.page-title.scss in der Ebene Komponenten und binden auf Klassen (zB .page-title, .page-title-sub), nicht auf HTML-Elemente.
So funktioniert ITCSS: Wir platzieren nicht alle unsere überschriftenbezogenen Stile zusammen. Stattdessen platzieren wir alle unsere elementbasierten Regeln und alle unsere klassenbasierten Regeln zusammen. Wir bestellen das Projekt jetzt basierend auf nützlichen CSS-Metriken und erstellen keine umständlichen Spezifitäts- und Kaskadengruppierungen, indem wir das Projekt in thematischen Abschnitten bestellen.
Das Ergebnis
Wenn das alles zusammenkommt, könnte es ungefähr so aussehen:
@import 'settings.global'; @import 'settings.colors'; @import 'tools.functions'; @import 'tools.mixins'; @import 'generic.box-sizing'; @import 'generic.normalize'; @import 'elements.headings'; @import 'elements.links'; @import 'objects.wrappers'; @import 'objects.grid'; @import 'components.site-nav'; @import 'components.buttons'; @import 'components.carousel'; @import 'trumps.clearfix'; @import 'trumps.utilities'; @import 'trumps.ie8';Selbst in diesem winzigen Beispiel können Sie sehen, wie jede Ebene eine beliebige Anzahl von Partials enthalten kann, und diese Partials können theoretisch in einer beliebigen @ import-Reihenfolge angeordnet sein. Die einzige Voraussetzung ist, dass die Schichten selbst immer in dieser Formation bleiben.
Wir stellen sicher, dass jede Ebene CSS enthält von:
- Eine ähnliche Besonderheit: Alle elementbasierten Selektoren oder alle klassenbasierten Selektoren oder Dienstprogrammklassen mit! Wichtig
- Eine ähnliche Aussage: Gestalten Sie alle Ihre bloßen HTML-Elemente oder UI-Komponenten oder bestimmte Hilfsklassen
- Eine ähnliche Reichweite: Fähigkeit, das gesamte DOM (z. B. * {}), eine Teilmenge des DOM (z. B. ein {}), einen Abschnitt des DOM (z. B. Karussell {}) oder einen bestimmten DOM-Knoten (z. clearfix {})
Dieser Drilldown-Ansatz bietet uns eine viel besser verwaltbare CSS-Architektur. Jetzt wissen wir, dass alles, was wir hinzufügen, eine Ergänzung zu allem sein sollte, was vorher gegangen ist. Wir wissen, wo jeder Regeltyp leben wird und wo neue Stile platziert werden müssen, und wir sind zuversichtlich, dass alle unsere verschiedenen Selektoren gut nebeneinander spielen werden.
Wenn Sie ITCSS weiter erforschen möchten, werfen Sie einen Blick auf Harry Roberts Einführungsvortrag bei DaFED ...
Hassen Sie es, mit Legacy-CSS zu arbeiten? Verpassen Sie nicht Harry Roberts ' Bangalore generieren sprechen über CSS umgestalten, ohne den Verstand zu verlieren . Buchen Sie jetzt um diese und andere Vorträge von führenden Web-Namen wie Jonathan Snook, Stephanie Rieger und Shikhar Kapoor zu genießen.
Dieser Artikel erschien ursprünglich in Ausgabe 267 von Netzmagazin .
