7. Unterschiedliche Arten zu stylen
Grundsätzlich stehen uns viele unterschiedliche Arten zur Verfügung, um mittels CSS Gestaltung an die HTML-Elemente und ihre Inhalte zu bekommen. Alle haben sie ihre Berechtigung, keine ist wirklich falsch. In dieser Abhandlung dreht sich alles um wiederverwendbare Module. Dabei sind beide Aspekte wichtig:
- Wiederverwendbarkeit innerhalb des Projektes und zwischen Projekten
- Module im Sinne abgekapselter Inhalte
Da mir diese beiden Aspekte sehr wichtig sind, fällt für mich die Möglichkeit aus, nur mit Element- und Pseudoselektoren unter Ausnutzung unterschiedlicher Kombinatoren zu gestalten.
Wir haben in meinen Augen zwei grundsätzlich unterschiedliche Ansätze zur Verfügung, wie wir Module unseres Designs gestalten und modifizieren können:
- Wir vergeben eine Basisklasse und ergänzen sie optional durch einen oder mehrere Modifikatoren. Damit gestalten wir also durch eine Klasse oder eine Kombination mehrerer.
- Wir regeln alle Abweichungen und Standards im CSS und vergeben nur jeweils eine einzelne Klasse.
Ein gern genommenes Beispiel sind hier Buttons. Im Modifikatoransatz würden wir eine Basisklasse vergeben, die schon eine Designvariante darstellt. Der Modifikator ändert dann Details wie Größe, Farben oder Icons.
1 <!-- Standardbutton -->
2 <button class="btn">Klick mich!</button>
3
4 <!-- Button mit warnender Farbe -->
5 <button class="btn btn-warning">Warnung</button>
6
7 <!-- Link als Button formatiert, mit Icon -->
8 <a href="#" class="btn btn-ico-print">drucken</a>
Der auf das CSS fokussierte Ansatz ist dann besonders praktisch, wenn man einen Präprozessor nutzt. Vor allem Sass ist hierbei empfehlenswert, denn Sass bietet das Konzept der Platzhalter (placeholder). Mit Platzhaltern verschiebt man die allgemeingültige Klasse in eine stille Helferklasse, die dann wiederum von allen einzelnen Ausprägungen aufgerufen wird. Dadurch müssen nicht mehr mehrere Klassen auf ein Element gesetzt werden. Die Referenzierung auf die Eigenschaften der einen Basisklasse geschieht über den Platzhalter.
1 %btn {
2 /* Platzhalter mit allgemeiner Buttondefinition */
3 }
4
5 /* Standardbutton */
6 /* Mit @extend werden die Eigenschaften von %btn über\
7 nommen.
8 Am Ende werden mehreren kommaseparierten Selektoren
9 die Eigenschaften zugewiesen, die identisch sind. \
10 */
11 .btn {
12 @extend %btn;
13 }
14
15 /* Button mit warnender Farbe */
16 .btn-warning {
17 @extend %btn;
18 color: $btn-warning-col;
19 background-color: $btn-warning-bgcol;
20 }
21
22 /* Link als Button formatiert, mit Icon */
23 .btn-ico-print {
24 @extend %btn;
25 color: $btn-ico-print-col;
26 padding-left: 10px;
27 background: $btn-ico-print-bgcol image-url($btn-ico\
28 -print-icon) no-repeat left center;
29 }
Allerdings bestimmt die Positionierung der Platzhalter innerhalb des gesamten SCSS-Konstruktes die Position der Ausgabe. Diese ist normalerweise nicht an der gewünschten Stelle. Ich habe das in einem Beispiel bei Sassmeister demonstriert. Setzen Sie also Platzhalter am Besten direkt an den Anfang der Modul-Datei - nicht in eine separate Datei. Oder nutzen Sie Mixins an Stelle von Platzhaltern.
Der erste Ansatz, bei dem durch Klassen im HTML gestaltet wird, ist sehr gut geeignet für Rapid Prototyping, da man sich auf Inhalt und Struktur konzentrieren kann. Zur Gestaltung muss das CSS weder geschrieben noch modifiziert werden. Einfache Regeln ermöglichen ein grundsätzliches Design, an dem dann später eventuell weitergearbeitet wird. Allerdings werden viele Klassen in das HTML geschrieben. Und eine Designänderung erfordert eine Änderung am HTML (Austausch einer Klasse), anstatt diese im CSS vorzunehmen.
Beim zweiten, auf das CSS konzentrierten Ansatz, werden wenige Regeln dupliziert. Das CSS wächst unweigerlich an, dafür bleibt das HTML ein wenig kompakter.
Es ist unnötig, sich theoretisch für eine der beiden Varianten zu entscheiden. Aus der konkreten Projektsituation heraus sollte einer der beiden Wege eingeschlagen, dann aber auch konsequent zu Ende gegangen werden.