Mehrere CSS-Dateien Einbinden (Probleme mit überscheidenden Selektoren)

[jayex]

Hallo Zusammen, bin neu im Forum und auch relativ frisch im CSS-Programmieren.

Ich habe folgendes Problem:

Ich möchte zwei Scripte in meine Site einbauen, welche jeweils auch ihre eigenen CSS-Dateien besitzen.

Einmal ein Script zur Benutzerverwaltung/Login und einmal jQuery UI für zusätzliche Bedienelemente wie Accordion ...
Wenn ich beide CSS-Dateien einbinde, schneiden diese sich teilweise, weil sie teilweise die gleiche Selektoren haben (Ich hoffe das ist die richtige Bezeichnung.) Zum Beispiel haben bei den Selector .accordion
Gibt es eine simple Möglichkeit, die CSS-Dateien auf mehrere Dev-Container aufzuteilen?

Also zB. style1.css für dev-Container mit der ID=Container1 und style2.css für dev-Container mit der ID=Container2.
Ist das ganze möglich ohne etwas in den CSS-Dateien zu ändern?

Wäre super wenn mir jemand helfen könnte?

Ich weiß zwar wie ich einzellne CSS-Anweisungen auf einen bestimmten Container begrenze. Das erscheint mir aber bei sehr Umfangreichen CSS-Dateien als zu kompliziert.

Wie geht man als Profi vor, wenn mehrere Scripte/CSS-Dateien im Spiel sind. Gibt es da ein strukturiertes und sinnvolles Vorgehen

Gruß Jay

 

[Banana_Jones]

Nein, du kannst nicht einer kompletten CSS-Datei sagen, sie solle nur für #container_1 gelten, aber nicht für #container_2 auf der selben Seite.
Einzig, wie du schon richtig erkannt hast, durch das Voranstellen von #container_1 vor jede Anweisung.

Genrell versuche ich, mit nur einer einzigen CSS-Datei zu arbeiten (+ Datein des Frameworks). Ich habe die Erfahrung gemacht, dass ich bei mehreren CSS-Dateien leicht den Überblick verliere, was ich wo schon einmal deklariert habe. Allzu leicht läuft man auch Gefahr, dass man - wie bei dir geschehen - Selektoren doppelt verwendet und sich selbst überschreibt.
Eine einzelnes, wenn auch umfangreiches, CSS-File finde ich deutlich übersichtlicher, zumal ich mittlerweile auch mit LESS arbeite.
Klar, PlugIns bringen oft ihr eigenes CSS mit, das ist dann aber in aller Regel auf eine #ID oder Klasse begrenzt, sodass es zu keinen Überschreibungen kommt.
Aber selbst dann werden kleine Änderungen im "Master"-CSS deklariert.

Das allerdings nur, weil du sinnvollem Vorgehen gefragt hast. Im Endeffekt kommt es auf den Entwickler selbst an, jemand anderes mag mit mehreren CSS-Dateien besser zurecht kommen...

 

[Tronjer]

Ich kenne das Problem, weil ich selber an einzelnen Modulen eines sehr großen Webportals arbeite, wo fünf und mehr Stylesheets eingebunden sind, und ich natürlich nie davon ausgehen kann, dass eine von mir formulierte Klasse oder ID nicht bereits an anderer Stelle vergeben wurde. Der Trick zur Vermeidung von Konflikten heißt Ausdifferenzierung. Je tiefer man einen Selektor im CSS gliedert, umso höher seine Gewichtung und desto unwahrscheinlicher die Gefahr von Überschneidungen.

Davon ausgehend, ich hätte eine Klasse namens .foo, die zweimal auf derselben Seite verwendet wird und unterschiedliche Attribute besitzt:

<div id="bar"><p class="foo">Hello World</p></div>
<div id="foobar"><span class="foo">Irgendein Text</span></div>

Wenn ich das so formuliere:

div .foo { //irgendwelche CSS-Anweisungen}
div .foo { // abweichende CSS-Anweisungen}

dann überschreibt der zweite Anweisungsblock im Zweifelsfall den ersten.

Schreibe ich statt dessen allerdings:

#bar .foo {....}
#foobar .foo {}

kann ich das sauber unterscheiden. Und natürlich ließen sich zur tieferen Differenzierung auch <p> und <span> einbinden.