css optimieren

Tony White hat im Smashing Magazine einen ziemlich guten Überblick über sauberes und optimiertes css geschrieben.
Besonders erwähnenswert erscheint mir einerseits der Satz mit den Hacks:

Hacks against dead browsers are safe, but hacks against the living aren’t. None of them. Ever.

Das Entwickeln von css ist immernoch eine hohe Kunst die konzentriert in einem Texteditor gefummelt wird. Daher halte ich es für eine wichtige Regel, lesbar zu arbeiten, Abstände sinnvoll einzusetzen und wie bei Nico beschrieben auch Kommentare zu normieren. Das Einrücken allerdings halte ich für übertrieben, da es sich ganz sicher nicht über ein ganzes Projekt durchhalten lässt – und nur dann ist es auch sinnvoll.

Beim Schreiben meines ersten css-Posts hatte ich überlegt, wo ich den Artikel über wrapper gelesen haben könnte. Wrapper, also das Einschließen eines Elementes in ein zusätzliches Elternelement:
<div class=“img-wrapper“>
        <img />
</div>
dient vor allem dem multiplen Einsatz eines Design-Elementes an unterschiedlichen Stellen im Layout. Tony White zeigt aber noch einen schönen Grund für den Einsatz für Wrapper-Elemente. Ausgehend von der hier noch nicht beschriebenen Regel, css-Dateien sinnvoll zu gliedern oder am besten in mehrere Dateien aufzusplitten, müssten Elemente mehrfach deklariert werden:
grid.css
#content {
width: 200px;
height: 200px;
}
article.css
#content {
color: blue;
font-size: 1.2em;
}
nämlich einmal im grid-Teil und einmal im Typographie-Teil. Hier nun bietet sich aber auch wunderbar ein zusätzliches Element an, das wir vor das Element mit der ID „content“ setzen und das die grid-Informationen erhält. Noch viel besser finde ich hier allerdings die Verwendung mehrerer Klassen:
<div class=“content content-column“>
weil ich so sicherstellen kann, dass ich die typographischen Eigenschaften der Content-Spalte auch auf Elemente anwenden kann, die nicht automatisch auch Breite und Höhe dieser Spalte übernehmen sollen – ohne zusätzliche html-Elemente.

Advertisements