zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Verschachteln und Erweitern von CSS?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.01.2010, 16:41
Benutzerbild von DerJo
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2010
Beiträge: 3
DerJo befindet sich auf einem aufstrebenden Ast
Frage Verschachteln und Erweitern von CSS?

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:
Code:
@import "modul-A.css";
@import "modul-B.css";
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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.01.2010, 19:52
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.01.2010, 11:24
Benutzer
neuer user
 
Registriert seit: 29.05.2007
Beiträge: 77
Sonny Lane befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von Sonny Lane (24.01.2010 um 11:31 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 25.01.2010, 17:56
Benutzerbild von DerJo
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2010
Beiträge: 3
DerJo befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Sonny Lane Beitrag anzeigen
  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 {}

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!
Mit Zitat antworten
  #5 (permalink)  
Alt 25.01.2010, 18:07
Benutzerbild von DerJo
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2010
Beiträge: 3
DerJo befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Stichwörter
css, erweitern, importieren, module, wws

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
2 CSS Files -> 1 CSS File Habi CSS 7 17.02.2010 15:25
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 02:21
CSS: divs zentriert verschachteln - falscher Ansatz?? quellcoder CSS 13 22.03.2007 14:00
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 08:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:57 Uhr.