mehrere css Dateien mit gleichen "fürwen" Namen, die dann alles kaputt machen

[Rolf B]

Hallo brainstuff,

dein "FÜRWEN" heißt auf CSSisch "Selektor".

Selektoren können durchaus selektiv sein (Pun intended 😜)

p {
   background-color: red;
}

pinselt jedes p Element im Dokument rot an.

Fügst Du

header p {
   background-color: pink;
}

hinzu, bekommst Du Augenkrebs, weil die p Element im Header nun pink als Hintergrundfarbe gaben. Aber NUR die. Weil "header p" bedeutet: Such erstmal nach dem header-Element, und nur darin nach p Elementen. Diese Leerstelle zwischen header und p ist der sogenannte "Nachfahren-Kombinator". Er kombiniert zwei Element-Selektoren so, dass der rechte Nachfahre des linken sein muss (Nachfahre ist ein Begriff aus der Baumstruktur, die der Browser aus dem HTML aufbaut. Für Nicht-Informatiker: Das Nachfahren-Element wird vom Vorfahren-Element direkt oder indirekt eingeschlossen)

Schlüsselbegriff ist hier die Spezifität. Selektoren können IDs (mit dem Rautenzeichen, #foo selektiert das Element mit id="foo") angeben, oder Klassen (der Punkt, .bar selektiert alle Elemente mit "bar" in der Klassenliste), oder einfach nur Elemente. Siehe oben. Hinzu kommen Attributselektoren (input[type=text] selektiert alle text-Inputs).

Jeder Selektionsart hat ein bestimmtes Gewicht (guckst du hier).

Ein ID Selektor ist Kategorie A und zieht mehr als ein Klassenselektor (Kategorie B). Ein Klassenselektor mehr als ein Elementselektor (Kategorie C). Und wenn beide in einer Kategorie sind, wird gezählt. Zwei Klassenselektoren sind spezifischer als einer.

Das kannst Du ausnutzen. Wenn deine Einbauten alle im Header-Element stecken, machst Du die Selektoren für deinen Baustein einfach spezifischer:

header dings {...}  /* alle dings-Elemente im header */
header .bums {...}  /* alle Elemente mit Klasse bums im header */

Du musst dann zwar immer noch alle betroffenen CSS Selektoren für den Baustein anpassen, indem Du den ID Selektor davor pinnst, aber dafür bist Du im HTML relativ schnell fertig.

Das mag für deinen konkreten Anwendungsfall zu einfach gedacht sein, aber zumindest ist das die Idee, der Du folgen kannst.

Rolf