CSS Best practise for selectors

[selberbauer]

Hi,

Wie sollte man am Besten die Selektoren in den Stylesheets benutzen?

1. direkter selector
header, body, div

2. id's (ohne vollständigen Pfad)
#header

3. id's (mit vollständigen Pfad)
body #header

4. content_wrapper
#content_wrapper header h1

Welcher Style ist der momentane Standard und sollte eingehalten werden?

 

[Apfelring]

soweit ich weiß sidn direkte selektoren verpönt (außer body), rest ist relativ egal ob per class oder id selektiert wird, vollständige pfade nutzen zu MÜSSEN ist schlecht, zeugt zwar von ordentlichkeit, wird aber oft nicht so interpretiert

 

[ice-breaker]

Ein Selector sollte keine unnützen bzw. redundanten Angaben haben. Somit ist z.B. "body #header" nicht ok, weil die body-Information einfach unnötig ist, wird diese weggelassen, kann der Selector auch effizienter ausgeführt werden.

Man kann aber bei deinem Beispiel nicht sagen, welches der richtige Weg ist, da jeder dieser Selektoren eine komplett andere Bedeutung mit einem anderen Einsatzzweck hat. Einzig Nummer 3 kann man eben aus genanntem Grund ausschließen.

 

[selberbauer]

Ok, dann mal ein besseres Beispiel:

<div id="content_wrapper">
 <header></header>
 <div id="content"><img /></div>
</div>

dann gäbe es folgende Möglichkeiten zur Ansprache:

1. #header {}
2. #content_wrapper #content img {}
3. #content img {}

3. wäre zu bevorzugen, richtig?

 

[Daaron]

Es heißt in dem Falle schonmal nicht #header, da du hier einen Header-Tag, meine ID="header" verwendest...

Davon ab macht es natürlich Sinn, den Header allein für sich anzusprechen, wenn er denn manipuliert werden soll. Das 2. macht keinen Sinn. In der Struktur wird #content immer in #content_wrapper liegen. Sowas ist Trafficverschwendung.
Das 3. KANN Sinn machen, wenn im <header> auch irgendwann mal Bilder landen sollen, was ja gar nicht so abwegig ist. Oder im Footer...


Grundregel: Immer so wenig wie möglich, aber so viel wie nötig. Je kürzer man die Selektoren in allgemeinen Definitionen wählt, um so leichter kann man sie dann an entsprechenden Stellen mit Selektoren höherer Gewichtung überschreiben.

 

[selberbauer]

Grundregel: Immer so wenig wie möglich, aber so viel wie nötig. Je kürzer man die Selektoren in allgemeinen Definitionen wählt, um so leichter kann man sie dann an entsprechenden Stellen mit Selektoren höherer Gewichtung überschreiben.

danke!

 

[morcego]

Grundregel: Immer so wenig wie möglich, aber so viel wie nötig.

Drück wenn du musst, sonst nicht.
Ich weiß gar nicht, wo dieser Grundsatz überall Anwendung findet.
So wirklich gehaltvoll ist der nie, es ist eine Phrase.

Was du für dein Projekt brauchst, wird sich immermal wieder unterscheiden.

Aus eigener Erfahrung benutze ich möglichst wenige IDs. Eher Klassen, das reduziert das Chaos. IDs wenn ein JS das auch benötigt und nicht über den DOM ankommt.
Das CSS greift sich dann recht viel über das höchste Elemente im DOM.
Du musst abfedern können, das zb eine Liste mal im Header, im nav oder im article liegt.
Das geht nicht, wenn man da überall IDs ranpackt und die per css greift.
Dann lieber ganz wenig im form oder der ul formatieren, und den Rest über header ul(.class) {} greifen.
Aber das kann man fast gar nicht beibringen, das muss man einfach probiert haben.

 

[selberbauer]

Ich verwende Klassen immer bei häufig auftretenden Designs und um eine Art schnellformatierung zu haben:

<p class="bold red">Zum Beispiel</p>

Id's benutze ich nur bei einzigartigen Mutter-Objekten

 

[Daaron]

Drück wenn du musst, sonst nicht.
Ich weiß gar nicht, wo dieser Grundsatz überall Anwendung findet.
So wirklich gehaltvoll ist der nie, es ist eine Phrase.

Es gibt ja auch noch "Viel hilft viel!"...
Klar isses sehr allgemein gehalten, aber am Ende triffts zu.

Aus eigener Erfahrung benutze ich möglichst wenige IDs. Eher Klassen, das reduziert das Chaos. IDs wenn ein JS das auch benötigt und nicht über den DOM ankommt.

Du vergisst, dass man über IDs auch wunderbar navigieren, oder besser gesagt scrollen, kann. IDs sind eine durchaus vielseitige Sache. Es schadet nicht, seine Basis-Struktur aus Kopf, Content, Linke Spalte, Mitte, Rechte Spalte und Fuß jeweils in immer gleich benannte IDs zu strukturieren. Sie existieren immer nur einzigartig und sie wiederholen sich eh in so ziemlich allen Projekten. Klassen sind eher was für Dinge, die sich innerhalb eines Projekts wiederholen können, und natürlich für Schnellformatierungen wie z.b. die Klassen left & right als Zuordnung des jeweiligen Floats.