Da ich beim Programmieren dem Grundsatz “Alles nur einmal und nur einmal!” folge versuch ich das auch beim Aufbereiten meiner Cascading stylesheet files. Bereits Geschriebenes soll wiederverwendet werden, da es 1. Schreibarbeit erspart und 2. das System flexibler gestaltet. Nun wie verwendet man CSS-Definitionen weiter? Der Clou des Ganzen liegt bei der Angabe des class-attributes unserer Elemente. Man übergibt einfach mehr Klassen-definitionen getrennt mit einem Leerzeichen. Bsp:
- <button class="firstClass secondClass">
Ein kurzes Beispiel zur Veranschaulichung:
- <style>
- .menu { padding:20px; border:1px solid red; }
- .menuItem { padding:10px; background-color:green; }
- .menuItemSpecial { color:black }
- </style>
- <div class="menu">
- <div class="menuItem">Punkt 1</div>
- <div class="menuItem">Punkt 2</div>
- <div class="menuItem menuItemSpecial">Spezieler Punkt 3</div>
- </div>
Man sieht hier schön, dass ein Menü erstellt wird. Jeder Menü beinhaltet Menüpunkte. Somit wird die Definition eines allgemeinen Menüpunkts definiert (z.b. Breite, Einrückung, etc), in unserem Fall die Klasse .menuItem. Damit nun auch andere Menüpunkte dieselben “Eigenschaften” wie der Basismenüpunkt haben erstellen wir eine klasse .menuItemSpecial und verwenden diese dann gemeinsam mit der .menuItem. Dies ähnelt irgendwie der Vererbung ; )
Vorteil der Gschicht’: Ändert sich nun die Basisdefinition unserer Menüpunkt so muss mans nicht überall nachziehen sondern ändert die angaben in .menuItem