Kontakt

Modulares CSS für modulare Designs

Wie SASS und ITCSS helfen Design strukturiert in CSS zu übersetzen

Herausforderung: Wie teile ich mein CSS auf?

Wie vermeide ich Dopplungen? Wie bleibt es übersichtlich und wartbar?

HTML Komponenten zu verwenden bedeutet modulare Komponeten zu verwenden. Entsprechend braucht es eine Systematik auch das CSS, welches das Design implementiert, modular aufzubauen. Nur so kann vermieden werden zum Beispiel die Regeln für einen Button pro Button der später verwendet wird (im Inhalt, in Keyvisuals oder in Modal-Dialogen) definieren zu müssen. Es werden also Code-Dopplungen vermieden.

Zusätzlich kann so später an einer zentralen Stelle das Aussehen des Button verändert werden, ohne das es notwendig ist jede Stelle im Code anzupassen wo dieser verwendet wird.
Das Ergebnis ist eine automatisch gegebene Konsistenz aller Buttons, oder entsprechend verallgemeinert des gesamten Design Systems!

Cascading Style Sheets ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und JavaScript eine der Kernsprachen des World Wide Webs.[1][2] Sie ist ein sogenannter „living standard“ (lebendiger Standard) und wird vom World Wide Web Consortium (W3C) beständig weiterentwickelt. Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem zusammen mit den Auszeichnungssprachen HTML und XML (zum Beispiel bei SVG) eingesetzt werden.
Definition Wikipedia
Begriff: Cascading Style Sheets

Cascading Style Sheets (kurz CSS) definieren also wie die durch HTML (oder XML) definierten Elemente, aus denen jedes Frontend im Web besteht, im Browser dargestellt werden sollen.
Es kodiert also das Design eines Elements. Betrachtet man wie Elemente zusammenhängen, und immer komplexere Elemente ergeben, sieht man schnell wieso daraus quasi "von selbst" eine Designsystematik entsteht!

SASS: Syntactically Awesome Style Sheets

CSS with superpowers

CSS selbst bringt leider noch keine Mechanismen mit, Regeln einfach zu schachteln. Zwar können Selektoren beliebiger Tiefe erstellt werden, es müssen aber für jede zusätzliche Regel alle Teile der Selektor-Kette kopiert werden. Das Ergebnis ist ein hoher Grad an Code-Duplikation, und nur schwierig voneinander unabhängig zu ändernde Regeln.

An genau dieser Stelle springt SASS ein, und erweitert CSS um zusätzliche Regeln und Funktionen um exakt solche modularisierten Regeln zu ermöglichen.
SASS selbst definiert sich dabei als "CSS extension language", also einer Erweiterung der CSS-Sprache!

Was macht SASS aus?

CSS-Kompatibilität

Existierendes CSS ist automatisch kompatibel zu SASS. Dies ermöglicht zum Beispiel die graduelle Migration existierenden CSS-Codes in eine neue, modularisierte Code-Base!

Auch können daruch externe Module und Dateien einfach in den eigenen Workflow integriert werden.

Standard-Library

SASS bringt eine eigene Bibliothek von Features mit, für Probleme die sonst in jedem Projekt neu gelöst werden müssten.

Dies sind zumeist Hilfsmittel die das Schreiben von Code vereinfachen, oder Helfer die Teilprobleme lösen; zum Beispiel fertige Mixins für das Schreiben kompatibler Transitions / Animationen.

Community

Es gibt rund um das Thema SASS mittlerweile eine beachtliche Community. In den 14 Jahren die es SASS mittlerweile bereits gibt wurden also die meisten Fragen, die man sich bei der täglichen Arbeit stellt, im Kontext von SASS oft nicht nur schon diskutiert, sondern es bestehen meist bereits etablierte Best Practices oder fertige Lösungen!

Frameworks

Neben einer ausgereiften Community, und einer Reihe bereits etablierter Tools und Bibliotheken für Alltags-Probleme, existiert für SASS auch eine ausgereifte Auswahl von Frameworks.

Diese bringen, neben zusätzlichen Funktionen, meist auch einen ganzheitlichen Ansatz zur Entwicklung und Strukturierung mit. Etwas, was SASS von Haus aus noch nicht bietet.

Kern-Features: Nesting, Partials und Mixins

Wieso Schachtelung elementar ist

Die drei Kern-Features die man für die Entwicklung modularer, HTML-basierter Komponenten herausgreifen muss sind Nesting, Partials und Mixins. Nesting ermöglicht das ineinander Schachteln von Regeln, in einer Art die die Struktur des unterliegenden HTML möglichst exakt spiegelt. Partials wiederum erlauben das Auslagern von einzelnen CSS-Blöcken in eigene Dateien, die dann an einer Vielzahl Stellen wiederverwendet werden können. Mixins schlussendlich erlauben es bestimmte sich wiederholende Regeln in vollwertige Funktionen mit Parametern herauszuziehen.

Nesting

Nesting erlaubt es Regeln zu schachteln. Statt also einen Selektor immer komplett wiederholen zu müssen (z.B. "nav ul", "nav ul li", "nav ul li a"), kann dieser analog zu HTML mit SASS beliebig verschachtelt werden. SASS generiert daraus am Ende dann wieder die bekannten, langen Selektoren.

Entsprechend werden z.B. Code-Bereiche Copy&Paste-bar, was gerade für das Refactoring und Herausziehen geteilter Funktionen einen entscheidenden Vorteil darstellt!

Partials

Nicht allen Code in einer großen Datei zu schreiben ist für Anwendungs-Code und HTML-Template schon lange etabliert. SASS bringt mit Partials diese Möglichkeiten in die Welt von CSS.

Entsprechend ermöglicht dies auch eine Entwicklung von HTML Komponenten, bei der alle Bestandteile der Komponente (HTML, CSS und JavaScript) nebeneinander im Dateisystem / Projekt-Repository abgelegt werden können. Dies hat sich als generelle Best Practice bei der Entwicklung von Komponenten etabliert, und ist mit reinem CSS nicht ohne weitreichende Code-Duplikation möglich. Welches wiederum zu Lasten der Wartbarkeit geht.

Mixins

Während sich über Partials vor allem Bestandteile von Komponenten zur Wiederverwendung herausziehen lassen, erlauben Mixins das Herausziehen geteilter Funktionalität.

Gibt es zum Beispiel eine Reihe an Animationen, die über verschiedene Elemente und Komponenten eines Interfaces verteilt verwendet werden, so können diese über ein Mixin abgebildet werden, welches an allen Stellen die das Aussehen / Verhalten teilen sollen eingebunden wird. Entsprechend werden damit auch an dieser Stelle Anpassungen am Verhalten zentral veränderbar.

Wie verbinden wir SASS mit weiteren Best Practices?

... und wie jedes Projekt von einer Component Library profitieren kann!

Wie kommt ITCSS ins Spiel?

ITCSS hilft häufig anfallende Problemlösungsstrategien zentral und strukturiert abzulegen, und so einen Pool an nützlichen Einstellungsmöglichkeiten und Utilities als geteilte Basis zur Entwicklung neuer Komponenten zu etablieren. Damit wird sowohl die Entwicklungszeit neuer Komponenten reduziert, als auch eine gleichbleibende Qualität garantiert.

Während Atomic Design bereits solide Strukturen für Komponenten und Elemente mitbringt, gibt es in Projekten auch immer wieder sogenannte Cross-cutting concerns. Zum Beispiel die bereits als Beispiel herangezogenen Animationen, die über die gesamte Seite einheitlich sein sollen. ITCSS ergänzt Atomic Design hier um genau diese Kategorien von Funktionalität eines Interfaces (z.B. Utilities oder Tools).

In der Kombination mit BEM (Block, Element, Modifier) als Benennungs-Schema für CSS-Klassen entsteht damit ein vollständig integriertes Konzept, eine Sammlung von Best Practices, die sich perfekt ergänzen um CSS-Regeln zu schreiben, im Projekt zu organisieren und damit ein komplexes Design modularisiert umzusetzen!

Und die geteilte Sprache für alle diese Konzepte ist SASS!

Der fehlende Baustein - BEM

Block, Element, Modifier, ein Schema zur Benennung

Während Nesting, Partials und Mixins bereits die technischen Möglichkeit bieten größere Strukturen zu modularisieren, so sagen sie aber noch nichts darüber aus wie ich das tue.

Auch Atomic Design und ITCSS beantworten zwar wo ich etwas ablege oder zuordne, geben mir aber noch keinen Hinweis darauf wie ich CSS-Klassen konkret am besten benenne, um die gefundene Abstraktion / Modularisierung möglichst effizient auch im Namen von Elementen und ihren Klassen abzubilden.

Diesen letzten Baustein ergänzt BEM - Block, Element, Modifier über eine Sammlung von Best Practices zur Benennung! Diese unterstützt den Entwickler gerade dabei den Zusammenhang von Komponenten sinnvoll und semantisch auszudrücken:

Mehr zu BEM erfahren

Anknüpfende Themen

Atomic Design

Atomic Design beantwortet die Frage in welche Partials und Mixins Komponenten zerlegt werden sollten, um ein korrekt zusammenhängendes Design System zu erreichen!

BEM

Was ist BEM? Wieso eignet es sich im Zusammenspiel mit SASS hervorragend als CSS-Systematik zur Umsetzung von Atomic Designs?

Unser Entwicklungsansatz

Wie setzen wir bei ruhmesmeile diese ganzen Bausteine zu einem effizienten Entwicklungsansatz zusammen; die Vogelperspektive.