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

[brainstuff]

Hallo,

Gibt es irgend einen "work-arround" mit dem man gleiche Bezeichnungen von Elementen in verschiedenen css Dateien die man für eine Seite verwendet automatisch umbenennen kann?

Danke

brainstuff

[Matthias Scharwies]

Servus!

Gibt es irgend einen "work-arround" mit dem man gleiche Bezeichnungen von Elementen in verschiedenen css Dateien die man für eine Seite verwendet automatisch umbenennen kann?

gleichen "fürwen" Namen, die dann alles kaputt machen

Die Selektoren kannst du in einem Text-Editor „suchen und ersetzen“. Teilweise ist das auch bei mehreren geöffneten Dokumenten möglich.

Zuerst solltest du aber …

1. Dein HTML-Markup durch den Validator „jagen“ und ggfalls korrigieren
2. Deine Seite einmal ohne CSS anschauen
3. Mit dem Seiteninspektor schauen, welche CSS-Regelsätze vorhanden sind und welche schon bestehenden durch weiter untenstehende wieder überschrieben werden.

Herzliche Grüße

Matthias Scharwies

[Tabellenkalk]

Hallo,

Gibt es irgend einen "work-arround" mit dem man gleiche Bezeichnungen von Elementen in verschiedenen css Dateien die man für eine Seite verwendet automatisch umbenennen kann?

Ja, gibt es sicher. Z.B. gibt Möglichkeiten per suchen und ersetzen über mehrere Dateien.

Da du aber nicht dein wirkliches Problem beschrieben hast, kann man auch keine wirklichen Lösungen beschreiben.

Gruß
Kalk

[brainstuff]

Hallo Kalk,

Danke für Diene Antwort.

Die css Dateien sind ja so aufgebaut:

FÜRWEN { 
  Eigenschaft1: Wert1; 
  Eigenschaft2: Wert2; 
  Eigenschaft3: Wert3; 
}

Auf das "FÜRWEN" wird dann im HTML Code Bezug genommen. Wenn man dann ein css Template, zum Beispiel das von dieser Seite

https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:CSS-grid-layout-1.html#view_result

nimmt, dann kann es vorkommen, dass die gleichen "FüRWEN" in einer anderen CSS Datei stehen, die man auch verwendet.

Dann werden die HTML Codes davon zerschossen.

Ich suche nach einer rationellen Möglichkeit, wie man diese doppelten Bezeichnungen gleichzeitig im HTML und im CSS umändern kann.

Mir fällt eigentlich nur ein, dass man die Namen in kleineren CSS Dateien und in den dazugehörigen HTML Codes einfach mit einer Ziffer ergänzt die sie dann eigenständig macht. Aber da es Eintragungen in den CSS Dateien gibt, die bestimmte Sachen für den ganzen HTML Code einstellen ist das wahrscheinlich auch keine wirkliche Lösung und ich suche deshalb nach der Methode die von anderen angewendet wird, die das gleiche Problem haben.

Vielleicht gibt es auch irgend einen Weg, mit dem man erreichen kann, dass eine CSS Definition nur begrenzt auf einen Teil der Html einwirkt?

Man kann ja auch in einem Text von normaler Schrift auf fette Schrift und auf schräge Schrift umschalten.

Ich habe wahrscheinlich nur noch nicht herausgefunden wie man das einstellen kann. Ich beschäftige mich nur periodisch mit HTML und CSS und mir fehlt schlichtweg die Übung.

Danke brainstuff .

[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

[Gunnar Bittersmann]

@@brainstuff

Die css Dateien sind ja so aufgebaut:

FÜRWEN { 
  Eigenschaft1: Wert1; 
  Eigenschaft2: Wert2; 
  Eigenschaft3: Wert3; 
}

Auf das "FÜRWEN" wird dann im HTML Code Bezug genommen.

Nein. Andersrum: Das „FÜRWEN“ nimmt Bezug auf Dinge im HTML-Code.^[1]

Dass man „FÜRWEN“ Selektor nennt, sagte Rolf ja schon.

Wenn man dann ein css Template …

„CSS-Template“^[2] nennt man Stylesheet.

Ein Template ist (ein Stück) HTML-Code, der mit Daten befüllt wird. Bspw. ist

<a href="{{ url }}">{{ linkTitle }}</a>

ein Template für Links.

😷 LLAP

---

1. genauer gesagt: im DOM, welches aus dem HTML-Code und ggfs. JavaScript generiert wird ↩︎

2. mit Bindestrich, nicht mit Deppenleerzeichen ↩︎