css und html

Aufbauend auf Nicos sehr gute css Guidelines und auf dem Problem, dass ich einfach noch nirgends eine vollständige Referenz gefunden habe, die Selfhtml aber einfach zu umfangreich und zu wenig führenden Charakter hat, will ich hier einen kleinen Abriss als roten Faden notieren.

css

  • alle Tags, Klassen und IDs sind ausschließlich kleingeschrieben
  • bestehen IDs oder Klassen aus mehreren Wörtern, werden sie mit einem – (Minus) getrennt
  • die Kurzschreibweise ist zu bevorzugen

div#sidebar.black {

border: 1px solid black;

}

Klassen und IDs

IDs dienen der Strukturierung eines Dokuments. Es sollten so viele IDs wie unique Elemente, nicht viel mehr geben. Weil es grundsätzlich nicht verkehrt ist, zusätzlich Wrapper einzubauen, ist es sinnvoll, mit einem umklammernden Container zu starten:

  • #container
    • #head
    • #navigation
    • #content
    • #sidebar
    • #footer

Über Klassen definiert man das Aussehen einzelner Elemente. Aber Achtung! Klassennamen verraten nicht das Aussehen eines Elementes.
Falsch:
#navigation .small-box-with-grey-borders
Richtig:
#navigation .box.even

HTML

Grundsätzlich ist die richtige Verschachtelung zu beachten: Selfhtml. Oder in Kurz: Versuche nie ein Blockelement in ein Inline-Element zu tun.

Advertisements

3 Kommentare zu “css und html

  1. codecandies sagt:

    Hi,

    das mit den Klassennamen ist ein guter Hinweis. Werde ich in die Liste noch aufnehmen.

    Sieht man ja wirklich öfter mal, Klassen, die .red oder ähnlich heissen… :))

  2. […] Klassennamen verraten nicht das Aussehen eines Elementes. (via) D.h. Klassen heissen nicht “.grey-border” oder […]

  3. […] schon hier beschrieben, beschreibt eine css-Klasse nicht, wie etwas aussieht, sondern was es ist. Darüber […]

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s