Das war eine klassische Situation, in der das Styling komplett von der HTML-Struktur abh\u00e4ngig ist (davon abgesehen, dass ich so jeden Link innerhalb der Box in der Sidebar selektiere, was ich wahrscheinlich gar nicht m\u00f6chte). Wenn ich nun ein weiteres Auf diese Weise kann ich meine classes unabh\u00e4ngig von der Markup-Struktur einsetzen. Ich kann den Button aus einem Container herausnehmen, in einem anderen einsetzen und erhalte das gleiche Ergebnis. Er gestaltet sich nicht aufgrund seines Umfeldes. Diesen Mehrwert habe ich damals nicht erkannt. Ich wollte mein Markup m\u00f6glichst unabh\u00e4ngig von classes halten, erzeugte dadurch aber nur die Notwendigkeit mein CSS von der HTML-Struktur anh\u00e4ngig zu machen. Dabei habe ich mich auf fixe Struktur verlassen. Doch Strukturen \u00e4ndern sich und ich bin lieber darauf vorbereitet. Denn einem HTML-Element eine andere class zuzuweisen ist meistens schneller als mein CSS strukturell zu \u00fcberarbeiten. Und es ist auf jeden Fall leichter nachvollziehbar und verst\u00e4ndlicher.<\/p>\n Das tolle an Lego Steinen ist, dass man sie immer wieder verwenden kann und auch seinen Code sollte man in verschiedenen Situationen m\u00f6glichst wieder verwenden k\u00f6nnen. Sehen wir uns ein Beispiel f\u00fcr das Stylen von \u00dcberschriften an. So eine Art Stylesheet wird vielen vertraut vorkommen:<\/p>\n Das Styling der \u00dcberschriften ist an die HTML-Elemente gebunden und l\u00e4sst sich so nicht auf andere Stelle \u00fcbertragen. Das zwingt einen dazu die jeweiligen Headings dem gew\u00fcnschten Styling nach zuzuweisen (was semantisch wie Suchmaschinentechnisch wenig w\u00fcnschenswert ist) oder oder man endet mit solchen Selektoren, um mit Abweichungen umzugehen:<\/p>\n Wesentlich nachhaltiger und einfacher ist es auch hier classes zu schreiben:<\/p>\n Dieser Herangehensweise erfordert zwar, dass ich jeder \u00dcberschrift eine class zuweise, doch das ist in Summe leichter verst\u00e4ndlich und wartbarer, als komplexe CSS-Selektoren zu schreiben, zu ver\u00e4ndern und zu erweitern.<\/p>\n Um die Wiederverwendbarkeit von classes wirklich zu gew\u00e4hrleisten, sollte man classes so schreiben, dass sie unterschiedlich miteinander kombiniert werden k\u00f6nnen. Ganz so wie verschiedene Lego Bausteine, die ein neues Ganze ergeben. Das erreicht man, wenn man Struktur und Aussehen m\u00f6glichst trennt, also modular macht. Und das nach dem Motto des \u201eSingle Responsibility Principle\u201c: ein Ding kann eine Sache, aber die wirklich gut. F\u00fchren wir unser Button-Beispiel von vorher etwas weiter aus. Wahrscheinlich werde ich mehrere Arten von Buttons auf meiner Seite verwenden, z.B.:<\/p>\n Diese Buttons k\u00f6nnte es dann auch noch in verschiedenen Gr\u00f6\u00dfen geben:<\/p>\n Jetzt k\u00f6nnten wir f\u00fcr all diese Buttons einzelne classes definieren, wie z.B.:<\/p>\n Das bedeutet aber, wir h\u00e4tten nun zw\u00f6lf<\/em> verschiedene classes zu warten. Und auch zw\u00f6lfmal das Grund-Styling f\u00fcr unseren Button zu definieren und zu wiederholen, was nicht besonders dry<\/a> ist. M\u00fcssen wir z.B. die generelle Gestaltung des kleinen Buttons anpassen, dann m\u00fcssen wir das vier mal machen \u2013 f\u00fcr den normalen, den prim\u00e4ren, sekund\u00e4ren und disabled Button. Das wird in der Wartung ziemlich schwierig und un\u00fcbersichtlich. Der modulare Ansatz dazu ist folgenderweise:<\/p>\n In Summe sind es nur sieben classes mit denen man theoretisch zw\u00f6lf Varianten darstellen kann, je nachdem, wie man sie kombiniert. Dabei sind die Aufgaben der verschiedenen classes m\u00f6glichst getrennt. Das Basis-Styling<\/strong> \u00fcbernimmt Darauf folgen verschiedene Steine, die das funktionale Styling<\/strong> \u00fcbernehmen. Das sind die classes <\/p>\n M\u00f6chte ich z.B. nun die Abmessungen der kleinen Buttons oder die Farbe der Disabled Buttons anpassen, muss ich daf\u00fcr nun jeweils eine \u00c4nderung vornehmen. Das ist nachvollziehbar und schnell erledigt. Au\u00dferdem beeinflusse ich damit nicht die all Buttons \u00fcberschneidenden Regeln. M\u00f6chte ich, das ein spezieller Button auf meiner Seite anders aussieht, kann ich das im HTML erg\u00e4nzen. Ich habe auf CodePen eine Demo geschrieben<\/a>, bei der man das gleich selbst ausprobieren kann.<\/p>\n See the Pen CSS buttons as Modular Multiple Class approach<\/a> by Oliver (@glyphe<\/a>) on CodePen<\/a>.<\/p>\ndiv<\/code> erg\u00e4nze, eines wegnehmen oder den Button auch im Footer einsetzen m\u00f6chte, muss ich nicht nur mein HTML sondern auch das CSS umschreiben. Viel einfacher ist es hier eine class zu vergeben und diese zu selektieren:<\/p>\n<a class="btn" href="#">Button<\/a>\n<\/pre>\n
.btn {\n \/* Styling f\u00fcr einen Button *\/\n}\n<\/pre>\n2. Classes wiederverwendbar schreiben<\/h2>\n
h1 {\n \/* Styling f\u00fcr h1 *\/\n}\n\nh2 {\n \/* Styling f\u00fcr h2 *\/\n}\n\nh3 {\n \/* Styling f\u00fcr h3 *\/\n}\n<\/pre>\nh1,\n.section-header h3,\n.section-teaser h2,\n.promobox-title {\n \/* Styling f\u00fcr h1 \/*\n}\n<\/pre>\n.alpha {\n \/* Styling f\u00fcr h1 *\/\n}\n\n.beta {\n \/* Styling f\u00fcr h2 *\/\n}\n\n.gamma {\n \/* Styling f\u00fcr h3 *\/\n}\n<\/pre>\n<h3 class="alpha">Style von Überschrift 1 in einer h3<\/h3>\n<p class="gamma">Style von Überschrift 3 in einem paragraph<\/p>\n<\/pre>\n
3. Classes modular schreiben<\/h2>\n
\n
\n
.btn--default {}\n.btn--default--big {}\n.btn--default--small {}\n\n.btn--primary {}\n.btn--primary--big {}\n.btn--primary--small {}\n\n.btn--secondary {}\n.btn--secondary--big {}\n.btn--secondary--small {}\n\n.btn--disabled {}\n.btn--disabled--big {}\n.btn--disabled--small {}\n<\/pre>\n.btn {\n \/* Grundeinstellungen aller Buttons *\/\n display: inline-block;\n text-decoration: none;\n font-family: sans-serif;\n padding: 1em 2em;\n \u2026\n}\n\n.btn--default {\n \/* Stilistische Einstellungen des Standard-Buttons *\/\n background-color: blue;\n color: white;\n \u2026\n}\n\n.btn--primary {\n \/* Stilistische Einstellungen des Prim\u00e4r-Buttons *\/\n background-color: red;\n color: white;\n \u2026\n}\n\n.btn--secondary {\n \/* Stilistische Einstellungen des Sekund\u00e4r-Buttons *\/\n border: 2px solid blue;\n background-color: white;\n color: blue;\n \u2026\n}\n\n.btn--disabled {\n \/* Stilistische Einstellungen des Disabled-Buttons *\/\n background-color: lightgray;\n color: gray;\n \u2026\n}\n\n.btn--big {\n \/* Stilistische Abweichungen des gro\u00dfen Buttons *\/\n font-size: 1.5em;\n padding: 1.2em 2em;\n \u2026\n}\n\n.btn--small {\n \/* Stilistische Abweichungen des kleinen Buttons *\/\n font-size: 0.8em;\n padding: 0.5em 1em;\n \u2026\n}\n<\/pre>\n<a href="#" class="btn btn--default">\nStandard Button\n<\/a>\n\n<a href="#" class="btn btn--primary btn--big">\nPrimary Button Groß\n<\/a>\n\n<a href="#" class="btn btn--secondary btn--small">\nSekundärer Button klein\n<\/a>\n\n<a href="#" class="btn btn--disabled">\nDisabled Button\n<\/a>\n<\/pre>\n
.btn<\/code> mit dem generellen Einstellungen, die sich \u00fcber alle Varianten zieht (wie padding, margin, Schrift, display-Eigenschaften). Es ist praktische der erste Lego Stein, der allen Buttons zugrunde liegt.<\/p>\n.btn--default<\/code>, .btn--primary<\/code>, .btn--secondary<\/code> und .btn--disabled<\/code> mit verschiedenen Farben und Hintergrundfarben. Ein Button braucht so mindestens zwei classes. Um mit Abweichungen<\/strong> umzugehen, gibt es eine dritte Art von Steine. .btn--big<\/code> und .btn--small<\/code> definieren die Ver\u00e4nderungen in den Gr\u00f6\u00dfen vom Standard, der von .btn<\/code> definiert ist. Demnach m\u00fcssen sie auch als letzte zugewiesen werden.<\/p>\n![\"CSS](\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2016\/09\/css-wie-lego-modular-multiple-class-approach-in-css-2.jpg\")
<\/p>\n