Einführung in ITCSS für Webentwickler

Es gibt eine Handvoll großartiger Methoden für Strukturierung von CSS-Code, und alle arbeiten auf unterschiedliche Weise. Die bekanntesten sind OOCSS und SMACSS, es gibt aber auch eine weniger bekannte Methode ITCSS (invertiertes Dreieck-CSS) erstellt von Harry Roberts.

Es ist keine Bibliothek oder ein Framework, sondern ein Methodik zum Schreiben von Code das ist skalierbar und leicht zu manipulieren. Die Vorteile von ITCSS reichen von einfache Code-Organisation kleinere Dateigrößen und ein besseres Verständnis der CSS-Architektur.

ITCSS ist nicht jedermanns Sache, aber es bietet eine professionelle Möglichkeit, Stylesheets während des Codierungsprozesses klarer zu betrachten. Schauen wir uns die Konzepte von ITCSS genauer an und erfahren Sie, wie sie auf Webprojekte angewendet werden können.

Was ist ITCSS??

Moderne Methoden zur Organisation von CSS greifen häufig auf zurück Modularisierung oder CSS-Objekte abstrakte Ideen konstruieren.

Die neue Idee von Inverted Triangle CSS ist a Schichtweise Aufteilung der CSS-Eigenschaften basierend auf ihrem Grad an Spezifität und Wichtigkeit. Im Vergleich zu SMACSS und OOCSS ist dies eine weniger bekannte Methode, obwohl beide mit ITCSS kombiniert werden können.

Da ist ITCSS meistens proprietär, Es gibt kein detailliertes Regelwerk über seine Verwendung. Nur eine bestimmte Grundsätze steht zu unserer Verfügung. Der Autor spricht in dem folgenden Video darüber.

Standardmäßig verwendet ITCSS die gleichen Prinzipien wie OOCSS mit größerer Trennung basierend auf der Spezifität. Wenn Sie mit OOCSS bereits vertraut sind, betrachten Sie dies als einzigartig alternative CSS-Architektur versuchen.

Hier sind einige der größten Vorteile der Verwendung von ITCSS:

• Seitenobjekte können in eigene CSS / SCSS-Dateien aufgeteilt werden Wiederverwendbarkeit. Es ist einfach, jedes Objekt zu kopieren, einzufügen und zu erweitern in andere Projekte.
• Tiefe der Spezifität ist wie du willst.
• Es gibt keine festgelegte Ordnerstruktur, und keine erforderliche Verwendung von Vorverarbeitungswerkzeugen.
• Sie können Konzepte aus anderen Methoden wie CSS-Modulen mit zusammenführen Erstellen Sie Ihren eigenen hybriden Workflow.

Das ITCSS-System

Werfen wir einen Blick auf die Funktionsweise des invertierten Dreiecksmodells anhand der folgenden Abbildung aus dem Beitrag von Lubos Kmetko.

Eine gerichtete Strömung von der flachen Oberseite des umgekehrten Dreiecks bis zur unteren Spitze symbolisiert ein Erhöhung der Spezifität. Diese konzentrieren sie sich auf weniger spezifität vereinfacht die mehrfache Wiederverwendung von Klassen in einer Site.

Jeder Unterabschnitt des Dreiecks kann als separate Datei oder Gruppe von Dateien betrachtet werden, obwohl Sie auf diese Weise keinen Code schreiben müssen. Aufgrund der Importfunktion ist es für Sass / Less-Benutzer sinnvoller. Stellen Sie sich jeden Unterabschnitt als eine Methode für vor wiederverwendbaren CSS-Code aufteilen und organisieren.

Lassen Sie uns einen kurzen Blick darauf werfen jeder Abschnitt des umgekehrten Dreiecks Bewegen Sie sich von oben nach unten zur Spitze.

• die Einstellungen - Preprozessor-Variablen und -Methoden (keine tatsächliche CSS-Ausgabe)
• Werkzeuge - Mixins und Funktionen (keine tatsächliche CSS-Ausgabe)
• Generisch - CSS-Reset-Einstellungen, die Eric Meyers Reset, Normalize.css oder Ihren eigenen Code-Stapel enthalten können
• Elemente - Einzelne HTML-Element-Selektoren ohne Klassen
• Objekte - Klassen für die Seitenstruktur folgen normalerweise der OOCSS-Methodik
• Komponenten - Ästhetische Klassen zum Gestalten beliebiger und aller Seitenelemente (oft kombiniert mit der Struktur von Objektklassen)
• Trümpfe - Die spezifischsten Stile zum Überschreiben aller anderen Elemente im Dreieck

Jede Schicht des umgekehrten Dreiecks kann sein angepasst an Ihre Bedürfnisse. Wenn Sie also keinen CSS-Präprozessor verwenden, benötigen Sie weder die Settings- noch die Tools-Ebene.

Sie sollten jeden Abschnitt frei interpretieren können, wenn Sie es für richtig halten. Zum Beispiel erklärt Jordan Koschei, wie er Struktur und Ästhetik zu Objektklassen zusammenfügte und im Bereich Komponenten wenig übrig ließ.

ITCSS hat keine harten Regeln dass du folgen musst Es gibt keinen ITCSS-Konformitätsprüfer, und niemand wird Sie anschreien, weil Sie dieses Modell leicht verändert haben.

Obwohl Harry Roberts, der Schöpfer von ITCSS, daran interessiert war, seine Methoden für den internen Gebrauch geschützt zu halten, können Sie einen finden Open Source-Beispiel für ITCSS in diesem GitHub Repo. Sie wird vom CSS Wizardry-Konto gehostet, der persönlichen Website von Harry Roberts.

BEM + IT = BEMIT-Benennung

Eines der beliebtesten CSS-Namensschemata ist BEM. Dies steht für Block-Element-Modifier und folgt einer ganz besonderen Syntax.

Jedes Element in BEM beschreibt eine Namenskonvention für CSS-Klassen:

• Blöcke sind Klassen für einzelne Elemente, die repliziert werden können und unabhängig voneinander sind.
• Elemente sind immer Teil eines Blocks
• Modifikatoren Ändern Sie immer einen Block oder ein Element, um das Erscheinungsbild leicht zu ändern (Ein / Aus, Aktiv / Inaktiv, Fest, Statisch, Hervorhebung / Neutral)..

BEMIT ist die Namenskonvention von ITCSS übernommen, die Ideen von BEM entlehnt und neue Ideen mit ITCSS umsetzt.

Die BEM-Syntax schreibt sehr spezifische Regeln vor. Nachfolgend ein Beispiel von der BEM-Website:

.form  .form - theme-xmas  .form - simple  .form__input  .form__submit  .form__submit - deaktiviert  

Blöcke haben Namen ohne Trennzeichen oder Namen, die durch einen Bindestrich oder einen Unterstrich getrennt sind. Elemente verwenden zwei Unterstriche und beschreiben interne Elemente, die dem jeweiligen Block entsprechen. Modifikatoren funktionieren auf dieselbe Weise, verwenden jedoch zwei Striche zur Identifizierung.

Harry geht in diesem Blog-Post tiefer auf BEMIT ein. Seine Beschreibung ist sehr knapp und zeigt, dass die wahre Natur von ITCSS ist mit anderen CSS-Methoden freundlich spielen.

Harry definiert Namensräume für Objekte als erscheinen Präfixe für jeden Hauptklassennamen. Sie brechen als zusammen O- für Objekte, c- für Komponenten und u- für Dienstprogramme (wie Clearfix oder Textzentrierung).

Hier sind einige Beispielcodes typische Namenskonventionen von BEMIT.

  
… 
 
 

Er empfiehlt auch die Verwendung der @ Suffix für Klassen, die auf Medienstilen basieren. Also die .o-media Klasse könnte sich ändern .o-media @ lg für große Bildschirme und .o-media @ md für mittelgroße Bildschirme.

Ich persönlich denke, die zusätzlichen Suffixe sind zu einfach für grundlegende Webprojekte. Ich denke, die meisten Entwickler würden lieber häufige Medienabfragen verwenden und die Klassen an unterschiedlichen Haltepunkten umschreiben. Ich kann jedoch nicht sagen, dass beide Methoden richtig oder falsch sind, und jeder kann individuell entscheiden, ob er BEMIT verwenden möchte oder nicht.

Ich empfehle Ihnen dringend, diesen Intem-BEMIT-Artikel zu lesen, um mehr darüber zu erfahren, warum ITCSS BEM erweitert hat und wie Sie Ihre CSS-Klassen benennen möchten.

ITCSS kann als zusammengefasst werden eine organisatorische Methode zum Schreiben wiederverwendbares und skalierbares CSS. BEM ist die bevorzugte Benennungssyntax und BEMIT erweitert dies zur Arbeit mit Namespaces für spezifischeren und erkennbaren Code.

Es gibt viel zu lernen, und wenn Sie neu in CSS sind, wird dies ein schwieriges Konzept sein, das man brechen kann. Aber wenn Sie bereit sind zu lernen, garantiere ich, dass Sie mit dem schlanken Charakter des ITCSS-Codes überrascht werden.

Einpacken

Front-End-Entwickler sind stets bemüht, ihren Workflow zu optimieren. ITCSS ist nur eine weitere Methode, die zu einer verbesserten Strukturierung komplexer Websites beitragen kann.

Die Schwierigkeit besteht darin zu lernen, wie es in der realen Projektarbeit funktioniert. Wenn Sie die Kühnheit besitzen und sich bemühen, etwas zu lernen, kann es sinnvoll sein, ITCSS zu Ihrem Toolkit hinzuzufügen. Obwohl ich keine offizielle Dokumentation gefunden habe, gibt es im Internet noch viele Ressourcen, um mehr über ITCSS zu erfahren.

• Verwalten Sie umfangreiche Webprojekte mit der neuen CSS-Architektur ITCSS (creativebloq.com)
• Verwalten von CSS-Projekten mit ITCSS - Präsentationsfolien (speakerdeck.com)
• CSS-Projekte mit ITCSS (1 Stunde Videopräsentation)
• ITCSS - Eine interessante Möglichkeit, große Projekte zu organisieren (css-tricks.com)

(Titelbild über speakerdeck.com)