Hier soll es ganz kurz mal um sinnvolle Benamung von Klassen und IDs gehen. Hintergrund dieser Betrachtung ist, dass Webseiten heute meistens nicht aus einer Datei bestehen, die man von vorne bis hinten durchlesen kann, sondern aus vielen vielen kleinen Schnipseln, die zu tausenden in ein CMS kopiert werden. Darum ist es bei Stylesheets, genau, wie in Javascript, in php und in all den anderen Sprachen, die wir hier noch behandeln wollen sehr sehr wichtig, wie man etwas nennt:
Sprechend klassifizieren
Wie schon hier beschrieben, beschreibt eine css-Klasse nicht, wie etwas aussieht, sondern was es ist. Darüber hinaus sollten Klassen von vornherein so eindeutig sein, dass man nicht schon während des Entwurfs seine Konvention ändern muss:
Falsch:
h2.title
Besser:
h2.teaser-listing
Denn es ist absehbar, dass im restlichen Dokument noch weitere Titel folgen werden.
Im vorigen css-Post habe ich schon beschrieben, wie man grid und Typographie, aber natürlich auch Farbgebung und Linkverhalten voneinander trennen kann, das erspart übrigens auch, ständig neue Deklarationen für immer dasselbe erfinden zu müssen. Angenommen, wir haben eine vertikal dreigeteilte Seite (Header, Body, Footer), die horizontal zweigeteilt ist. Dann wäre es doch sinnvoll, die Elemente so zu benamsen und zu deklarieren:
.column-left {
float: left;
}
.column-right {
float: right;
}
#header .column-left {
margin: 0 5px;
}
#header .column-right {
margin: 0;
}
#content .column-left {
border: 1px solid;
}
#content .column-right {
background: #f2f2f2;
}
#footer .column-left {
background: #cccccc;
}
#footer .column-right {
background: #f2f2f2;
}
Spare IDs
Eine ID sollte im html-Dokument etwas besonderes sein. Es sollte eine Ehre sein, eine ID zu bekommen. Hier ist es sinnvoll, xhtml einfach mal zu xml zu abstrahieren und zu überlegen, welches Element einer Seite so wichtig ist, dass ich ein eigenes xml-Element dafür deklarieren würde. Da IDs also nur höchst selten anzutreffen sind, ist es umso wichtiger, aber auch einfacher, sie sprechend zu benennen. Einzige Ausnahme sind hier Elemente, auf die mit Javascript über document.getElementById zugegriffen werden muss. Wie sich das vermeiden lässt, soll ein nächster Post erklären.
Cyberer's Weblog 