Seit einigen Wochen arbeite ich an einem Kundenprojekt welches ziemlich umfangreich ist. Es gibt verschiedene Interfaces, Layouts und ziemlich unterschiedliche Styles. Um keinen Performance Problemen entgegenzulaufen empfiehlt es sich natürlich von Anfang an “optimiert” zu arbeiten.
Um ehrlich zu sein fällt auch mir diese Art von arbeiten nicht leicht. Immer wieder erstelle ich mein Mockup und muss es im Nachhinein wieder ändern. Klar – die GTD-Typen unter den Lesern meinen bestimmt das dies natürlich nicht schwer ist, schliesslich wird nur einmal eine Struktur erstellt und so exotisch die Klassen auch klingen und die ID’s anmuten – am Ende läuft es tadellos.

Ich persönlich lege jedoch sehr viel Wert auf “Re-usability” – sprich: den Code auch wieder zu verwenden. Sei es an anderen Stellen im selben Projekt, oder etwa gar in ganz anderen Projekten.

Re-Usability im Sinne von CSS ist gar nicht so leicht umzusetzen. Ich überlegte lange u.a. ein Framework als Basis einzusetzen, überlegte Namensstrukturen für die CSS-Klassen damit diese auch logisch erscheinen und versuchte mich sogar mit CSS Attribute Selektoren.

Bei meiner Recherche stieß ich dann auf eine Variante, die es mir leichter machte CSS zu schreiben und zwar strukturiert – logisch und wiederverwendbar.

An dieser Stelle möchte ich noch sagen das ich kein Meister des CSS bin, jedoch habe ich im gesamten WWW nichts gefunden das auch nur annähernd auf diese Methode eingeht – schon gar keine Erfahrungsberichte wie es sich in den verschiedenen Use-Cases verhält.

CSS Combined Classes

Diese Methode ist grundsätzlich simpler als man vielleicht im ersten Moment denkt, den es handelt sich hierbei um die Kombinierung verschiedener Klassen und die daraus resultierende gezielte Ansprache (im Sinne von ansprechen) an das jeweilige Element.

Ein kleines Beispiel:

Wir haben ein Basis Layout bestehend aus einem Header, Body und Footer. Unser Markup sieht wie folgt aus:

HTML Markup:

Wir wollen nun allen 3 DIV Containern eine Weite von 100% geben, ausserdem noch ein margin: auto. Padding wird auch vergeben, jedoch variiert dieses zwischen den Containern.

CSS: Variante 1:
Hier behandeln wir jedes Element separat. Wird diese Methode ständig angewandt häuft sich die Filesize rasant.

.header {width: 100%; margin: auto; padding: 0;}
.body {width: 100%; margin: auto; padding: 20px 0;}
.footer {width: 100%; margin: auto; padding: 20px 0 0 0;}

CSS: Variante 2:
Hier vergeben wir die identischen Eigenschaften an ein ganzes ‘array’ an Klassen – auch ein Standard-Padding wird übernommen, welches darunter vom spezifischeren Padding überschrieben wird.

.header, .body, .footer {width: 100%; margin: auto; padding: 0;}
.body {padding: 20px 0;}
.footer {padding: 20px 0 0 0;}

Beide Varianten sind eher unübersichtlich strukturiert und lassen kaum wiederverwendbare Styles zu. Wird zb die Klasse Header später im Markup zb für den Titel eines Widgets genutzt, erhält dieser auch wieder automatisch width: 100%; margin: auto; und padding: 0; – es sei den eine spezifischere Regel überschreibt diese – am Ende jedoch wird es ziemlich unübersichtlich, speziell wenn immer wieder eine Regel eine andere spezifischere überschreibt.

Die CSS Combined Classes Methode

besteht aus verschiedenen Teilen.
Erst benötigen wir ein Klassen-Schema welches wir in einem Class Constructor definieren. Dies ist nichts sonderlich exotisches – lediglich ein Notizblatt (oder Kommentar) auf welchem wir unsere allgemeine Klassenstruktur notieren.

CLASS CONSTRUCTOR: Beispiel:

/*
 * CLASS CONSTRUCTOR
 * -----------------
 * .shop	= our unique identifier for all shop related elements.
 *
 * .page	= if it is a page. This class is good for overall page styling
 * .widget	= if it is a widget.
 *
 * .product = our unique identifier for the products page (multi & single)
 * .order	= our unique identifier for the order page
 * .account	= our unique identifier for the account page
 *
 * .single	= if it is a single product
 * .multi	= if it is a multi product
 *
 * .section = if it is a section within a page
*/

Das eigentliche Konzept der CSS Combined Classes beruht darauf NIE eine Klasse alleine zu verwenden. (ausser die Klassen des Class Contructors)
Es sollten immer min. 2 Klassen genutzt werden – und es gilt: je mehr desto besser.

Wir wenden dieses Konzept nun auf unser Beispiel an:

CLASS CONSTRUCTOR

/*
 * CLASS CONSTRUCTOR
 * -----------------
 * .header	= our unique identifier for all header elements.
 * .body     = our unique identifier for all body elements.
 * .footer	= our unique identifier for all footer elements.
 *
 * .section = if it is a section within a page
*/

HTML Markup: with CSS Combines Classes
Wir haben an dem Markup selbst nichts verändert, lediglich jedem Container die zusätzliche Klasse ‘section’ hinzugefügt.

Unser CSS sieht folgendermaßen aus:

CSS: Variante 3: with Combined Classes

.section {width: 100%; margin: auto;}

.header.section {padding: 0;}
.body.section {padding: 20px 0;}
.footer.section {padding: 20px 0 0 0;}

Wir haben nun der section class width: 100%; und margin: auto; verpasst. Der Klassenname Section ist ziemlich allgemein gewählt und definiert einen “Bereich”
Für das Padding haben wir nun auf ‘combined classes’ gesetzt. Dies erlaubt uns die Klasse .header, .body und .footer in anderen Teilen wieder zu verwenden wie zb in Widgets, Pages,…

Dies ist jetzt natürlich nur ein kleines Beispiel gewesen. Richtig effizient wird dies erst in komplexeren Strukturen – wo es sich zum Vorteil erweist logisch klingende CSS Klassennamen zu nutzen die “fast” wie ganze Sätze klingen könnten.

Zum Abschluss möchte ich sagen das es sich bei dieser Methode um ein Experiment von mir handelt. Bisher habe ich nicht viel darüber gelesen (gefunden) noch weiß ich etwas von dessen praktischen Anwendung. Mein derzeitiges Projekt in welchem ich diese Methode verwende funktioniert tadellos – und das auf sämtlichen Browsern – jedoch habe ich noch keine umfangreichere, langfristige Tests durchgeführt.

Falls du selbst diese Methode schon mal ausprobiert hast würde ich mich sehr darüber freuen wenn du mir deine Meinung zu dem Thema mitteilen würdest.

Conclude: Die Namen “CSS Combined Classes” sowie “Class Constructor” wurden von mir für diesen Zweck erfunden bzw. von ähnlichen Methoden abgewandelt. Teilweise gibt es Hinweise auf solche Methoden, lediglich sind mir keine praktischen Anwendungsbeispiele bekannt.