So machen Sie Ihren Code mit lebendigem Stil leicht wartbar …

Styleguides von gestern werden typischerweise als designorientierte Dokumente betrachtet, die sich auf Branding und Farbverwendung konzentrieren. Doch mit dem Aufkommen wahnsinnig umfangreicher Codebasen für Websites wie Facebook oder die große Produktpalette von Google haben sich die Styleguides weiterentwickelt.

Heutzutage, Leben Styleguides enthalten eine stets aktuelle Dokumentation der aktuellen Codebasis und ihrer Anwendungsfälle. Mit diesen Dokumenten können wir viel besser wartbaren und wiederverwendbaren Code schreiben und gleichzeitig sehen, wie optimiert unsere Codebasis ist.

Was steht in einem Living Style Guide?

Living Style Guides ähneln den älteren Pendants; Sie enthalten Logo- und Markeninformationen, Farbverwendung sowie einen allgemeinen Überblick über die Codeverwendung. Im Abschnitt „Codeübersicht“ können Sie leicht doppelten oder sehr ähnlichen Code finden und ihn kombinieren, um Ihre Codebasis zu optimieren oder bereits verwendete Komponenten anzuzeigen. Die meisten Leitfäden zeigen entweder einen „Protokoll“-Ansatz, bei dem jeden Die Codeinstanz wird dokumentiert, oder es wird nur der bewusst modulare Code dokumentiert.

Diese Leitfäden konzentrieren sich nicht nur auf HTML und CSS, sondern auch auf andere Sprachen, die aus Leistungsgründen modularisiert werden können, wie JavaScript und PHP. Ein paar solide Beispiele für Wohnstil-Guides finden Sie unter Github, MozillaUnd MailChimp. Wie Sie diesen Beispielen entnehmen können, ist es üblich, entweder eine Seite oder eine Unterseite zu haben, um Anwendungsfälle neben dem Code für jede Komponente anzuzeigen. Dadurch können Sie sie ganz einfach abrufen, wenn Sie sie benötigen, und unbekannte Designer oder Entwickler können auf interaktive Weise sehen, wie Komponenten funktionieren.

Starten Sie Ihren eigenen Leitfaden für den Wohnstil

Vor allem bei größeren Projekten kann es entmutigend sein, mit der Dokumentation eines eigenen Living Style Guide ganz von vorn zu beginnen. Aber in der Regel zahlt sich die dafür aufgewendete Zeit aus. Größere Projekte profitieren enorm von einer lebendigen Dokumentation der Site-Stile und der Codestruktur. Bei kleineren Projekten ist die Rendite Ihrer investierten Zeit zwar weniger spürbar, aber manchmal dennoch lohnenswert. Wenn Sie an einem Projekt arbeiten, das eines Tages möglicherweise an einen anderen Designer oder Entwickler übergeben wird, ist es in jedem Fall eine gute Idee, sich eine solche Dokumentation anzusehen.

Lesen:  WooCommerce sendet keine E-Mails? Hier erfahren Sie, wie Sie...

Beginnen Sie mit dem Fundament

Komponenten, die Sie häufig verwenden, eignen sich am besten für einen lebendigen Styleguide. Schaltflächen fallen Ihnen sofort ein. Eine kurze Liste von Dingen, die Sie möglicherweise dokumentieren sollten, sind Layoutoptionen (möglicherweise die Umrisse eines Rastersystems), Typografie, Farbverwendung, Schaltflächen- und Linkstile, Formularstil, Benachrichtigungen oder Warnungen sowie Listenstil. Fast alles, was von der Wiederverwendbarkeit profitieren könnte, könnte im Wesentlichen hinzugefügt werden. Denken Sie bei der Gliederung daran, die Dinge flexibel zu halten. Gestalten Sie eine Warnung oder Schaltfläche niemals spezifisch für eine Seite oder einen Anwendungsfall, es sei denn, dies ist unbedingt erforderlich. Fügen Sie stattdessen Modifikatorklassen hinzu, um auf der Grundlage für Dinge wie Farbe, Typografie oder ästhetische Änderungen aufzubauen. Auf diese Weise können Sie sich immer darauf verlassen, dass die .button-Klasse eine konsistente Breite, Höhe und Textgröße festlegt, während die Modifikatorklassen für jeden Anwendungsfall spezifische Änderungen vornehmen können.

Die Ziele wartbaren Codes

Der Zweck von wartbarem Code besteht darin, 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 möglicherweise mehrmals auf der Website oder auf derselben Seite verwenden. Wenn Sie alten oder bereits geschriebenen Code zerlegen, um ihn nachträglich wartbarer zu machen, ist das eigentlich ziemlich einfach. Beginnen Sie damit, das CSS auf das Wesentliche zu reduzieren. Sie sollten eine Komponentenklasse haben, die strukturelle Dinge wie Höhe, Breite und Position definiert. Während zusätzliche Modifikatorklassen verwendet werden können, um ästhetische Dinge wie Farbe oder Typografie zu ändern. Wenn Ihr Projekt außerdem eine Body-ID oder eine Klasse für jede Seite verwendet, können Sie auf diese Weise einzigartige Anwendungsfälle pro Seite formatieren. Achten Sie jedoch darauf, nicht zu oft auf diese Vorgehensweise zurückzugreifen, da sie Ihrem Styleguide leicht mehr Gewicht verleihen kann.

Der KISS-Prinzip ist ein Designprinzip, das sich auch für den modularen Entwicklungsprozess gut eignet. Das Schreiben von einfachem, wartbarem Code ist normalerweise am einfachsten, wenn Sie Ihre Komponenten einfach halten. Wenn es um Einfachheit geht: Wenn es möglich ist, die Dinge effizienter zu machen und/oder weniger Code zu verwenden und dabei das gleiche Ergebnis zu erzielen, sollten unsere Komponenten so geschrieben sein. Das Endziel einer wartbaren Codestruktur besteht darin, etwas Wiederverwendbares, Kleineres und wesentlich effizienteres als ein nicht wartbares Gegenstück zu haben.

Lesen:  So finden Sie einen guten SEO-Berater

Namenskonventionen in CSS

Wenn es darum geht, mit einer wartbaren Codestruktur zu arbeiten, sind Namenskonventionen sehr wichtig. Das Schreiben beschreibender CSS-Klassen wird einen großen Beitrag dazu leisten, dass die Pflege Ihrer Codebasis eine einfache Aufgabe wird. Es gibt keine Begrenzung auf CSS-Klassenlängen, also nutzen Sie dies zu Ihrem Vorteil. Achten Sie jedoch darauf, sich an eine klare Namenskonvention zu halten, da die Kombination von Bindestrichen und Unterstrichen oder Groß- und Kleinschreibung von Namen leicht verwirrend werden kann. Normalerweise ist es eine gute Idee, Ihre Komponentenklassen sehr beschreibend zu gestalten, während die Modifikatorklassen weniger aussagekräftig sind. Nachfolgend finden Sie ein Beispiel für eine Schaltfläche, eine eindeutige Anwendungsfallregel und Modifikatorklassen.

Automatisierte Lösungen

Automatisierte Styleguide-Generatoren tauchen links und rechts auf, um die Einführung von Styleguides zu unterstützen. Stil-Prototyp ist ein SASS-Generator, der von Ram Richard und Mason Wendell gebaut wurde Team SASS. Es ist derzeit eine der besseren Optionen auf dem Markt, mit ähnlichen Generatoren wie Hologramm, Kalei, StyleDoccoUnd KSS erweist sich auch als nützlich.

Automatisiert vs. handgefertigt

Wie immer gibt es hier Vor- und Nachteile beider Methoden. Automatisierte Lösungen sind schnell und können nachträglich eingesetzt werden, sind aber manchmal auch streng. Handgefertigte Styleguides geben Ihnen die nötigen Informationen über alles, nehmen aber mehr Zeit in Anspruch. Für mich persönlich ist der handgefertigte Ansatz in den meisten Fällen am besten, da er im Hinblick auf die Zusammenarbeit mit anderen Entwicklern am flexibelsten ist. Es lohnt sich jedoch auf jeden Fall, einige der automatisierten Lösungen auszuprobieren, um eine Vorstellung davon zu bekommen, wie sie funktionieren und was sie über Ihren Code aussagen.

Lesen:  30 Filmapik-Alternativen, um Filme in HD online anzusehen

Überprüfen Sie Ihren Code

Websites sind nie fertig. Wir ändern Dinge, wechseln zu neuen Stilen und Trends und am Ende können wir mit einer Menge Code aus früheren Revisionen enden. Es ist wichtig, sich einen Moment Zeit zu nehmen und auf das „Ende“ jeder Überarbeitung zurückzublicken, um sicherzustellen, dass alles so sauber wie möglich ist. An dieser Stelle möchte ich auch jede Komponente (und Modifikatorklasse) in eine werfen 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 Supporteinschränkungen entwerfen. Achten Sie bei der Überprüfung auch darauf, nach Komponenten Ausschau zu halten, die auf seltsame Weise miteinander in Konflikt geraten oder Probleme mit dem Box-Modell verursachen können.

Abschluss

Zusammenfassend lässt sich sagen, dass Styleguides zu einem Code führen sollten, der sehr manipulativ und flexibel ist und dennoch leicht zu pflegen und zu lesen ist. Wenn man bedenkt, wie viel Zeit wir investieren müssen, um ein solches Ergebnis zu erzielen, haben Wohnstilführer bei größeren Projekten einen weitaus messbareren Einfluss als bei kleineren. Komplexe oder große Projekte profitieren so sehr von all den Optimierungen und Leistungssteigerungen, dass sich der Zeitaufwand für das Erreichen dieser Ergebnisse durchaus lohnt. Die Erstellung eines Living Style Guides für eine kleine Website oder ein kleines Projekt erweist sich jedoch möglicherweise nicht als lohnenswerter Zeitaufwand.

Zusammenfassend lässt sich sagen, dass wir alle danach streben sollten, sauberen, wartbaren Code zu schreiben, der sich auf Zukunftssicherheit konzentriert. Living Style Guides fördern tendenziell einen solchen Arbeitsablauf und tragen dazu bei, Entwickler und Zuschauer gleichermaßen glücklicher zu machen.

Ausgewähltes Bild/Miniaturansicht, Programmierbild über Shutterstock.

Aktuelle Artikel:

Empfohlen