✔ Styles richtig zuweisen

[hoctar]

Hallo

sagen wir mal ich habe diese Struktur:

<div class="content">
    <h3>Title</h3>
    <ul>
        <li class="name">Name</li><li class="wert">Wert</li>
    </ul>
    
    <label for="name">Test</label>
    <input id="name" type="checkbox" name="" value="" />
</div>

Nun möchte ich diese Stylen.

<style type="text/css">
<!--

    .content h3 {
        margin: 10px;
    }

    .content ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .content li {
        border: 1px solid green;
    }

//-->
</style>

Wie man sieht spreche ich die Elemente direkt an, also durch den Tag-Namen. (die Klasse content ist eine art scope)
Ist dies zu empfehlen, oder sollte ich lieber allen Elementen einen eigene Klassennamen geben und dann die style zuweisung durch den Klassennamen machen ?
Die letzte Methode würde aber zu mehr code fürhen und vllt. alles etwas unübersichtlich machen.
Wie macht ihr es ?

 

[Maik]

Hi,

eine pauschale Regelaussage gibt es hier nicht, da es von Fall zu Fall unterschiedlich ist, wie die Selektoren zu definieren sind.

Ich strukturiere im Stylesheet die einzelnen Formatierungen mit den Selektoren für Nachfahren in Anlehnung an das jeweilige Elternelement (#header, #navi, #content, #footer), sofern im Verlauf des Dokuments für einen HTML-Elementtyp (z.B. <ul><li></li></ul>) in den einzelnen Seitenbereichen unterschiedliche Formatierungen vorzusehen sind.

#header ul { ... }
#header ul li { ... }

#navi ul { ... }
#navi ul li { ... }

#content ul { ... }
#content ul li { ... }

#footer ul { ... }
#footer ul li { ... }

Weitere (zusätzliche) ID- oder Klassen-Bezeichner für die Nachfahren-Elemente nutze ich im CSS erst, wenn sie tatsächlich zur Spezifikation vonnöten sind, um z.B. in der Formatierung bei zwei oder mehreren Elementen gleichen Typs eine weitere Unterscheidung treffen zu können.

mfg Maik

 

[hoctar]

Vielen Dank für die Info

Wie verhält sich es eigentlich mit der Performance?
Also bei Javascript steigt die Performance wenn man die Elemente direkt selektiert. Ist dies bei CSS genau so?

 

[Maik]

CSS-Selektoren haben meines Wissens keinen Einfluß auf die Performance.

mfg Maik