Wie Sie Ihren Code mit Living Style Guides leicht pflegen können

Style Guides von gestern werden typischerweise als designorientierte Dokumente betrachtet, die sich auf Branding und Farbnutzung konzentrieren. Aber mit dem Aufkommen von wahnsinnig großen Codebasen für Websites wie Facebook oder Googles umfangreiche Produktpalette haben sich seither Style Guides entwickelt.

In diesen Tagen enthalten Living Style Guides immer aktuelle Dokumentation der aktuellen Codebasis und ihrer Anwendungsfälle. Mit diesen Dokumenten können wir viel mehr wartbaren und wiederverwendbaren Code schreiben, während wir sofort sehen, wie unsere Code-Basis optimiert ist.

Was ist in einem lebenden Styleguide?

Living Style Guides sind ähnlich wie die älteren Pendants; Sie enthalten Informationen zu Logo und Branding, Farbnutzung sowie eine allgemeine Übersicht über die Codeverwendung. Im Code-Gliederungsabschnitt finden Sie leicht doppelten oder nahezu ähnlichen Code und kombinieren ihn, um Ihre Codebasis zu optimieren oder bereits verwendete Komponenten anzuzeigen. Die meisten Handbücher zeigen entweder einen "Log" -Ansatz, bei dem jede Codeinstanz dokumentiert ist, oder nur der absichtlich modulare Code wird dokumentiert.

Diese Anleitungen konzentrieren sich nicht nur auf HTML und CSS, sondern auch auf andere Sprachen, die für die Leistung wie JavaScript und PHP modularisiert werden können. Ein paar solide Beispiele für Lebensführung finden Sie unter Github , Mozilla , und MailChimp . Wie Sie anhand dieser Beispiele sehen können, ist es üblich, entweder eine Seite oder eine Untersite zu verwenden, um Anwendungsfälle nebeneinander mit dem Code für jede Komponente anzuzeigen. Dies macht es einfach, sie zu greifen, wenn Sie sie benötigen, und für unbekannte Designer oder Entwickler zu sehen, wie Komponenten interaktiv arbeiten.

Starten Sie Ihren eigenen Lebensstil Guide

Beginnen Sie Ihre eigenen Lebensstil Guide-Dokumentation von Grund auf neu kann vor allem für größere Projekte entmutigend scheinen. Aber in der Regel gibt es eine Rendite auf die investierte Zeit, um es zu erledigen. Größere Projekte profitieren immens von einer lebendigen Dokumentation von Site-Styles und Code-Struktur. Kleinere Projekte haben eine weniger auffällige, aber manchmal auch lohnenswerte Rendite auf Ihre Zeitinvestition. In jedem Fall, wenn Sie an einem Projekt arbeiten, das eines Tages an einen anderen Designer oder Entwickler übergeben werden kann, wird es Zeit, diese Dokumentation zu sehen.

Beginne mit der Gründung

Komponenten, die Sie häufig verwenden, sind der beste Anwendungsfall für einen Living Style Guide, Tasten kommen sofort in den Sinn. Eine kurze Liste von Dingen, die Sie möglicherweise dokumentieren möchten, sind Layout-Optionen (möglicherweise ein Rastersystem skizzieren), Typografie, Farbnutzung, Schaltflächen und Link-Stile, Form-Styling, Benachrichtigungen oder Warnungen und Listen-Styling. Fast alles, was von der Wiederverwendbarkeit profitieren könnte, könnte im Wesentlichen hinzugefügt werden. Denken Sie beim Skizzieren daran, die Dinge flexibel zu halten. Formatieren Sie niemals eine Warnung oder Schaltfläche für eine Seite oder einen Anwendungsfall, es sei denn, dies ist absolut notwendig. Fügen Sie stattdessen Modifikationsklassen hinzu, um auf der Basis von Dingen wie Farbe, Typografie oder ästhetischen Änderungen aufzubauen. Auf diese Weise können Sie immer auf die .button-Klasse zählen, um eine konsistente Breite, Höhe und Textgröße zu bestimmen, während Sie den Modifikatorklassen erlauben, die für jeden Anwendungsfall spezifischen Dinge zu ändern.

Die Ziele des wartbaren Codes

Der Zweck von wartungsfähigem Code ist es, Dinge wiederverwendbar und zukunftssicher zu machen. Komponenten wie Benachrichtigungsleisten, Schaltflächen, Kopf- und Fußzeilen sind großartige Beispiele für wiederverwendbaren Code - Dinge, die Sie mehrmals auf der Website oder auf derselben Seite verwenden können. Wenn Sie alten oder bereits geschriebenen Code abbrechen, um ihn später wartungsfähiger zu machen, ist das eigentlich ziemlich einfach. Beginne damit, das CSS auf die Grundlagen zu reduzieren. Sie sollten mit einer Komponentenklasse belassen werden, die strukturelle Dinge wie Höhe, Breite und Position definiert. Während zusätzliche Modifier-Klassen verwendet werden können, um ästhetische Dinge wie Farbe oder Typografie zu ändern. Wenn Ihr Projekt eine Body-ID oder Klasse für jede Seite verwendet, können Sie auf diese Weise eindeutige Anwendungsfälle pro Seite individuell gestalten. Achten Sie jedoch darauf, nicht zu viel auf diese Praxis zurückzugreifen, da dies Ihrem Styleguide leicht Gewicht verleihen kann.

Das KISS Prinzip ist ein Konstruktionsprinzip, das auch für den modularen Entwicklungsprozess gut geeignet ist. Schreiben einfacher, wartbarer Code ist in der Regel am einfachsten, indem Sie Ihre Komponenten einfach halten. Wenn es um Einfachheit geht: Wenn es möglich ist, Dinge effizienter zu machen und / oder weniger Code zu verwenden und dabei das gleiche Ergebnis zu erzielen, sollten unsere Komponenten dafür geschrieben werden. Das Endziel einer wartbaren Codestruktur ist es, etwas wiederverwendbares, kleines und wesentlich effizienteres als ein nicht wartbares Gegenstück zu haben.

Namenskonventionen in CSS

Wenn es darum geht, mit einer wartbaren Code-Struktur zu arbeiten, werden Namenskonventionen sehr wichtig. Das Schreiben beschreibender CSS-Klassen wird einen langen Weg zurücklegen, um sicherzustellen, dass die Pflege Ihrer Codebasis eine einfache Aufgabe ist. Es gibt keine Begrenzung auf CSS-Klassenlängen, also nutzen Sie dies zu Ihrem Vorteil. Achten Sie jedoch darauf, dass Sie sich an eine klare Namenskonvention halten, da das Mischen von Bindestrichen und Unterstrichen oder von camel case im Vergleich zu allen Kleinbuchstaben leicht verwirrend sein kann. Es ist normalerweise eine gute Idee, Ihre Komponentenklassen sehr beschreibend zu machen, während Sie die Modifikationsklassen weniger machen. Im Folgenden finden Sie ein Beispiel für eine Schaltfläche, eine eindeutige Anwendungsfallregel und Modifikatorklassen.

  / * Dies ist eine Komponentenklasse, sie sollte nur grundlegende Strukturregeln enthalten * / button {display: block; width: 250px; height: 48px; line-height: 48px;} / * Dieser einzigartige Anwendungsfall umreißt eine verwendete Schaltfläche auf der homepage * /. homepage-cta-button {display: blockmargin: 0 auto 50px; breite: 180px; höhe: 60px; line-height: 60px;} / * Darunter sind Modifier-Klassen, die zusätzlich zur Komponente hinzugefügt werden Klasse, um Farbe oder andere ästhetische Änderungen hinzuzufügen * /. rot {background: # C54F48} .rounded {border-radius: 5px;} 

Automatisierte Lösungen

Automatische Styleguide-Generatoren haben nach links und rechts aufgestapelt, um die Verwendung von Styleguides zu erleichtern. Stil Prototyp ist ein SASS Generator von Ram Richard und Mason Wendell von Team SASS . Es ist eine der besseren Möglichkeiten im Moment, mit ähnlichen Generatoren wie Hologramm , Kalei , StyleDocco , und KSS erweist sich auch als nützlich.

Automatisierte vs Handarbeit

Wie immer gibt es Vor-und Nachteile für beide Methoden hier. Automatisierte Lösungen sind schnell und können im Nachhinein verwendet werden, sind aber manchmal auch streng. Handgefertigte Styleguides lassen Sie alles genau wissen, brauchen aber mehr Zeit. Persönlich ist der handwerkliche Ansatz für mich in den meisten Fällen das Beste, da er in Bezug auf die Zusammenarbeit mit anderen Entwicklern am flexibelsten ist. Aber es ist sicherlich die Zeit wert, einige der automatisierten Lösungen auszuprobieren, nur um eine Vorstellung davon zu bekommen, wie sie funktionieren und was sie über Ihren Code sagen.

Überprüfen Sie Ihren Code

Websites sind nie fertig. Wir modifizieren Dinge, gehen zu neuen Stilen und Trends über und am Ende können wir viel Code aus früheren Revisionen bekommen. Es ist wichtig, sich einen Moment Zeit zu nehmen und auf das "Ende" jeder Revision zurückzublicken, um sicherzustellen, dass die Dinge so sauber wie möglich sind. An dieser Stelle möchte ich auch jede Komponente (und Modifikationsklassen) in a Codepen um die Browserunterstützung zu testen und entsprechende Notizen zu machen. Dies könnte später viel Zeit sparen, wenn Sie eine Seite mit Support-Einschränkungen entwerfen. Achten Sie während der Überprüfung auch darauf, nach Komponenten Ausschau zu halten, die auf seltsame Weise miteinander kollidieren können oder Boxmodellprobleme verursachen können.

Fazit

Abschließend sollten Stilrichtlinien zu einem Code führen, der sehr manipulativ und flexibel ist, aber dennoch leicht zu verwalten und zu lesen ist. Wenn man bedenkt, wie viel Zeit wir investieren müssen, um ein solches Ergebnis zu erreichen, haben Living Style Guides bei größeren Projekten einen viel stärker quantifizierbaren Einfluss als kleinere. Komplexe oder große Projekte profitieren so sehr von allen Optimierungen und Leistungssteigerungen, dass es sich lohnt, diese Ergebnisse zu erreichen. Das Erstellen eines Living Style Guides für eine kleine Website oder ein kleines Projekt kann sich jedoch nicht als zeitsparend erweisen.

Zusammenfassend sollten wir uns alle bemühen, sauberen, wartbaren Code zu schreiben, der sich auf Zukunftssicherheit konzentriert. Living Style Guides neigen dazu, einen solchen Workflow zu fördern und helfen Entwicklern und Viewern gleichermaßen, glücklicher zu sein.

Ausgewähltes Bild / Vorschaubild, Bild programmieren über Shutterstock.