Ich bekam neulich eine Frage von jemandem, der neugierig war, wie ich mit CSS mehrere verschiedene Seitenstile und Layouts auf einer Website handhabe. Ich denke, das ist ein sehr häufiges Szenario. Zum Beispiel gibt es eine Homepage, die sich von Ihren Blog-Post-Seiten, der Über-uns-Seite und der Kontaktseite unterscheidet.
Hier sind einige Überlegungen
Es sollte immer eine Haupt-Stylesheet geben
Höchstwahrscheinlich gibt es auf den Seiten der Website viele Ähnlichkeiten. Wahrscheinlich sogar gemeinsame Elemente wie Header, Footer und Navigation. Die Typografie ist wahrscheinlich auf allen Seiten ziemlich konsistent (wenn nicht, sollten Sie dafür auf jeden Fall einen guten Grund haben). Wahrscheinlich gibt es ein Layout, das auf allen Seiten am häufigsten vorkommt. Diese Dinge gehören in eine Haupt-Stylesheet, die auf ALLEN Seiten geladen werden kann.
Wie unterschiedlich sind die verschiedenen Seiten? Und wie viele gibt es?
Nehmen wir an, die Kontakt-Seite hat ein Kontakt-Formular darauf. Dieses Formular hat spezielle Stile und wird sonst nirgends auf der Website verwendet. Es erscheint mir verschwenderisch, all diese Stile in die Haupt-CSS-Datei aufzunehmen. Das ist eine Menge CSS, die auf den 99% der Seiten, die es nicht benötigen, geladen wird. Gibt es viele Seiten wie diese?
Einzelne Seiten, einzelne CSS-Dateien
Mein persönlicher Stil in diesen Situationen ist, die Haupt-Stylesheet auf jeder Seite zu laden und dann, falls erforderlich, eine zusätzliche, einzigartige für diese Seite (oder diesen "Seitentyp") zu laden.
Gegenargumente
Nicht jeder wird dieser Methode zustimmen. Viele Leute sagen, dass jede Webseite genau eine CSS- und JavaScript-Datei haben sollte. Das bedeutet weniger HTTP-Anfragen und eine schnellere Seite, richtig? Ich denke, das stimmt oft, aber wenn es auf Kosten von größeren als notwendigen Dateien geht, was dann? Und wenn man bedenkt, dass es ein Rückschlag für die Organisation ist, denke ich, dass mehrere CSS-Dateien es wert sind.
Warum ich denke, dass das funktioniert
In den allermeisten Fällen werden Sie keine 100 verschiedenen Layouts haben. Wenn doch, sollten Sie wahrscheinlich einen Schritt zurücktreten und überdenken, was auf dieser Website vor sich geht. Wenn Sie wirklich 100 Layouts benötigen, sollten Sie sich nach einem Grid-basierten Framework umsehen. Ich würde niemals dafür plädieren, 100 verschiedene einzigartige Stylesheets für jede dieser Seiten zu erstellen. Das liegt jenseits der Grenzen einer vernünftigen Nachhaltigkeit und widerspricht dem Geist von CSS. Aber für viele, viele Websites mit einer Handvoll verschiedener Seitenstile und ein paar Exoten ist dies sicherlich meine bevorzugte Methode.
Dem würde ich zustimmen. Ich beginne gerade erst, separate Stylesheets für separate Elemente wie Schriftarten, Layout, Sonstiges zu verwenden. Ich habe noch nicht darüber nachgedacht, ein separates Stylesheet pro Seite zu erstellen. Ich frage mich, wie viel Unterschied es wirklich macht, besonders jetzt, wo Breitband so dominant ist. Macht es wirklich einen enormen Einfluss, einige zusätzliche Klassen auf eine Seite zu laden, auf die sie nicht verweisen? Wenn ja, in welchen Bereichen außer der Ladezeit?
Ich verwende im Allgemeinen einen einzigen, Master-Stil für die gesamte Website und lagere dann einzelne Elemente (wie Formulare) in seiten-spezifische Style-Sheets aus. Dies bedeutet normalerweise, dass nur auf wenigen Seiten eine zusätzliche HTTP-Anfrage gestellt wird; das ist im Allgemeinen eine effizientere Nutzung der Bandbreite als das Laden seiten-spezifischer Stile auf Seiten, die diese Stile nicht verwenden, insbesondere wenn Sie mehrere Seiten mit einzigartiger Formatierung haben.
Das ist genau das, was ich beim Lesen dieses Artikels im Sinn hatte. styles.css, zusammen mit forms.css usw.
guter Beitrag, das mache ich und ich habe mich gefragt, ob es besser wäre, alles in einer Datei zu haben – ich mochte die Idee nicht, benutzerdefinierte Formularinformationen für Seiten zu laden, die sie nicht benötigten.
Das ist Zufall! Ich habe diesen Trick gerade für ein Projekt angewendet, an dem ich arbeite.
Und ich sage Ihnen… es hilft enorm!
Wenn Sie CSS haben, das für eine bestimmte Seite einzigartig ist, ist das nicht das, wofür das Einbetten von Stilen gedacht ist? Das erscheint mir organisierter, denn wenn Sie diese eine Datei verschieben, die ihre eigene Style-Sheet hat, müssen Sie daran denken, dass sie mitgenommen werden muss.
Ich stimme der globalen Style-Sheet zu, die für allgemeine Navigation und Typografie verwendet wird, wie Sie sagten. Dann könnten Sie, wenn Sie einen kleineren Bereich von Seiten mit einem ähnlichen Format hätten (wie den Blog in Ihrem Beispiel), ein zusätzliches Style-Sheet für diese Gruppe hinzufügen. Aber ich denke, es ist logischer, ein eingebettetes Style-Sheet zu verwenden, wenn es nur für eine Seite gilt, genauso wie Sie einen Inline-Stil für ein einzelnes Element verwenden würden.
Verwendet jemand eingebettete Style-Sheets oder erstellen Sie immer ein einzigartiges Style-Sheet oder fügen Sie es zu Ihrem Haupt-Sheet hinzu?
Ich halte es für besser, ein separates Stylesheet zu erstellen. Selbst wenn Sie ziemlich sicher sind, dass diese Seite eine "Einmaligkeit" ist, wissen Sie es nie wirklich. Wenn Sie später eine sehr ähnliche Seite benötigen, könnten Sie dieses Stylesheet auch für diese Seite wiederverwenden und die Best Practices beibehalten.
Ich stimme Ihnen zu… im Falle einer riesigen App wird niemand eine 5000 Zeilen lange CSS-Datei auf allen Seiten laden wollen, nur um die Anzahl der HTTP-Anfragen zu reduzieren… Sie werden in diesem Fall die Serverbandbreite sprengen ;)
Wenn Sie 10+ Seitentypen haben, funktioniert das nicht. Ich ziehe es vor, das CSS in layout.css, typography.css, reset.css, print.css zu trennen und in einigen Fällen Formulare/Schaltflächen/etc. in forms.css separat zu behandeln. Dann trennen Sie innerhalb jedes Abschnitts die seiten-spezifischen Stile.
Mann, das ist so wahr. Ich sehe ständig Layouts, die unterschiedlich aussehen, aber KEIN einziges Stylesheet haben. Das ist wirklich widerlich.
Meine Antwort darauf wäre, eindeutige ID-Tags im Body jeder Seite zu verwenden und dann seiten-spezifische Deklarationen zum seitenweiten Stylesheet hinzuzufügen.
z.B. Um Texteingaben auf Ihrer "Kontaktieren Sie uns"-Seite größer zu machen
<body id="contactus">...
<style>
input { font-size: 1.0em }
#contactus input { font-size: 1.2em }
</style>
Ich habe diesen Tipp vor einiger Zeit auf einem großartigen Blog gelesen
https://css-tricks.de/id-your-body-for-greater-css-control-and-specificity/
;)
- SEAN O
Sie könnten auch ein bisschen raffiniert sein und PHP verwenden, um die Body-ID je nach Seite zu ändern, und dann die CSS entsprechend einstellen ;)
Ich stimme zu. Ich bevorzuge diese Body-Klassen-Nachricht, es sei denn, das Design/Layout der anderen Seite ist komplett anders.
Das ist die Methode, die ich auch verwende. Ich kann verstehen, dass man mehrere Style-Sheets verwendet, aber ich sehe selten jemanden, der diese Methode anwendet… aber für die Ultra-Organisierten kann sie funktionieren.
Diese Methode verwende ich schon seit einiger Zeit. Und das Schöne ist, dass man dafür keine Skripte benötigt, es funktioniert mit reinem HTML. Natürlich ist Organisation im Stylesheet entscheidend, um alles richtig und funktionsfähig zu halten.
Ich halte es gerne in einer Datei. Es ist einfacher zu bearbeiten und lädt schneller.
Der Unterschied zwischen Seitenstilen ist meist nur das Layout, also nur ein paar zusätzliche Divs, die im Sheet gestylt werden müssen.
Ich mag mehrere Stylesheets für Modularität während der Entwicklung, aber gleichzeitig bevorzuge ich für die Leistung ein einziges Stylesheet in der Produktion.
Sprockets löst das Problem für Javascript, aber ich frage mich, ob es in Zukunft auch CSS unterstützen wird. Eine Stylesheet-Version von Sprockets würde uns das Beste aus beiden Welten mit Modularität und Leistung geben, so wie es für Javascript der Fall ist.
Ist das nicht genau der Grund, warum es die @import-Funktionalität in CSS gibt? Sie erlaubt Ihnen, eine andere CSS-Datei aus der ersten CSS-Datei zu importieren – Dies ermöglicht Ihnen, genau das zu tun, was Sie wollen (eine Haupt-CSS-Datei und viele andere, die je nach Seite geladen werden).
@import erlaubt zwar das Laden anderer CSS-Dateien aus einer einzigen, aber nicht bedingt, soweit ich weiß. Woher soll eine CSS-Datei wissen, ob sie auf der About-Seite oder der Kontakt-Seite ist?
In ExpressionEngine könnten Sie URL-Segment-Bedingungen verwenden, um zu wissen, auf welcher Seite Sie sich befinden. Nicht für jeden nützlich, aber ich bin sicher, andere CMS haben ähnliche Funktionalitäten.
0) { // if page is contact.php
@import “contact.css”;
}
?>
Äh, kein PHP-Code erlaubt…
Ich meinte es andersherum
Sie haben eine Blog-Seite, die blog.css hat und die "main.css" und "forms.css" lädt. Die Kontaktseite (contact.css) lädt ebenfalls "main.css" und "forms.css".
Die About-Seite (about.css) lädt nur "main.css" und nicht "forms.css".
Der einzige Nachteil dabei ist (natürlich), dass Sie diese spezifischen CSS-Dateien zu den angegebenen HTML-Dateien hinzufügen müssen.
Die @import-Regel erlaubt es, die Aufrufe für Stylesheets in einer einzigen CSS-Datei zu zentralisieren. Stellen Sie sicher, dass alle Ihre HTML-Seiten mit einem einzigen Stylesheet verknüpft sind, das nur andere CSS-Dateien verwaltet. So können Sie, ohne Ihre HTML-Seiten zu ändern, beliebig viele Stylesheets deaktivieren, löschen oder hinzufügen.
Ich denke, es geht um Wahlmöglichkeiten.
Ich versuche normalerweise, es einfach zu halten, nur ein Haupt-Stylesheet, das alle generischen Elemente enthält. Aber wenn es sich für mich richtig anfühlt, ein weiteres zum Projekt hinzuzufügen – ich sehe keinen Grund, warum nicht.
Keep swinging!
Ich benutze das ständig, warum CSS laden, wenn es auf einer Seite nicht benötigt wird. Ich mache es im Allgemeinen bereichsspezifisch, weil ich E-Commerce-Seiten erstelle, also ist es eher wie eine CSS-Datei für Produktseiten, Konten und Checkout und dann das Haupt-Stylesheet, das all das allgemeine CSS enthält. Wenn Sie über große Anwendungen sprechen, wäre die Menge an CSS, die für seiten- oder bereichsspezifisches CSS getrennt werden könnte, genauso schlecht wie die zusätzliche Anfrage an den Server, wette ich.
Meiner Meinung nach stimme ich diesem Ansatz überhaupt nicht zu, aber hey, wenn es für Sie funktioniert, dann machen Sie nur weiter. Ich stimme Designer zu. Sie wollen nur in übergeordnete Buckets wie layout.css, color.css (das fehlt Ihnen), typography.css, reset.css und print.css aufteilen
Sie betten Stile niemals in das Dokument ein, egal was es ist.
Es hängt wirklich davon ab, wie groß ein Projekt ist, ob ich diese Methode verwende. Meistens verwende ich eine einzige CSS-Datei und verwende einfach eine ID oder Klasse für den Body und stile die Seite basierend darauf.
Wenn ich mit einem extrem komplexen Layout zu tun hätte, bei dem ich vielleicht 500 Zeilen Code für eine Produktseitenvorlage, 500 Zeilen für eine Kategorieseite usw. hätte, dann wäre ich eher geneigt, diese in separate Dateien aufzuteilen, damit diese unabhängig voneinander bearbeitet werden können.
In diesem Fall würde ich es wahrscheinlich auch nützlich finden, eine reset.css-Datei für meine Resets, eine global.css-Datei zur Steuerung von Dingen wie Header, Navigation, Footer und dann eine product.css und category.css für diese komplexen Seiten zu haben.
Jede Argumentation zu diesem Thema würde jedoch niemals enden, da es keine richtige Antwort gibt. Wenn es für Sie und Ihr Team funktioniert, ist es ein weiteres Werkzeug in der Werkzeugkiste :)
Die @import-Regel erlaubt es somit, einige Dinge gleich zu halten, während andere unterschiedlich sind.
Für CMS-Szenarien ist es aufgrund der dynamischen Natur des Inhalts normalerweise besser, alles in einem Stylesheet zu haben.
Ich habe heute auch darüber nachgedacht, unsere alte Website zu überarbeiten. Subtile Änderungen wie der Hintergrund, je nach Landingpage. Das wirkt dynamisch, wenn Sie mit Ihrem Projekt fertig sind, und macht es einzigartig.
Chris, ich habe diese eine Seite sowohl in einem einzigartigen Stylesheet als auch als Teil des Haupt-Stylesheets gestaltet. Ich denke, es gibt ein Gleichgewicht darüber, wann das eine besser ist als das andere. Wenn Ihr Kontaktformular zum Beispiel nur eine Zeile CSS benötigt, ist es sinnvoller, es in das Haupt-Stylesheet aufzunehmen.
Hierbei geht es hauptsächlich darum, die Vor- und Nachteile zu verstehen. Sie müssen das Gewicht des CSS für jede Seite gegen die zusätzliche HTTP-Anfrage auf der einen Seite abwägen.
Derzeit mache ich das mit einem einzigen Stylesheet. Dieser Ansatz ist in Ordnung. Aber wenn jemand später daran etwas bearbeitet, kann er verwirrt sein. Er versucht vielleicht, den Hauptstil zu bearbeiten, anstatt den seitenspezifischen? Dann kann dieser Ansatz schiefgehen.
Zeitverschwendung!!!
Sparen Sie ein paar Bytes und verschwenden Sie HTTP.
Sie sagten
Viele Leute sagen, dass jede Webseite genau eine CSS- und JavaScript-Datei haben sollte. Das bedeutet weniger HTTP-Anfragen und eine schnellere Seite, richtig? Ich denke, das stimmt oft, aber wenn es auf Kosten von größeren als notwendigen Dateien geht.
Können Sie mehr über "aber wenn es auf Kosten von größeren als notwendigen Dateien geht" erklären?
Ich denke, er meinte, dass beim Verwenden von 1 CSS-Datei auch Dinge von der Kontaktseite, der About-Seite usw. geladen werden, während die Benutzer nur die Blog-Seiten durchsuchen.
Das CSS für die Kontakt- und About-Seite ist nutzlos und macht die Datei "größer als notwendig".
Ich mag es, wenn möglich, nur ein Stylesheet zu haben, aber ich musste in der Vergangenheit mehrere Stylesheets verwenden. Es ist definitiv einfacher, nur ein Stylesheet zu verwenden, da alles an einem Ort ist. Ich tendiere dazu, mein CSS so aufzuteilen, dass Überschriften-Tags alle zusammen sind usw. – das macht es viel einfacher, wenn man es später bearbeiten muss, besonders wenn jemand anderes die Bearbeitung vornimmt!
Es hängt völlig vom Projekt ab und davon, wie viel CSS in ein separates Stylesheet geladen werden müsste. Ich mache das nur, wenn es eine beträchtliche Menge an CSS gibt, die anderswo unnötig wäre. Es macht keinen Sinn, dies nur für ein paar Zeilen CSS zu tun.
Nur eine kurze Frage zu @import. Welches Stylesheet hat Vorrang vor einem anderen? Zum Beispiel habe ich structure.css, print.css, reset.css, ie.css.
Sie könnten immer das CSS auf dem Server mit PHP verarbeiten und dann ein Sheet mit nur den benötigten Stilen senden.
@Thomas, das mache ich auch gerne. Wenn ich an einer App arbeite, erstelle ich für jeden "Bereich" der Website ein Stylesheet und erstelle dann bei der Bereitstellung eine große Stylesheet mit der Sprache, mit der ich arbeite.
Wenn ich darauf keinen Zugriff habe, teile ich die global.css-Datei einfach in Abschnitte auf. Das macht die Verwaltung etwas schwieriger, da die Datei so lang wird, aber es ist immer noch erträglich.
Sie können Skripte erstellen, die alle Ihre CSS-Dateien zusammenfügen und minifizieren, das ist das Beste aus beiden Welten
Zustimmung. Sie können so viel organisieren, wie Sie möchten, und am Ende wird eine kombinierte und minifizierte einzelne CSS-Datei an den Browser gesendet.
Es ist auch gut zu prüfen, ob sich eine der kombinierten Dateien geändert hat, und dann einen GET-Parameter an die resultierende minifizierte CSS anzuhängen (z.B. einen Zeitstempel), damit Änderungen sofort widergespiegelt werden. Sehr praktisch, wenn Sie dringende Korrekturen benötigen und wirklich nicht auf den guten Willen des Browsers/Proxys angewiesen sein wollen, die neue Version abzurufen.
Ja, aber wie lädt man zusätzliche Stylesheets für eine bestimmte Seite?
Ich verstehe, dass PHP involviert sein muss, um die zusätzlichen Stylesheets im Header zu laden, aber was verwenden Sie, um zu definieren, wann sie geladen werden sollen oder nicht?
Seiten-ID?
load main.css / begin php / if page id is 355 then page must be contactus / echo the link to contactus.css / else if page id is 356 then page must be about / echo the link to about.css / else do nothing / end php
…oder Seitentitel?
load main.css / begin php / if page title contains ‘contact us’ then page must be contactus / echo the link to contactus.css / else if page title contains ‘about’ then page must be about / echo the link to about.css / else do nothing / end php
Heute verwende ich spezifische CSS-Dateien, aber alle werden im WP-Header geladen, egal welche Seite besucht wird.
wahrscheinlich so etwas wie
<link rel=”stylesheet” href=”/css/cssgen.php?sheet1=main&sheet2=contact” type=”text/css” >
Ich würde mich für die Seiten-ID entscheiden, da der Titel einer Seite gleich sein kann, während Seiten-IDs garantiert eindeutig sind. Ich gehe davon aus, dass Sie über WordPress sprechen.
Im reinen PHP: Der schnellste (aber nicht der beste) Weg wäre, die URL der Seite abzurufen und das entsprechende Stylesheet für diese Seite auszugeben.
Ich verwende mehrere Stylesheets für einfache Bedienung, wenn mehrere "Designer" im Spiel sind. Ich versuche jedoch, die Anzahl der Dateien begrenzt zu halten. Wir haben eine Datei für das Layout (ich bearbeite sie) und eine für den Inhalt (sie bearbeiten sie). Dies ermöglicht schnelle und einfache Änderungen für die "Inhaltsgestaltung", ohne dass diese das allgemeine Layout der Website beeinträchtigen.
Gelegentlich werfe ich eine weitere Datei ein, je nachdem, wie viele Seiten sie ziehen werden… zum Beispiel "gallery", wenn es eine Vielzahl von Galerie-Seiten geben wird.
Ich habe immer dieser Methode gefolgt und ich denke, es ist die beste Balance zwischen Geschwindigkeit und Organisation.
Ich mag diese Methode. Mit unserer Website haben wir im Allgemeinen ein paar Haupt-Stylesheets, die sich um alle gemeinsamen Details auf allen Seiten kümmern (z.B. Layout, Typografie, Thema, Header, Footer usw.). Dann verwenden wir separate CSS-Dateien für bestimmte Seiten mit verschiedenen Funktionalitäten.
Zum Beispiel verwendet nur eine Seite auf unserer Website den tabContainer des Dojo JavaScript-Frameworks und ein spezifisches Layout im "Content"-Bereich dieser Seite. Ich habe eine spezifische CSS-Datei erstellt, um dieser einzigartigen Situation gerecht zu werden.
Es gibt eigentlich keine völlig unterschiedlichen Seiten auf einer Website. Aber es gibt auch keine Seiten, die zu 100% exakt gleich sind. Das ist eine der Freuden bei der Arbeit mit HTML-Editor-Programmen wie Expression Web. Obwohl CSS sehr hilfreich beim Erstellen von Seiten einer Website ist, muss es sorgfältig gemäß der Trennung und Organisation von CSS unter den Seiten erfolgen.
Separate Stylesheets für separate Seiten machen das Leben einfacher, ohne Zweifel, das ist es, was ich tue. Aber ich mag Lars' Art sehr – separate Stylesheets für separate Elemente. Muss ich ausprobieren ;)
Gute Idee
Das gleiche Schema benutze ich häufig. Manchmal ist es schwierig, CSS-Code zu trennen, aber diese Methode ist wirklich nützlich.
PD: Entschuldigen Sie mein Englisch!
Ich muss Dave Woods zustimmen, dieser Streit kann wirklich nicht gewonnen werden, weil es keine richtige oder falsche Antwort gibt.
Abgesehen davon finde ich es interessant, dass sich niemand darum gekümmert hat, das Problem der Bilder innerhalb ihres CSS als entscheidenden Faktor dafür zu betrachten, ob man in seiten-spezifische CSS-Dokumente aufteilt oder nicht.
Betrachten Sie
Wenn Sie ein Dokument verwenden, um den gesamten CSS Ihrer Website zu verwalten, und Sie die Route gewählt haben, das Dokument nach Body-IDs aufzuteilen, sodass jede Seite ihren eigenen "Abschnitt" innerhalb unseres 1 CSS-Dokuments hat – ja, Sie werden nur die eine HTTP-Anfrage für das Dokument haben, und ja, Sie können Komprimierungstools verwenden, um die Größe des Dokuments zu minimieren.
Allerdings können Sie nicht verhindern, dass alle Bilder, die Sie in Ihrem CSS deklariert haben, geladen werden, selbst wenn nur ein Bruchteil davon tatsächlich benötigt wird, um die Seite, die Sie gerade betrachten, darzustellen. Jedes Hintergrundbild, das in Ihrem CSS definiert ist, generiert eine weitere HTTP-Anfrage. Selbst wenn die Bilder selbst relativ klein sind, würden Sie immer noch ihr Gewicht (in Bytes) und die Verzögerung der zusätzlichen HTTP-Anfragen in die Downloadzeit Ihrer Seite einbeziehen (was in einigen CMS- oder Enterprise-Level-Webanwendungen bis zu 60k bis 80k insgesamt zur Seitengröße hinzufügen könnte, Komprimierung nicht mitgerechnet). Dieser Overhead würde zu JEDER Seite auf Ihrer Website hinzugefügt, unabhängig davon, ob sie für die aktuelle Seite relevant ist oder nicht, und dies wäre das Hauptargument für die Erstellung eines separaten CSS-Dokuments für jede Seite.
Typischerweise erstellen wir ein global.css-Dokument, das design.css / typography.css / print.css in einem Dokument zusammenfasst, zusammen mit einigen sehr üblichen generischen Klassenzuweisungen, die website-weit verwendet werden. Dies ermöglicht es uns, dieses eine Dokument zu komprimieren und zu cachen, das sich, sobald eine Website (oder in unserem Fall eine Anwendung) in die Produktion übergeht, praktisch nie ändert. Dann werden seiten-spezifische CSS-Dokumente erstellt und nach der Seite benannt, auf der sie sich befinden, und in diesen Dokumenten werden alle zusätzlichen seiten-spezifischen CSS (einschließlich Bilder) geladen. Dieses Dokument kann dann separat komprimiert und gecached werden, um das Caching des Haupt-CSS-Dokuments nicht zu beeinträchtigen. Auf diese Weise laden wir nur die Bilder (und generieren die HTTP-Anfragen), die zum Rendern der aktuellen Seite erforderlich sind.
Wie bereits erwähnt, ist dieser Ansatz besser für große CMS-Entwicklungen, Enterprise-Anwendungsentwicklungen oder Modul-Entwicklungen (z. B. Widgets, DNN-Module usw.) geeignet, aber ich ermutige Designer, dies auch bei kleineren Websites zu berücksichtigen. Die in Ihrem CSS deklarierten Bilder (ihre Größe und Häufigkeit) haben einen weitaus größeren Einfluss auf die Seitenleistung als die Gesamtzeichengröße (in Bytes) des CSS-Dokuments oder die zusätzliche HTTP-Anfrage, die ein seiten-spezifisches CSS-Dokument generiert.
David, ich hoffe wirklich, die Leute haben die Geduld, bis zu Ihrem Kommentar zu lesen, denn Sie waren der Erste, der etwas anderes als eine persönliche Präferenz angeboten hat. Ich hatte dieses wenig bekannte Verhalten völlig vergessen und kann Ihnen nicht genug dafür danken, dass Sie es zur Sprache gebracht haben!
Ich frage mich, ob sich alle Browser so verhalten oder ob es zumindest einige gibt, die intelligent genug sind, um zu wissen, welche Bilder geladen werden sollen?
John,
Ich glaube, das ist das Standardverhalten aller Browser (zumindest meines Wissens). Der einzige Weg, wie ich mir vorstellen kann, dass ein Browser bestimmen kann, welche Bilder auf einer Seite angezeigt werden sollen, wäre, dass die Rendering-Engine den gesamten HTML- und CSS-Code der Seite parst und dann nur die Anfragen für Bilder durchführt, deren übergeordnete CSS-Klassen auf der Seite gefunden wurden. Zu diesem Zeitpunkt hätte der Browser jedoch bereits das gesamte CSS-Dokument in die Seite gelesen… daher bin ich mir nicht sicher, wie der Browserkern die bedingte Ladung von Bildern zu diesem Zeitpunkt handhaben würde, da typischerweise eine Seite von oben nach unten geladen wird.
Es wäre interessant, so etwas zu sehen, obwohl wir als Designer dies effektiv tun können, indem wir unsere CSS-Entwicklung mit etwas mehr Vorsicht und Voraussicht angehen. :)
Ich stimme EVula zu, aber ich denke, es ist auch eine Frage, wie groß die gesamte Website ist. Es macht einen Unterschied, ob ich eine Website mit Tausenden von Seiten oder eine Website mit 5 Seiten habe. Für letzteres Szenario denke ich nicht, dass Sie 5 Stylesheets benötigen – ich denke, 1 Stylesheet kann das gut bewältigen.
Guter Artikel, Chris.
Ich muss zugeben, dass ich eine Weile lang ein Master-Sheet für die gesamte Seite verwendet habe, aber die Datei wurde immer größer (ich meine nicht die Größe des Dokuments, sondern die Anzahl der CSS-Codezeilen), und es wurde schwieriger, die Website zu warten. Also habe ich mit dem System begonnen, über das Sie sprechen. Ein Blatt für eine Seite. Die meisten Blätter sind ohnehin fast identisch, also ist es einfacher zu arbeiten. Und Sie wissen, wie manchmal die Änderungen, die Sie in einem Blatt vornehmen (wenn Sie ein Blatt für die gesamte Seite verwenden), genau das sind, was Sie für eine Seite der Website benötigen, aber sie vermasseln etwas völlig anderes auf der anderen Seite. Nun, wenn Sie mehrere Blätter verwenden, müssen Sie sich darum keine Sorgen machen.
Ich bin mir nicht sicher, ob Sie verstehen, was ich meine, ich arbeite noch an meinem Englisch, aber ich hoffe, Sie tun es. Jedenfalls schlage ich jedem vor, dieses Mehrfach-Stylesheet-System zu verwenden. Es hilft sehr.
Sie sagen, dass „Die meisten Blätter ohnehin fast identisch sind“… Ich möchte nur überprüfen, ob alles, was von Seite zu Seite „fast identisch“ ist, in einem EINZIGEN Hauptstylesheet gehalten werden sollte und nur die Dinge, die sich in alternativen Stylesheets stark unterscheiden. Wenn jede Seite ein Stylesheet hätte, das im Grunde eine Duplikat mit nur geringfügigen Änderungen wäre, wäre das schlecht.
Separate Stylesheets sind meiner Meinung nach eine zusätzliche Ebene der Flexibilität bei der Inhaltspräsentation. Wir könnten es als eine Variation des Ansatzes von CSS Zen Garden betrachten: Sie entwickeln ein Hauptstylesheet, das alle gemeinsamen Elemente enthält, und dann einige Variationen. Der HTML-Code kann derselbe sein, aber CSS kann ihn etwas anders, interessanter aussehen lassen, so etwas wie bei Printpublikationen.
Wenn es verwendet wird, würde es Ihnen auch ermöglichen, einige Elemente unterschiedlich zu stylen, aber auch Ihre gesamte Website neu zu stylen, ohne bestimmte Elemente zu verlieren, die in diesen „alternativen“ Designs Sinn machen… Eine saisonale Änderung in CSS könnte ein gutes Beispiel sein.
Dies eröffnet auch Möglichkeiten, mehr mit Inhalten zu tun, Sie möchten möglicherweise Variationen für den Artikelposter anbieten (mit Vorschauen), damit er entscheiden kann, welches Layout besser zu seinem Inhalt passt (oder nicht und diese Macht den Content-Editoren / Moderatoren geben).
Ich experimentiere damit (seit Zikula seine Fähigkeit, „Multi-Sites“ zu betreiben, verloren hat, muss man sich Wege überlegen, damit umzugehen) und bisher sieht es gut aus (Admin-Schnittstellen hatten früher meist ein Design, das vom Hauptstandort ausging, nicht mehr. Mehrere Bereiche Ihrer Website können unterschiedlich thematisiert werden usw. usw.).
Diese Implementierung wäre der Grund, warum ich mehrere Stylesheets verwenden würde: CSS Zen Garden Stil. Aber die Sache ist: Wir sprechen in diesem Fall von einer einzigen Website. Wenn Sie eine Website mit einem Modular Layout System wie auf der persönlichen Website von Jason Santa Maria erstellen würden, dann kann ich eine separate Stylesheet verstehen.
Aber in aktuellen Anwendungen ist das eher nicht der Fall. Eine einzigartige Seite beinhaltet möglicherweise nur wenige Änderungen, vielleicht einen anderen Hintergrund, vielleicht drei Spalten statt zwei Spalten usw.: Das erfordert nicht viele CSS-Zeilen.
Es gibt jedoch mehrere Szenarien, in denen dies nützlich wäre. Eine Band-Website könnte mithilfe desselben HTML-Codes Spinoffs erstellen, um ihre Alben zu präsentieren. Dies wiederum würde ihnen ermöglichen, ein CMS zur Verwaltung der Inhalte für diese Alben zu verwenden. (www.nin.com ist ein gutes Beispiel).
Eine Website eines Fußballvereins wäre ebenfalls ein gutes Szenario. Denken Sie daran als eine Website, die separate Designs für Little League, Jugendliga und Profiliga hat. Jede von ihnen hat unterschiedliche CSS, könnte aber dasselbe HTML verwenden. Dies hilft dem Designer auch, jedes Segment seines Publikums anzusprechen.
Schauen wir mal wie: CSS-Dateien wären eine allgemeine .css-Site, die einige grundlegende Größenregeln, Farben und Schriftarten festlegt; wir hätten auch ein CSS-Framework für die Positionierung und von da an hätten wir separate CSS-Dateien für jede Gruppe von Seiten, die wir unterschiedlich gestalten möchten.
Meiner Meinung nach könnte man damit dasselbe grundlegende HTML für jede Gruppe von Seiten auf der Website verwenden (was bei CMS normalerweise der Fall ist).
Meine Erfahrung damit stammt aus der Arbeit mit Zikula und dem Pagesetter-Modul. Mit diesem Modul generieren Sie benutzerdefinierte Publikationen mit benutzerdefinierten Feldern. Jede Publikation muss möglicherweise als separater Abschnitt derselben Website behandelt werden. Sie werden die Notwendigkeit dieses Ansatzes erkennen, sobald Ihr Kunde mehr als 5 Publikationen benötigt. Ihre Vorlagen würden von der allgemeinen.css-Datei und dem Positionierungsframework profitieren, aber der Rest der Präsentation würde auch davon profitieren, dass er trennbar ist.
Überarbeitungen für diese Vorgehensweise würden verhindern, dass Klassen sich gegenseitig in die Quere kommen und könnten auch bedeuten, dass Sie Änderungen, die Ihr Kunde benötigt, für jeden spezifischen Abschnitt schneller anwenden können.
Die allgemeine.css-Datei (oder sogar eine branding.css) könnte es auch ermöglichen, die CSS aus saisonalen Gründen anzupassen (Mode-Design-Websites kommen mir in den Sinn).
Nun sehe ich den Sinn, diese Technik bei einfachen Websites oder bei einfachen Skripten anzuwenden. Aber für eine wirklich, wirklich komplexe Website halte ich das für vernünftig (ein Webportal würde davon auch profitieren).
Nur meine zwei Cents.
Ich mag diese Art von Flexibilität sowohl in der Entwicklung als auch im Endergebnis. Sicherlich habe ich mich im Laufe der Zeit mehr in Richtung eines Mehrfach-Stylesheet-Ansatzes bewegt, anstatt mich auf eine einzige große CSS-Datei für eine Website zu verlassen. Sie bietet erheblich mehr Kontrolle über Seitenlayouts und Erscheinungsbild bei sehr geringen Leistungseinbußen.
Es kann schwieriger sein, Stylesheets mit bestimmten CMS bedingt zu laden. Ich habe eine einigermaßen elegante Methode dafür mit Joomla gefunden, und ich bemerke aus den obigen Kommentaren, dass Expression Engine dies leisten kann. In einer dynamischen Umgebung, und insbesondere wenn Seiten von weniger technisch versierten Personen geändert und aktualisiert werden, kann die zuvor eingerichtete Flexibilität für das Styling von großem Nutzen sein.
Wie andere schon vorgeschlagen haben, würde ich im Produktionsumfeld das einzelne Stylesheet bevorzugen. Ich würde sicherlich nicht mehrere Stylesheets für die Homepage anfordern.
Das Problem mit mehreren CSS-Bildern wird trivial durch die Verwendung eines Sprites gelöst. Ich wäre mehr besorgt über die mögliche Latenz von 500 ms bei jeder HTTP-Anfrage, als ein paar weitere unnötige KB zu einer einzelnen Lieferung hinzuzufügen. Bei niedrigen Breitbandgeschwindigkeiten benötigen Sie etwa 2000 Zeilen unkomprimiertes CSS, um 500 ms zur Downloadzeit hinzuzufügen.
Die Navigation auf der Website wird schneller sein, wenn nicht bei jeder Seite mindestens zweimal auf den Server zugegriffen werden muss.
CSS-Sprites sind nur eine Lösung, wo sie effektiv eingesetzt werden können. Je nach Design ist die Verwendung von Sprites möglicherweise einfach nicht praktikabel. Ein Beispiel wäre die Verwendung von .png-Bildern mit Alphatransparenz und Schatten. Nehmen Sie zum Beispiel eine 4-seitige erweiterbare Box mit abgerundeten Ecken und Schatten und einer 4-seitigen internen Farbverlaufs-Karte. Ein CSS-Sprite funktioniert hier nicht.
Darüber hinaus fügen Sie je nach Komplexität des als Sprite verwendeten Bildes ein paar „zusätzliche“ Bytes zum Originalbild hinzu, aber Sie fügen auch ALL diese Bytes zu Seiten hinzu, die das Bild nicht einmal verwenden. Das mag bei einer einfachen 5-seitigen Website kein Problem sein… (es sei denn, das Sprite allein ist 30 KB groß)… aber für größere Websites (oder modulare Designs wie Portale oder komplexe Unternehmenswebsites) versucht man normalerweise, jedes KB zu sparen. Dies beinhaltet Codegröße, Anzahl der HTTP-Anfragen, Bildgrößen, Skriptdateigrößen, .swf-Dateigrößen usw.
Durch die Verwendung von seitenspezifischem CSS (auch wenn keine Sprites verwendet werden) können Sie je nach Komplexität des Designs / der Inhaltspräsentation auf dieser Seite ein separates Dokument verwenden, um von 12 KB bis 60 KB Größe für diese eine Seite zu sparen. Das mag für Breitbandnutzer keine große Auswirkung haben, aber wenn diese Seite, sagen wir, 100.000 Mal im Monat ausgeliefert wird… summieren sich diese 12 KB bis 60 KB in der Bandbreitennutzung, der Plattenübertragung usw., was alles Teil der Kosten für das Hosting einer Website ist.
Beachten Sie auch, dass viele Faktoren die Seitenleistung beeinflussen, wie z. B. Netzwerklatenz, die Belastung des Servers zum Zeitpunkt der Seitenlieferung, ob Komprimierung aktiviert ist, Caching usw.
Als Designer (und Entwickler) konzentrieren wir uns darauf, die beste Benutzererfahrung zu bieten und gleichzeitig die Ziele und Visionen unserer Kunden zu erfüllen. Zu diesem Zweck müssen wir alle verschiedenen Wege berücksichtigen, wie wir die Bereitstellung maximieren und gleichzeitig den Overhead minimieren können. Für mich ist das viel wichtiger als die philosophische Debatte über 1 vs. seitenspezifische Stylesheets.
Nicht jeder hat Breitband, und nicht jedes Telefon ist 3G-fähig… und mit dem Aufkommen des mobilen Webs wird es für UI-Designer immer wichtiger, intelligentere und effizientere Website-Designs zu entwickeln, und seitenspezifisches (oder modulares) CSS ist eine Möglichkeit, dies zu erreichen.
Ich verwende immer ein Master-CSS für allgemeine Layout-Einstellungen und allgemeine Selektoren, die von vielen Seiten verwendet werden. Für einzelne Seiten oder eine Gruppe von Seiten erstelle ich immer ein einzigartiges CSS, das nur Selektoren für die spezifische Seite enthält.
Generell hasse ich es, über „Benutzerbandbreitenlast“ zu sprechen… na und? Heute lädt jeder GB an Daten aus dem Internet herunter, daher sehe ich 4 KB oder 10 KB CSS nicht als Problem…
Hallo,
Ich mag Ihren Ansatz, aber es ist irgendwie schwierig zu befolgen, wenn Sie Skins für Plattformen wie Moodle erstellen. Sie können verschiedene CSS-Dateien erstellen, wenn dies erforderlich und für die Wartung nützlich ist. Wenn Sie jedoch alle Ihre CSS-Dateien in der Konfigurationsdatei des Skins registrieren, werden alle CSS-Dateien zu einer großen Datei zusammengefasst. Alle CSS-Dateien werden also auf allen Seiten geladen.
Es ist immer noch gut für die Wartung, da Sie wissen, wo sich die spezifischen Stile befinden, aber jede CSS-Datei wird geladen, auch wenn sie nicht verwendet wird.
Sie können dies umgehen und spezifische Stylesheets hinzufügen, wenn sie benötigt werden, aber das ist nicht üblich.
Als persönliche Meinung: Ich versuche, die CSS-Dateien zu trennen, um eine logische Struktur zu erhalten. Es hilft mir zu wissen, wo alles ist. Ich stelle dies über Performance-Bedenken.
Nur zur Info
sind separate Dateien wirklich ein großes Problem für die Performance?
Übrigens, danke Chris für Ihre hervorragenden Beiträge, sie helfen mir sehr. Sie erleichtern das Lernen für Anfänger wie mich.