In den letzten Tagen habe ich mir wieder ein paar HTML-Templates angesehen. Drum hier noch ein paar Tipps, wie man seine CSS-Klassen sprechend benamst, und ein wenig Verschachtelung. Immer wieder predige ich ja, dass eine CSS-Klasse nicht aussagt, was sie macht, sondern welche Funktion das benamste Element im Gesamtkontext hat. Immer wieder bin auch ich daran gescheitert, bei einem mehrspaltigen Layout die Spalten so zu benennen, dass es einerseits schlüssig ist, andererseits aber nicht column-left dabei rauskommt.
Da man bei der Strukturierung von Content, also auch bei der Vergabe der Klassen, aber nicht vom Design, sondern ausschließlich vom Inhalt gelenkt wird, sollten die Spalten also gemäß ihrer Wichtigeit und infolgedessen auch der Reihenfolge im Quelltext durchnummeriert sein. Die Klassen könnten also content1, content2 usw heißen. Column lehne ich damit auch gleich ab.
Verschachtelung
Ein gern eingestztes Designelement sind Boxen. Man organisiert seinen Inhalt in Kästchen auf der Seite, schafft damit eine klare Abgrenzung und vielleicht die Möglichkeit, den User seinen Content umorganisieren zu lassen. Oft sollen sich diese Boxen nun auch in Farbe und Form voneinander unterscheiden. Haben aber trotzdem ähnliche Merkmale.
Hier sollte um Gottes Willen niemals jede Eigenschaft über eine Klasse gesteuert werden (Bordercolor, Farbe der Überschrift und der Links) sondern es empfiehlt sich folgendes Vorgehen.
Angenommen, wir unterscheiden bei unseren Boxen die Zustände voll, leer, aufgeklappt und zugeklappt. Dann könnte unser html ungefähr so aussehen:
<div class=“box“>
<h3>unsere Box</h3>
<p>ne Menge interessanter Inhalt, der aber erst [...]</p>
</div>
Angenommen, unsere Box ist gerade blau, oben hat sie eine kleine Leiste mit einem (+)-Symbol um zu signalisieren, dass man sie aufklappen kann, die Rahmenfarbe ist ebenfalls blau, Titel und Text sind Dunkelgrau. Nun reicht:
<div class=“box aufgeklappt“>
<h3>unsere Box</h3>
<p>ne Menge interessanter Inhalt, der aber erst in der aufgeklappten Box sichtbar wird</p>
</div>
um unsere Box zu vergrößern, sämtliche Farben aller Elemente zu verändern usw.
Im Stylesheet sähe das in etwa so aus:
div.box {
padding: 10px 0 0 0;
background: url(balkensprite.png) no-repeat 0 0; /* justiert auf Zustand (+) */
border: 1px solid blue;
}
div.box h3, div.box p {
color: grey;
}
div.box.aufgeklappt {
padding: 10px 0 0 0;
background: url(balkensprite.png) no-repeat 0 30px; /* justiert auf Zustand (-) */
border: 1px solid red;
}
div.box.aufgeklappt h3, div.box.aufgeklappt p {
color: #000;
}
Padding ist für viele eine Elementeigenschaft, die auch irgendwie Platz macht. Padding sollte aber nur benutzt werden, wenn ein Element seine Kind-Elemente ein wenig vom Rand weg halten soll.
