Namensregeln/Benennungstaktiken bei großen HTML/CSS-Grundgerüsten

by ·8 Kommentare

Okay, mal ein reiner Nachfragepost.
Ich hab letztens ein größeres Webprojekt gestartet und bin mittlerweile unsicher was die Namensregeln / Benennungstaktiken angeht.

Ich male das HTML Grundgerüst mal grob auf, nur der Header sollte reichen, damit klar wird, was ich meine.

html4strict“ line=“1″>

Ich war grad dabei die CSS Eigenschaften von

.header-right-bar-item

zu setzen und stutzte.
Mir gefällt das so nicht.

Wie regelt ihr die Namensgebung bei komplexeren HTML/CSS Strukturen?

html4strict“>

#1 #2 #3 .1 { }

oder

html4strict“>

.1-2-3-1 { }

oder organisiert ihr diese Struktur des Codes komplett anders.

Mich würde alles freuen, womit ich mich in der Richtung informieren kann. Taktiken, Beispiele, Links, Tutorials usw.

8 Kommentare

  2. Also bei uns werden die Elemente nach ihrer Funktion benannt. Solche Aufbau-Namenskonstrukte, bei denen die Verschachtelung sich auf den Namen auswirkt, haben wir nicht (z.B. „header-right-bar-item“).

    Du gehst ja von einem Rohdesign aus, das du z.B. auf einem Blatt skizzierst hast. Durch diese Skizze positionierst du Funktionen: Header, Footer, Content, Sidebar im Content, Logo im Header, Menü im Header, etc.

    Für diese einzelnen Funktionen solltest du explizite Begriffe festlegen (das Wording). Wie jetzt? Ein „header-right-bar-item“? Häh? Aaah! Ein „menu-item“.

  3. @SkaveRat:
    Was wäre denn in diesem Fall der Vorteil von Listen gegenüber der DIV Anreihung?

    Ist meine DIVitis (ich gebe zu, diesen Stil fahre ich zurzeit) denn irgendwie nachteilig?

    @Kenny:
    Okay, muss mal drüber nachdenken wie sich das umsetzen lässt. Einen sprechenden Namen für jedes Element zu finden ist halt schwierig. Ich habe viele Menüs und nicht jedes Menü ist so einzigartig, dass sich ein Name finden lässt.
    In meinem Layout gibt es bis jetzt 32 DIVs, im Header allein 8 verschiedene. Einen sinnvollen Namen für alle Bereiche zu finden ist mir anfangs schwer gefallen, weswegen ich zu dieser Vererbungsregelung übergegangen bin.

  4. Es ist im grunde, genau wie eine navigation, eine Liste an Links. Sogesehen: Listen.

    Einfach zeug in DIVs packen ist immer schlecht, da keine Semantik in DIVs steckt. benutze so wenig DIVs wie möglich.
    Ich zähle gerade 16 DIVs alleine für den header – VIEL zu viel.
    Ausserdem hast du bei Listen direkt weniger Klassen, da du die einzelnen Elemente über zB
    #menu ul li a
    ansprechen kannst

  6. Hey Hannes,
    „header-right-bar-item“ ist überflüssig „bar-item“ reicht, du kannst es dann über „#header-right .bar-item“ ansprechen.

    CSS Verkettungen mit „#1 #2“ sind grundauf schonmal verkehrt. eine ID darf es nur einmal pro HTML-Quelltext geben, also reicht „#2“ völlig aus 🙂

    „#header-right-bar“ sollte in deinem Beispiel tatsächlich eine UL sein und kein DIV.

  7. @SkaveRat @Oliver: Mit dem ul-li geh ich mittlerweile konform. Hab mich noch etwas belesen.

    @SkaveRat: Der Google Code Link war informativ, nicht nur zu diesem Problem sondern allgemein, auch sehr lustig diese Kuriositäten da.

    @Kenny: Na gut das mit den vielen Menüs war übertrieben. 😛
    Ich habe die Navigation und diese Header Leiste.

    Ich glaub ich schreib den halben Code um.

  8. @Oliver:

    Eine Konstallation wäre aber denkbar, die #1 #2 {…} rechtfertigen könnte:

    #1 #2 { … } =
    Container #2 liegt in x.html in Container #1

    #2 {…} =
    Container #2 liegt in y.html außerhalb von Container #1 und hat abweichende Stilangaben.

    Aber in derselben HTML-Datei darf es jede ID nur ein einziges Mal geben, das stimmt.

    Zugegeben, so was dürfte in der Praxis kaum vorkommen, aber möglich ist es. Ich tendiere allerdings zu einer sparsamen Verwendung von IDs und nehme lieber Klassen, also etwa
    div.1 {…}

    Eigentlich machen IDs nur dann wirklich Sinn, wenn sie durch JavaScript angesprochen werden sollen.

    Ich würde jedenfalls auch so wenige DIVs wie möglich verwenden und die Navigation auf jeden Fall in eine Liste packen, nicht zuletzt aus Gründen der Suchmaschinenfreundlichkeit.

Schreibe einen Kommentar