So toll CSS ja auch ist, bei umfangreichen Styles für viele verschiedene Seiten stösst es auch an Grenzen. Mein Stylesheet ist jetzt 9KB groß und man verliert doch sehr schnell die Übersicht. Ein Konzept um das besser zu strukturieren wäre da hilfreich, momentan helfe ich mir halt mit (hoffentlich) guten Bezeichnern und Kommentaren im CSS.
Deswegen habe ich auch – nachdem ich mit dem Design jetzt erstmal fertig bin – mein Stylesheet einem Refactoring unterzogen. Logisch geordnet, Kommentare geschrieben und versucht Redundantes und nicht Benötigtes rauszuschmeissen. Sehr hilfreich und erstmals richtig von mir verstanden ist die Verwendung von Selektoren, damit man nicht in die classitis kommt.
Eine Sache die ich nicht richtig entscheiden konnte ist die Verwendung von einem CSS-Block für mehrere verschiedene Elemente:
.post .meta, .post .meta A,
.left a, .right a,
.archive a, li.arch-day a {
color: #ccf;
font-weight: normal;
letter-spacing: 0;
text-decoration: none;
border: none;
}
Als ewiger Optimierer finde ich das natürlich gut *g*, aber zu einer besseren Übersichtlichkeit und Wartbarkeit führt das nicht gerade.
Sieht glatt danach aus, als wolltest du dafür eigentlich eine Klasse machen. Du weißt, dass man jedem Element mehrere Klassen gleichzeitig zuweisen kann? ;)
Sehr geehrter Herr Webmaster,
grad war hier voreingestellt:
flo\art-core
obwohl ich ja letztesmal flo\art-core angegebeen, da stimmt wohl was mitm Escaping ned…
Mein Relaunch hat die Classitis
Beschäftige mich zur Zeit mit HTML und CSS Design (daher ist es auch so ruhig hier) und fand dabei folgende Links hilfreich, vielleicht geht es anderen ebenso: Lockergnome Redesign bei Photo Matt (bei dem ich auch einige Ideen für den Relaunch geklaut …
Für mich sieht das instintiv so aus, als würde man da praktische Eigenschaften von CSS, nämlich Vererbung und die Kaskade nicht genutzt werden. Allerdings ist Dein Stylesheet stark auf Deinen HTML-Code bezogen, sozusagen Classitis und IDitis.
Ich versuche da in letzter Zeit einen anderen Ansatz. Erst wird dann normale HTML (p, a, strong, etc) formatiert dann darunter werden spezielle Fälle, die vom simplen Vokabular abweichen, spezifiziert. Und dann erst kommt so etwas wie Positionierung, anderes Aussehen für Menülinks, Elemente, die nur auf einen Zweck formatiert werden. Der Vorteil dabei ist, daß durch die Kaskade des Stylesheets die bisher spezifizierten Eigenschaften schon vorliegen, man kann also Neues hinzufügen, wenn nötig und das, was man ändern will überschreiben.
Grob gesagt ist der Ansatz »Vom Allgemeinen zum Speziellem« anstatt »Spezielles nach gleichem strukturieren«. Klappt auch nicht immer, hilft aber.
Worauf soll mein Stylesheet denn sonst bezogen sein, wenn nicht auf meinen HTML-Code? ;-)
Wenn man das Layout mit CSS und divs macht kommt man imo um viele IDs nicht drum rum, die Navigationslisten tun ihr übriges. Durch die Drop-Shadows kamen dann noch ein paar überflüssige divs dazu.
Und was meinst du in dem Zusammenhang mit Kaskade?
Du hast aber Recht, Vererbung habe ich versucht zu vermeiden, weil ich damit noch mehr die Übersicht verliere. Jedenfalls hatte ich bisher nicht den Eindruck damit könne man übersichtlicheres und kürzeres CSS basteln. Lasse mich aber gern vom Gegenteil überzeugen :)
Hast du ein Beispiel für deinen Allgemein zum Speziellen Style?
Im Moment nichts wirklich veröffentlichbares, am ehesten noch das Stylesheet bei mir. Allerdings ist das wirklich marginal, ja.
Die Kaskade sorgt dafür, welcher Selektor zum tragen kommt, indem ein Wert für den Selektor ausgerechnet wird. Mal unabhängig von Browser- bzw. Nutzerstylesheet bleiben immer noch die Selektoren des Autors übrig. und da gilt wieder auch der Grundsatz vom Allgemeinen zum Speziellen, hier von Element über Klasse über ID zum style-Attribut.
Aber ja, ein Stylesheet zu entwickeln, daß wirklich recht allgemein ist und nicht nur auf ein gegebenes Konstrukt von Klassen und IDs einwirkt, das ist wirklich große Kunst. Eben weil man so allgemein bleiben muß. Das W3C hat einige, diese sind aber naturgemäß recht langweilig.