Detlef G.: Brauch mal nen Blick von aussen

Beitrag lesen

Hallo Steffen,

Auch an die unvollständige CSS-Nutzung (<h1 align="center">) werd ich mich machen. Ich befürchte nur, dass ich noch mehr Klassen produziere ...

Wie viele h1 hast du pro Seite?
Welche voneinander unterschiedlichen Eigenschaften oder Attribute haben sie?
In welchen Elementen (mit welchen Klassen oder IDs) stehen sie, wenn sie abweichend formatiert werden sollen?

Wenn du diese Überlegungen anstellst (und nicht nur für h1) werden durch intelligente Nutzung des Nachfahrenselektors nicht so sehr viele Klassen benötigt.

und das CSS unnötig an Größe gewinnt.

Das CSS wird in der Regel nur einmal vom Browser angefordert, ein paar Byte mehr oder weniger spielen da keine große Rolle. Das HTML wird bei jeder einzelnen Seite neu übertragen. Also solltest du nicht versuchen ein paar Byte im CSS dadurch zu sparen, jede einzelne HTML-Seite etwas größer zu machen.

html, body, #starttext, #startlogos, ..., .left, .right { font-family:Georgia, Veranda, serif; }  

Kann es sein, dass dies eine Auflistung so ziemlich aller Elemente, IDs und Klassen der Seite ist?
Warum dann so aufwändig?
Das musst du doch nicht für jedes Element, jede ID und jede Klasse einzeln angeben. Wenn du die Schriftart nur für body angibst dürften sie alle diese   Schriftart erben.
Wenn du ganz sicher gehen willst, kannst du auch den Universalselektor (*) verwenden.

Auch { font-family:Georgia, Veranda, serif; } macht mich etwas stutzig.
Der Browser soll die Serifenschrift Georgia verwenden - wenn das nicht möglich ist, dann die serifenlose Schrift Veranda - wenn auch das nicht möglich ist, irgendeine Serifenschrift. Kling für mich ein wenig unlogisch.

Wenn du das HTML nicht unnötig aufblähen willst, vermeide HTML-Attribute und verwende nur so viele Klassen und IDs, wie wirklich nötig und sinnvoll sind.

Willst du das CSS nicht unnötig aufblähen, dann gib nicht jedem einzelnen Element alle Eigenschaften sondern nur gezielt denen, die von deinem Standard abweichen.

Ein paar Beispiele:
a, a:hover, a:active, a:visited, a:focus {...}
a {...} selektiert auch die restlichen, die dürften unnötig sein.

a:hover, ul.navi a:hover, ul#navigation a:hover {...}
Auch hier dürfte a:hover {...} reichen.

Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!