So schreiben Sie besseres CSS in Teams mit ACSS - Eine dynamische Atomic CSS-Bibliothek

Das Schreiben guter Cascading Style Sheets (CSS) ist schwierig und wird in einem Team, in dem mehrere Entwickler CSS schreiben, schwieriger.

Mit diesem Artikel versuche ich, Ihnen einen Ansatz zum Schreiben (oder Nichtschreiben… wir werden sehen) von CSS vorzustellen. Dieser Ansatz löst fast alle Probleme, mit denen man heute mit schlecht geschriebenem CSS in Teams konfrontiert ist.

Aber lassen Sie mich zunächst einige Grundbedingungen festlegen, unter denen mein Artikel gilt.

Einige Bedingungen, die dieser Artikel voraussetzt:

  1. Sie arbeiten in einem Team, in dem mehrere Entwickler CSS schreiben.
  2. Richtlinien sind nur schwer durchzusetzen, wenn automatisierte Tools vorhanden sind.
  3. Designer sind freie Vögel. Redesigns passieren.

Unter diesen Bedingungen werde ich eine Silberkugel-Lösung vorstellen, die fast alle Probleme löst, mit denen wir aufgrund von schlechtem CSS konfrontiert sind (Denken Sie daran, CSS ist nicht schlecht. Schlecht geschriebenes CSS ist). Lassen Sie uns zunächst diese Probleme durchgehen.

Haftungsausschluss : Ich bin in keiner Weise ein Partner der in diesem Artikel beschriebenen Lösung. Ich bin nur ein Entwickler, der den Schmerz von schlechtem CSS in einem Team gespürt hat und mit anderen Entwicklern meine Gedanken darüber teilen möchte, wie man das überwinden kann. Dieser Artikel mag werblich klingen, aber nur, weil ich sehr aufgeregt bin, dies für alle herauszubringen.

Problem Nr. 1: Das Benennen von Klassen ist schwierig

Entwickler 1 (während des Codierens) : Sieht für mich wie ein Header aus. Lassen Sie mich den .headerSelektor dafür verwenden.

Entwickler 2 (in der Pull-Anfrage) : Dies ist kein Header. Es sieht für mich wie ein Titel aus. Darüber hinaus können wir es nicht einfach als "Header" bezeichnen, da dieses Element nicht generisch genug ist. Nennen wir es .panel-headeroder besser .panel-title.

Es ist am schwierigsten, Namen zu finden, die auch aussagekräftige Namen sind. Es ist auch am schwierigsten zu lernen, da Sie keine Richtlinien für einen „aussagekräftigen“ Namen haben können. Sie können nur Beispiele dafür geben, was nicht sinnvoll ist, und das kann bisher nur helfen. Darüber hinaus geht es nicht nur darum, sinnvoll zu sein. Klassen in CSS müssen außerdem sicherstellen, dass sie in Zukunft nicht mehr mit anderen Klassennamen in Konflikt stehen, da ein neuer Entwickler möglicherweise denselben oder einen ähnlichen Namen für seine Klasse verwendet.

Verfügbare Lösungen:

  • BEM - Namenskonventionen wie BEM existieren , dieses Problem zu einem gewissen Grad zu lösen. Aber am Ende ist es eine Richtlinie (wir alle wissen, wie einfach es ist, Richtlinien zu befolgen). BEM verhindert möglicherweise, dass Sie vollständig ad-hoc arbeiten, Sie müssen jedoch noch einen anfänglichen Klassennamen für Ihre Komponenten erstellen.
  • Atomklassen - ein weiterer gängiger Ansatz heutzutage, um mit Atomklassen vollständig atomar zu werden. Kleine Klassen, die nur eines tun. Z.B. Tachyonen. Kombiniere sie, um das zu bekommen, was du brauchst. Dies ist ein guter Schritt, um das Benennen insgesamt zu überspringen, aber was ist, wenn es in Zukunft keine Klasse für eine bestimmte Sache gibt? Wie passe ich vorhandene Atomklassen an mein Design an? Laden alle Klassen immer auf meiner Seite, unabhängig davon, ob ich sie verwende oder nicht? Wir brauchen etwas mehr.

Problem Nr. 2: Auswahlstärken

Eine andere Sache, die CSS-Entwickler ständig beachten müssen, ist, dass die Spezifität in ihrem CSS nicht durcheinander gerät. Wenn Sie lange komplexe Selektoren haben, wird Ihr CSS unvorhersehbar und schwierig zu warten und zu debuggen. Harry Roberts hat viele Artikel darüber geschrieben, warum das schlecht ist und was Sie tun können, um das zu beheben.

Verfügbare Lösungen:

Die beste Lösung für dieses Problem besteht darin, Ihre Selektoren einfach auf eine Klasse zu beschränken. Keine Verkettung, keine Verschachtelung, keine IDs. Die oben genannten BEM-Namen und Atomklassen führen beide zu Einzelklassenselektoren in Ihrem CSS und helfen somit bei der Lösung dieses Problems.

Problem Nr. 3: Was ist mit nicht verwendetem CSS?

CSS blockiert das Rendern, daher ist es sehr wichtig, nur das kritische CSS einer Seite synchron und den Rest asynchron zu laden. Aus dem gleichen Grund ist es auch wichtig zu verhindern, dass Ihr CSS durch Entfernen nicht verwendeten CSS aufbläht.

Verfügbare Lösungen:

Viele Tools bieten das gebrauchte CSS einer Seite. Mit einseitigen Apps ist dies jedoch schwieriger als je zuvor. Ich bin mir nicht sicher, wie zuverlässig oder effizient sie sind, aber das erfordert noch eine zusätzliche Nachbearbeitung über Ihr CSS.

Problem Nr. 4: Refactoring

Entwickler 1 : Dieses CSS ist ziemlich chaotisch geworden. Ich denke, wir sollten es umgestalten.

Entwickler 2 : Glauben Sie, dass dieser Selektor, den Sie ändern, möglicherweise auch auf Seite X verwendet wird? Hast du überprüft?

Entwickler 1 : Oh verdammt! Sie haben Recht ... das habe ich verpasst. Diese Seite X ist zu kritisch zum Berühren. Wissen Sie, warum dieser Entwickler auf beiden Seiten dieselbe Klasse verwendet hat?

Entwickler 2 : Keine Ahnung. Er verließ die Firma. Lassen wir das CSS einfach so wie es ist :(

Mehr habe ich hier nicht zu sagen. Dieser Dialog erklärt alles.

Wenn ich die obigen Probleme zusammenfassen möchte, würde ich sagen, dass das Schreiben von gutem (skalierbarem, lesbarem, wartbarem) CSS definitiv möglich ist. In einem großen Team ist dies jedoch äußerst schwierig. Selbst wenn Sie versuchen, es in einem Team richtig zu machen, würde es eine ständige Anstrengung von jemandem erfordern, um alle Best Practices durchzusetzen.

In einem Team wäre die offensichtlichste, aber perfekteste Lösung - aufhören, CSS zu schreiben!

„Warte, was sagst du? Das ist doch nicht möglich!". Sie denken vielleicht so, aber ich möchte Ihnen etwas vorstellen.

Die All-in-One-Lösung - ACSS (Atomizer)

ACSS (abgeleitet von Atomic CSS) ist ein komponentenbasiertes Framework für das Styling durch Atomklassen, das bei Yahoo! Und Atomizer ist ein Tool, das dies tatsächlich erleichtert. Ich werde mehr erklären. Aber vorher möchte ich Ihnen zeigen, wie Sie in ACSS stylen.

Um den Codebeispielen in diesem Artikel zu folgen, empfehle ich Ihnen, Web Maker (einen Front-End-Spielplatz, der das Schreiben von ACSS ohne Build-Setup unterstützt) im Chrome-Browser zu installieren .

Angenommen, Sie haben eine Schaltfläche, die mit den üblichen Eigenschaften für Polsterung, Hintergrund, Farbe usw. gestaltet werden muss. So würde es in ACSS aussehen:

 I am a button

Ein Vorschlag: Machen Sie beim ersten Blick auf diese Syntax kein Urteil. Lesen Sie weiter, geben Sie ihm Zeit, diskutieren Sie und entscheiden Sie dann. Die Klassen auf dem buttonTag sehen möglicherweise anders aus, aber Sie stimmen zu, dass sie weitgehend erraten werden können, was sie tun. Es ist eine Schaltfläche mit Blau , Weiß , 10 Pixel , Inline-Block , Zeiger und wird beim Schweben in Rot geändert .background-colorcolorpaddingdisplaycursorbackground-color

Wenn Sie Web Maker bereits installiert haben, öffnen Sie es, indem Sie oben rechts in Ihrem Chrome-Browser auf das Web Maker-Symbol klicken. Fügen Sie den obigen HTML-Code in den HTML-Codebereich ein und wählen Sie Atomic CSS als Modus im CSS-Codebereich aus. Sobald Sie dies tun, wird im CSS-Codebereich ein automatisches CSS generiert, wie folgt:

Das angezeigte CSS wird mit dem oben erwähnten Atomizer- Tool generiert . Grundsätzlich liest es HTML (oder eine beliebige Datei), erkennt ACSS-Klassen daraus und generiert CSS für diese erkannten Klassen. Sie schreiben also nur HTML mit den entsprechenden Klassen, die Sie verwenden möchten, und CSS wird automatisch generiert!

Nachdem wir nun wissen, wie Sie das Styling in ACSS durchführen, wollen wir sehen, wie es die beste CSS-Methode ist, die Ihr Team haben kann.

Inline, aber nicht inline?

Wie Sie sehen, schreiben wir immer Klassen inline auf die Tags. Das habe ich mit Inline-Styling gemeint. Aber bitte verwechseln Sie es nicht mit den "Inline-Stilen" . Im Gegensatz zu Inline-Stilen werden unsere Inline-Klassen in einem zwischenspeicherbaren Stylesheet in tatsächliche CSS-Klassen übersetzt. Im Grunde genommen erhalten wir also die gleiche Leistung wie Inline-Stile (schreiben Dinge schnell), erhalten aber dennoch vollständig gültiges atomares CSS als Ausgabe.

Keine Namensgebung mehr! ?

Mein absoluter Lieblingsvorteil. Sie müssen niemals einen schönen, semantischen und konfliktfreien Namen für eine Klasse finden.

Ein sehr berühmtes Sprichwort lautet:

In der Informatik gibt es nur zwei schwierige Dinge: Cache-Ungültigmachung und Benennung. - Phil Karlton

Super einfache Updates und Refactoring

Gehen Sie zum HTML-Code und ändern Sie die Klassen, um das Styling zu aktualisieren. Entfernen Sie jede Klasse von überall, ohne befürchten zu müssen, etwas an anderer Stelle zu beschädigen.

Kein Byte unbenutzten CSS?

Da Atomizer CSS aus den tatsächlich verwendeten Klassen generiert, haben Sie in Ihrem Stylesheet niemals nicht verwendetes CSS. Ist das nicht die verrückte Leistung, nach der wir alle gesucht haben? Es gibt auch ein Tool, mit dem Sie überprüfen können, inwieweit eine Website von ACSS profitieren kann - //atomize-io.herokuapp.com/

Keine Richtlinien für neue Entwickler?

Alles, was Sie benötigen, um einem neuen Entwickler im Rahmen Ihres CSS-Onboarding einen Syntaxleitfaden für ACSS und einen Klassenreferenzlink - //acss.io/reference - zu geben. Auf dieser Seite können Sie die ACSS-Klasse problemlos nach einer Eigenschaft durchsuchen: value. Auch diese Konvention wird in Ihr Gedächtnis eingebettet, während Sie sie weiter verwenden.

Außerdem gibt es eine nette kleine Visual Code-Erweiterung von Pankaj Parashar, die diese Klassen direkt im Editor automatisch vorschlägt. Daher ist bei dieser Erweiterung auch die Referenz nicht erforderlich. Entwickler-Onboarding ist fertig!

Abgesehen von diesen Vorteilen bietet ACSS noch einige weitere Extras.

  • Im Allgemeinen verwenden wir in einer App weiterhin dieselben alten Eigenschafts- / Wertepaare. Somit hört das generierte Stylesheet nach einem bestimmten Punkt im Wesentlichen auf zu wachsen . Weil jedes eindeutige Eigenschafts- / Wertepaar einmal im endgültigen Stylesheet enthalten ist.
  • Aufgrund des oben genannten Punkts können Sie tatsächlich dasselbe Stylesheet für Ihre Suite mit mehreren Produkten verwenden, da es niemals so groß sein würde. Gleiches zwischengespeichertes CSS-Stylesheet für alle Produkte!
  • Pull-Anfrage, die sich wie ein Traum anfühlt. Stellen Sie sich Pull-Anfragen vor, bei denen keine CSS-Dateien angezeigt werden. Keine Überprüfung von Klassen mehr auf Aussagekraft- oder Spezifitätskonflikte . Weil Sie wissen, dass korrektes atomares CSS generiert wird, das vorhanden sein sollte. Wird das nicht ein Wunderland sein?

Mythos Busting

Über das Internet haben sich viele Mythen über ACSS entwickelt. Dies liegt an der geringen Bewertung des Rahmens und der Beurteilung auf den ersten Blick.

Es ist dasselbe wie Inline-Styling. Es ist schlecht!

Nein, ist es nicht. Wir haben oben schon gesehen. Es ist definitiv so leistungsfähig wie Inline-Styling, erbt aber keine Nachteile.

Es ist schwer, immer wieder dieselben Klassen zu schreiben.

Ja ist es. Laut ACSS handelt es sich um ein komponentenbasiertes Framework. Wenn Sie nicht jede Ihrer Komponenten als Vorlage verwenden und bereits HTML duplizieren, z. B. um jedes Mal eine Schaltfläche zu erstellen, ist ACSS nichts für Sie.

Zum Beispiel sollten Sie Schaltflächen mit einer abstrahierten Schaltflächenkomponente wie folgt erstellen:

Hello World

was in etwas kompiliert werden sollte wie:

Hello World

Der Unterricht macht überhaupt keinen Sinn

Ich stimme zu, dass sie unterschiedlich sind und auf den ersten Blick abstoßend aussehen könnten. Aber jedes Atomklassen-Framework hat seine eigene Konvention, Dinge zu benennen. Und glauben Sie mir, ACSS hat das Beste aus der Namenskonvention. Lesen Sie mehr darüber, warum sie sich für eine solche Benennung entschieden haben.

Ich möchte einen Absatz aus einem Artikel von Harry Robert zitieren:

Ein häufiges Argument gegen BEM ist, dass es hässlich ist; Ich wage zu sagen, wenn Sie Code scheuen, der nur auf seinem Aussehen basiert, dann verpassen Sie oft den Punkt. Es sei denn , wird der Code unnötig schwer aufrecht zu erhalten, oder wirklich schwieriger zu lesen, dann vielleicht Sie tun müssen zweimal überlegen , bevor sie verwendet wird , aber wenn es nur seltsam aussieht " , aber einen gültigen Zweck hat, dann sollte es auf jedem Fall in vollem Umfang berücksichtigt werden , bevor abschreiben. - Harry Roberts

Aber hier verwenden wir BEM, um unsere Codebasen gesund zu machen.

Ich werde in ACSS keine X-Sache machen können

Sie werden erstaunt sein, was alles durch bloße Klassen in ACSS möglich ist. Pseudoelemente, Flexbox, Medienabfragen, wie Sie es nennen. Und die Konvention, die sie sich ausgedacht haben, um all diese Dinge zu tun, ist einfach genial! Obwohl in ACSS bestimmte Dinge möglicherweise noch nicht möglich sind, wie z. B. CSS-Grids, können Sie jederzeit ein Problem öffnen oder zu Atomizer beitragen.

Schlussendlich

Ich würde Sie bitten, ACSS auszuprobieren, wenn Sie die Schmerzen beim Schreiben und Verwalten von CSS in einem Team verstehen. Und denken Sie daran, dass die Verwendung von ACSS nicht bedeutet, dass Sie kein einfaches CSS schreiben können. Werkzeuge sollten dort eingesetzt werden, wo sie am besten funktionieren. Wenn es etwas gibt, für das CSS Ihrer Meinung nach besser geeignet ist, sollten Sie es auf jeden Fall verwenden.

Auch ACSS ist mit diesem Ansatz nicht allein. Es gibt ähnliche Alternativen wie Blowdry CSS, Cell CSS usw., die jeweils ihren eigenen Stil haben, um dasselbe zu erreichen.

Wenn Sie Fragen zu ACSS haben, können Sie Thierry Koblentz, den Mann selbst vom ACSS-Team, auf Twitter anrufen. Stellen Sie eine Frage bei der FAQ-Zusammenstellung, die er verwaltet, oder treten Sie der Atomizer-Gruppe auf Gitter bei. Oder geben Sie die Kommentare zu diesem Artikel ein.

Abschließend möchte ich Thierry Koblentz und Jitendra Vyas für die Durchsicht dieses Artikels danken.

Wenn Ihnen dieser Artikel gefällt, zeigen Sie Ihre Liebe, indem Sie klatschen? auf dem Artikel. Folgen Sie mir auch auf Twitter, wo ich weitere Front-End-Artikel und Nebenprojekte von mir teile.

Mehr zu lesen

  • //www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/ - von Thierry Koblentz
  • Atomizer GitHub repo - //github.com/acss-io/atomizer
  • ACSS-Dokumentation - //acss.io/quick-start.html
  • Von Thierry zusammengestellte ACSS-FAQs - //github.com/thierryk/ACSS-QA
  • ACSS-Spielplatz - //webmakerapp.com