2010-12-13 6 views
5

Ich habe eine allgemeine Design-Frage in Bezug auf CSS und Websites. Ich weiß, dass es eine gute Informatik ist, den Code so weit wie möglich zu normalisieren und Doppelarbeit zu vermeiden. Es liegt also nahe, zumindest in der Theorie, wenn man Stylesheets für eine Website organisiert.Organisieren von CSS für große Websites

Als ich also auf meiner neuesten Website anfing, begann ich mit dieser Philosophie. Es funktionierte ok für meine ersten Seiten und während ich nur in Firefox getestet wurde ...

Wie auch immer meine Website wuchs und als ich Seiten, mehrere Layouts (und Browser) hinzugefügt fand ich diese Philosophie wirklich schnell zusammengebrochen. Letzten Endes im Laufe der Zeit ich auf den folgenden Ansatz bewegt haben:

  1. ich für jede Master-Seiten-Layout in meiner Seite eine sehr begrenzte Top-Level-CSS-Datei haben, enthält es Klassen für bekannte Arten in diesem Layout sowie CSS für die Masterseite.

  2. Ich behalte spezifische CSS-Stile für jede Seite.

  3. Ich halte bestimmte CSS-Stile für integrierbare Seitenelemente/Bedienelemente

ich diese Route endete damit, dass ich vertrauen konnte, dass Änderungen auf der einen Seite nicht versehentlich andere Seiten der Site brechen würde resultierende in vielen Regressionsfehlern.

Was machen andere Leute, wenn sie sich diesem nähern? Ist das ein guter/schlechter Ansatz? Ich sehe Nachteile für diesen Ansatz, einige Seiten sind sehr ähnlich, so dass eine signifikante Änderung bedeutet, mehr CSS-Code zu ändern, ich fühle auch, dass die Profis dies auf einer täglichen Basis überwiegen.

Was denken andere Entwickler über diese Philosophie? Gut? Schlecht? Nur neugierig wirklich ...

Für mich ist einer dieser Situationen, wo ich den Unterschied zwischen meinen Idealen gewogen (ich versuche, sehr engen Code zu halten), und die Frustration der sich ändernden Anforderungen auf einer Seite 20 Seiten brechen, weil ich änderte eine div-Breite um ein paar Pixel (zum Beispiel einen Float auf einer anderen Seite zu stören).

Vielen Dank für Ihre Eingabe

Antwort

3

Genau wie jede andere Art von Code, wenn Sie Ihren CSS-Code der ganzen Ort duplizieren, fragen Sie nach Ärger. Die Wartung wird mit der Zeit immer schwieriger für Sie.

Die beste Möglichkeit, Probleme mit einer Änderung auf einer Seite, die sich auf andere Seiten auswirkt, nicht zu vermeiden, ist eine Formatvorlage, die das Layout und Design Ihrer Benutzeroberfläche steuert. Wenn Ihr Styleguide die HTML- und CSS-Klassen definiert, die für ein bestimmtes Designelement verwendet werden sollen, werden sie immer auf allen Seiten gleich angezeigt. Wenn das Element einer bestimmten Seite geändert werden muss, ändern Sie den HTML-Code, um eine andere Klasse zu verwenden, und erstellen Sie dann neues CSS für diese Klasse (und fügen Sie es zur Wiederverwendung zu Ihrem Styleguide hinzu). Mit dem Style-Guide können Sie außerdem sicherstellen, dass Ihr HTML-Code für alle Entwickler, die auf der Site arbeiten, einheitlich ist. Das bedeutet, dass CSS-Änderungen umso weniger Probleme verursachen, je mehr Sie entwickeln.

Ein weiterer Punkt, den Sie sich mit CSS merken müssen, ist, dass jede dieser .css-Dateien, die Sie erstellen und auf einer Seite verweisen, eine HTTP-Anfrage ist. Wenn jede Seite und jedes Steuerelement eine eigene CSS-Datei enthält, beeinträchtigt dies die Benutzererfahrung auf der Website, da die gesamte Downloadzeit für jede einzelne Seitenanforderung reduziert wird. Es macht es auch weniger wahrscheinlich, dass ihr Browser den Cache zwischenspeichert.CSS-Dateien, da der Cache nur über einen begrenzten Speicherplatz verfügt. Wenn Sie also mehr und mehr .css-Dateien füllen, werden sie schneller aus dem Cache gelöscht. Ja, Sie können .css-Dateien programmgesteuert in einem Handler kombinieren, sodass Ihre Seite nur eine Anfrage pro Seite erstellt, aber Sie haben zusätzlichen Serveraufwand und das Caching-Problem bleibt bestehen (außer Sie haben eine einzige Anfrage für alle .css-Dateien auf Ihrer Site) , die den Zweck von dem, was du hier versuchst, vereitelt).

+0

Danke für das Feedback auf die Leistung Kosten dafür. Es ist wahrscheinlich eine, mit der ich bereit bin zu leben. Am 1. Punkt der Wartung wird immer härter, persönlich frage ich mich, ob es so geschnitten und trocken ist. Es gibt Vor- und Nachteile für beide. Mit dem Ansatz, den Sie vorgeschlagen haben (und so begann ich), stellte ich fest, dass jedes Mal, wenn css bearbeitet wurde, jede Seite der Website regressionsgetestet werden muss (bei jedem Browser). Wenn Sie Seiten hinzufügen, wächst Ihre Regressionstestmatrix exponentiell (multipliziert mit der Anzahl der Browser) ... Gedanken? – Introgy

+1

+1 für die Erwähnung eines Styleguides. @Introgy, wenn Sie einen HTML-Style-Guide mit einfachen, aber vollständigen Beispielen des Inhalts auf Ihren Seiten führen, ist es einfacher, in mehreren Browsern zu testen. Wenn Sie CSS so verwenden, wie es beabsichtigt ist, sollten Sie nicht jede Seite erneut testen müssen, wenn eine Änderung vorgenommen wird. – PhillFox

+0

+ Danke für all die Hilfe Charles. Ich habe jetzt viel weniger CSS, denke ich, wo ich auf Probleme stieß, habe ich viele sehr einzigartige Formen mit Layout auf jedem, das sehr spezifisch für die Aufgabe war. Danke noch einmal – Introgy