Hallo liebe Community,

Um was es geht:
wir haben ein Mammutprojekt vor uns, bei dem wir ein WWS (WarenWirtschaftsSystem) um ein eigenes, sehr flexibles Shopsystem erweitern möchten.
Da die WWS schon sehr stark auf Module bzw. Controler aufbaut, muss die einfache Trennung von Code & Design natürlich sauber sein - unter der wichtigsten Vorraussetzung: Die uneingeschränkte Skalierbarkeit.
Da es nicht Sinn und Zweck ist das ganze nur für einen (sondern potentiell hunderte) Kunden zu erstellen die eben evtl sehr eigene Designwünsche haben. Ziel ist hierbei den Code der Seiten nicht zuverändern, so dass wenn Erweiterungen / Updates der Module vorhanden sind (im Code) diese einfach für alle Kunden upgedatet werden können, ohne das man für jeden Kunden die Anpassung bezüglich sein Design (im groben) beachten muss.

Die Seiten werden überwiegend zu ASPX generiert, das Design wird dementsprechend zu 99% nur aus CSS geladen.

Mein Ansatz:
Um die Erweiterung von mehreren Modulen zu garantieren, ohne die Layouts der Kunden zu zerhacken, sehe ich im Moment nur folgende zwei Möglichkeiten:
(Alternativ kann ich natürlich auch sagen, ich möchte individuelle Designs für ein Modul erstellen / verändern, ohne das Modul / die Modulseite zu verändern)

Möglichkeit A:
Ich habe eine Grund-CSS die alle wichtigen Dinge wie Grundlayout, Text, Links etc geregelt sind.
In dieser Grund-CSS werden dann die CSS Daten für die verschiedenen Module/Seiten mittels @ hinzugeladen
Zum Beispiel:
Die Seiten für die Module sind dementsprechend gut ausgewiesen mit Klassen und IDs etc.

Möglichkeit B:
Ich lade im Header jeder Seite nichtnur die Grund-CSS sondern je nach Seite noch die weiteren Module als CSS hinzu.



Meine Fragen:
Gibt es Renderzeiten / Ladezeiten Probleme in einem der beiden Fälle wenn ich mehrere CSS in eine andere importiere (wie bei A),
oder wenn ich gleich mehrere CSS laden muss (wie bei B)?

habe ich etwas anderes evtl nicht bedacht?

Welche der beiden Methoden ist denn im generellen besser um optional immer schnell neue Module (bzw. CSS-Daten) hinzuzufügen und erweitern?
(ohne Gefährung der Grund-CSS-Elemente)

Das mag in erster Linie kompliziert klingen, aber wenn man theoretisch 100 Module hat, dann möchte ich nicht die ganzen CSS Daten für 100 Module auch laden, wenn der Kunde nur 30 davon überhaupt verwendet.
ihr versteht, dass eine gigantische CSS da die Skalierbarkeit etwas einschränken würde, bzw. ich die GrundCSS aller Kunden mit diesem Modul überarbeiten müsste, anstelle nur die Modul-CSS.

Ich hoffe ich habe das nicht all zu kompliziert erklärt

ich freu mich auf ihre Ideen / Antworten!

Ich verstehe die Frage so: sind CSS @imports verglichen mit Verknüpfungen im HTML per <link> im Nachteil? Souders meint, don't use import

Wenn du zig CSS-Dateien einbindest, solltest du in der Produktion dann diese vorab zu einer zusammenpacken, minimieren und komprimiert ausliefern. Lies Souders und Stefanov

Bei großen modularisierten Projekten stehen allerdings auch andere Fragen der CSS-Architektur im Vordergrund. Z.B., ob sich Pseudo-Namespaces eignen, die Module sauber voneinander zu trennen. Vielleicht.

Viel Spaß.

__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Hallo,

ich persönlich würde in deinem Fall die Styles der Module auch auf einzelnen Dateien aufteilen. Allerdings würde ich schauen, ob es vom System aus möglich ist, die CSS Dateien bei Auslieferung zusammenzulegen, um die HTTP-Requests zu minimieren. [Edit: was ja IChao bereits angesprochen hat.]
Eventuell kannst du zusätzlich wirklich schauen, dass die Modul-CSS-Dateien nur geladen werden wenn auch das Modul selbst benötigt wird.

Damit sich die einzelnen Regeln nicht in die Quere kommen, hast du prinzipiell drei Möglichkeiten:

1. Du kannst sicherstellen, dass IDs nur einmal verwendet werden und sich die Klassen nicht (ungewollt) gegenseitig überschreiben.
2. Du verwendest Pseudo-Namespaces wie z.B. .md1-rule1 {} / .md2-rule1 {}
3. Oder über ein Container div und dann in der Art von #module1 .rule1 {}

Beste Grüsse

ja, wie Punkt 2 & 3 war eigentlich von der Architektur der CSS geplant.
Punkt 1 sollte sowieso klar sein, durch Punkt 3 wird diese Vorgehensweise sichergestellt.


IChao... danke für die Links, besonders der von Souders war an dieser Stelle sehr hilfreich!

und ja, du hast es richtig verstanden, es ging indirekt um den Vergleich zwischen @import und <link>
Aber da hat ja Souders Beitrag & Benchmark dazu alles schon geklärt!

Danke an euch beiden nochmal, besonders für die schnelle Antwort!

achja... wir werden es in dem projekt übrigens folgendermaßen machen:

da es in ASPX umgesetzt wird (bitte fragt mich nicht in welcher Entwicklungsumgebung, ich weiß es nicht, bin nur der Mediengestalter )
kann der Header natürlich für jede Seite eigens angepasst werden.

D.h. in der Praxis, es wird eine Master.css geben, in der alle grundlegenenden Dinge wie Links, Text, Maintheme etc geregelt wird.
und für jede seite (dessen Content-bereich) dann eine zusätzliche CSS enthällt, diese CSS wird dann (danke nochmal IChao) per weiteren Link in die header geschrieben und geladen, so bleibt eine praktisch endlose Skalierbarkeit, bei minimalstem Ladeaufwand gewährleistet.