So viele CSS-Dateien sollten auf jeder Website geladen werden.
Eins
- Eine Einzelseiten-Website.
- Eine ziemlich einfache Website mit nur ein paar Seiten, die sich nicht allzu sehr unterscheiden.
- Ein Blog oder eine blogähnliche Website, bei der auch wenn es Tausende von Seiten und Taxonomien gibt, diese größtenteils gleich aussehen.
Zwei
- Eine Web-App mit einem globalen Satz von Designmustern und dann seltener verwendeten Designmustern in verschiedenen Bereichen der Website.
- Inhaltsschwere Website mit einer globalen Struktur, einem Raster und Typografie und dann zusätzlicher CSS-Ladung für bestimmte Bereiche der Website, die mehr benötigen.
- Websites, bei denen jede Seite sehr einzigartig ist (globale und seitenspezifische CSS).
- Die meisten Websites.
Drei
- Sehr komplexe Websites, die globale CSS, bereichsspezifische CSS und einmalige Seiten-CSS benötigen.
Ich schlage vor, dass drei die maximale Anzahl von CSS-Dateien ist, die jede Seite benötigt.
Dies ist bereitgestelltes CSS
Wenn ich eins, zwei oder drei sage, spreche ich von CSS-Dateien, die aus dem Kopf von bereitgestellten Websites verlinkt sind. Ich spreche nicht von den CSS-Dateien, die Sie als Entwickler bearbeiten. Dafür sollten Sie in beliebigen modularen Blöcken arbeiten, die für Sie Sinn ergeben. Dann werden diese modularen Blöcke zu den endgültigen bereitgestellten Dateien zusammengefasst. Sie können dies mit Dingen wie der Rails Asset Pipeline tun, einen CSS-Präprozessor verwenden oder mit Apps wie CodeKit.
Zum Beispiel
Global = main.css + grid.css + typography.css + buttons.css + print.css
Website-Bereich A = tabs.css + editor.css
Website-Bereich B = forms.css + video.css + details.css
Was auf dem "Editor"-Teil der Website geladen wird = global.css & site-section-a.css
Was auf dem "Details"-Teil der Website geladen wird = global.css & site-section-b.css
Ist eins nicht immer besser?
Nein. Wenn Sie daran denken, eine seitenspezifische CSS-Datei zu erstellen und die benötigten Teile irgendwie in diese einzelne Datei zu verketten, tun Sie es nicht. Es scheint, als ob eine Anfrage besser ist als drei! Aber dann nutzen Sie den Browser-Cache überhaupt nicht.
Nehmen wir an, Sie befinden sich in einem typischen Zweistyle-Szenario. Während Sie sich in einem bestimmten Bereich einer Website bewegen, müssen alle Seitenaufrufe nach dem ersten keine CSS-Dateien laden, da sie bereits zwischengespeichert sind. Und selbst das Springen in einen neuen Bereich erfordert nur das Laden einer neuen Datei (die globale ist bereits zwischengespeichert).
Wenn Sie für jede Seite eine eigene CSS-Datei erstellen, müssen Benutzer für jede besuchte Seite eine neue Stylesheet anfordern.
OK
Jetzt können Sie mich für die Übervereinfachung trollen. =)
Absolut einverstanden. Es macht nicht einmal Sinn, separate Reset- oder Print-CSS-Dateien zu haben...
Ja, ich würde sagen, beides gehört in den globalen Bereich. Bis zu dem Tag, an dem wir Browser dazu bringen können, nur dann eine Print-Stylesheet anzufordern, wenn sie sie benötigen (beim Drucken), dann würde ich vorschlagen, sie in eine <link media="print" ...> zu verschieben.
Ich persönlich verwende für die meisten meiner Websites eine CSS-Datei, aber es gab Fälle, in denen ich 2 oder mehr gebraucht habe. Es war schön zu wissen, was Sie tun und warum Sie es so tun, wie Sie es tun.
Trotzdem danke fürs Teilen.
Ich habe mich gerade gefragt, was Ihre Vorschläge wären, wenn Sie mehrere jQuery-Plugins verwenden würden, mit spezifischen CSS-Dateien, die mit ihnen verbunden sind. Zum Beispiel benutze ich oft qTip2, fancybox und jQuery UI und fügen wir sogar ein Rotator-Plugin zusammen in einer Web-App hinzu.
Würden Sie sie lokal herunterladen und kombinieren?
Vielen Dank,
Marty
Ja, lassen Sie diese Datei unabhängig, aber fügen Sie sie in die Datei ein, die sie benötigt (global oder bereichsspezifisch oder was auch immer).
Können Sie näher erläutern, wie Sie sie verketten würden? @import? Less? Und würden Sie Print-Stylesheets auf die gleiche Weise behandeln?
Theoretisch ist das etwas, womit wir uns wohl alle einigen können. Aber im WordPress-Sinne, wie schaffen Sie es, all diese von Plugins generierten CSS-Dateien in 1 oder 2 Dateien unterzubringen und gleichzeitig Wartung und Updates einfach zu halten?
Danke für Ihre Antwort :-)
Ich benutze W3TotalCache dafür. Es kombiniert alle CSS-Dateien serverseitig – und Sie können dasselbe auch für JS-Dateien tun (wenn es Ihre Website nicht kaputt macht).
Das Beste an W3TC ist, dass Sie es für angemeldete Benutzer deaktivieren können – was mir beim Debugging hilft.
Meine Methode in letzter Zeit ist 3.
1) Bootstrap min
2) Bootstrap responsive min
3) Style.css mit all meinen Anpassungen.
Ich könnte wahrscheinlich mit der Kombination der ersten beiden auskommen.
Wenn Sie diese auf allen (oder fast allen) Seiten einschließen, dann sollte es eine Stylesheet und nicht mehr sein.
Sie sollten das media-Attribut mit responsive bootstrap verwenden, damit Sie immer 2 Stylesheets verwenden
Wenn ich eine einzige Seite hätte, würde ich die CSS direkt im Dokument platzieren und nicht in einer separaten Datei. Kein Grund, über das Netzwerk zu gehen, um etwas für eine einzige Seite abzurufen.
Ich würde davon abraten, da Sie nicht die vollen Vorteile des Cachings nutzen würden.
Im besten Fall würden Sie den Cache nur für eine bestimmte URL verwenden. Wenn Sie zu einer anderen Seite navigieren, müssen Sie all diese CSS erneut herunterladen. Das Vorhandensein von CSS in einer externen Datei (d. h. der typische Ansatz) bedeutet, dass all diese CSS nur einmal heruntergeladen und von da an zwischengespeichert werden.
Entschuldigung, ich habe den Teil "Wenn ich eine einzige Seite hätte" falsch gelesen/interpretiert.
In diesem Fall wäre das eine gute Idee (vorausgesetzt, diese einzelne Seite wird vom Browser korrekt zwischengespeichert – d. h. eine statische HTML-Datei wäre in Ordnung, während ein PHP-Skript korrekte Einstellungen erfordern würde).
Sehr gutes Thema Chris und sehr schön erklärt.
Idealerweise ist eine CSS-Datei der beste Weg. Die Idee ist, so wenige Serveraufrufe wie möglich zu haben, um die HTML-Seite so schnell wie möglich zu laden.
Ein weiterer Weg, die Ladezeit der Seite zu verkürzen, ist die Reduzierung der Bilder durch Gruppierung von CSS-Bildern in Bildspriten. Auf diese Weise können Sie anstelle von zum Beispiel 20 Serveraufrufen für 20 CSS-Bilder einen einzigen Serveraufruf für ein Bildsprite haben.
Ich denke, Drupal hat hier den richtigen Ansatz
http://cl.ly/3U3l2A2H1Z0a3O3l3x2D
LOL!
Um beim Thema zu bleiben: Ich wünschte, ResourceLoader (MediaWiki-Komponente) wäre eigenständig. Das würde WordPress, Drupal und Ihre selbst erstellte PHP-App zu einem großartigen Frontend machen.
Um Drupal fair zu behandeln, die CSS-Dateien können sehr einfach zu einer Datei optimiert und aus der Benutzeroberfläche zwischengespeichert werden. Wenn Ihre Drupal-Installation live ist und immer noch CSS-Dateien nicht optimiert sind, machen Sie es falsch. Ich sehe, dass die als Beispiel verwendete Website jetzt WP verwendet, was auch ein ähnliches Problem hat (obwohl ich sicher bin, dass es in WP eine ähnliche Lösung wie in Drupal gibt). http://note.io/1uQTt9s :)
Meinen Sie mit seitenspezifisch "Stile, die für einige sehr ähnliche Seiten spezifisch sind"? Wenn Stile tatsächlich für eine einzelne Seite spezifisch sind, dann können sie genauso gut in ein Style-Element im Kopf geschrieben werden. Sie sparen eine HTTP-Anfrage.
Wenn die Stile jedoch auf auch nur einer weiteren Seite verwendet werden, gewinnen Sie durch die Speicherung dieser minimal geteilten Stile in einer separaten Datei an Cachebarkeit.
Der Punkt ist, dass Sie sie oft genug wiederverwenden müssen, um die zusätzliche HTTP-Anfrage zu rechtfertigen.
Guter Beitrag Chris!
Persönlich verwende ich mehr CSS-Dateien, wenn ich entwickle, und füge sie zu einer einzigen zusammen, wenn ich veröffentlichen muss.
Ich stimme Ihnen vollkommen zu – wir haben jedoch bei dem Versuch, unser CSS für eine große Kunden-Website zu komprimieren und zusammenzuführen, festgestellt, dass IE7 ein Dateigrößenlimit für Stylesheets hat, über das hinaus es den Inhalt nicht liest. Daher mussten wir unsere beiden größten zusammengeführten Stylesheets in zwei kleinere Dateien aufteilen. Sehr frustrierend, besonders wenn man die anderen IE-Beschränkungen berücksichtigt.
IE (alle Versionen): Die höchste Anzahl von CSS-Dateien, die von IE geladen werden, ist 32 (einige Quellen geben sogar 31 an). Jede CSS-Datei über diesem Limit hinaus wird ignoriert.
IE (alle Versionen): Internet Explorer beschränkt verschachtelte @import CSS-Anweisungen auf drei von der ersten verlinkten externen Stylesheet.
IE6/IE7: Limit für CSS-Dateigröße ca. 285KB (abhängig von der spezifischen Stylesheet)
Quelle: IE CSS Filesize Limit, CSS Size Limit in IE8
Haben Sie das gesehen? http://blesscss.com/
OMG
Ich war wirklich nicht über dieses Problem informiert. Schande über dich IE! Du bist ein schlechter Browser.
Aber es ist gut zu wissen, dass Bless existiert (habe es mir notiert). Ich hoffe wirklich, dass ich es nie benutzen muss.
Wie denken Sie über die Verwendung von eingebettetem CSS auf einer Website, die nur eine einzige Seite hat? Ich habe den HTML-Code der Website für das Humble Indie Bundle untersucht und festgestellt, dass sie eingebettetes CSS verwendet haben.
Einige Details
-Die Website ist nur eine Seite.
-Die Website erlebt Wellen von unglaublich hohem Datenverkehr, wenn sie ein neues Bundle veröffentlichen, gefolgt von Phasen mit wahrscheinlich fast null Datenverkehr.
-Besucher besuchen die Website wahrscheinlich einmal, kaufen ihr Bundle und kehren dann nie wieder zurück, bis ein neues Bundle veröffentlicht wird.
Ich habe darüber nachgedacht und es scheint mir, dass die Verwendung von eingebettetem CSS in diesem Fall ziemlich clever ist. Sie vermeiden eine weitere HTTP-Anfrage, indem sie das CSS einbetten, anstatt auf eine CSS-Datei zu verlinken.
Gedanken?
Ich habe immer eine CSS-Datei für die Website im Allgemeinen.
Wenn viele Seiten ähnlich aussehen, werde ich eine zweite Stylesheet dafür einfügen.
Dann, wenn ich seitenspezifische Stile benötige, platziere ich sie in einem <style>-Tag.
Seufz. Ich lebe und arbeite im CMS-Ghetto, und dieser Beitrag erinnert mich stark daran. Ach, mehr Kontrolle über die Websites, an denen ich arbeite!
Entwickler schreiben oft Plugins/Erweiterungen, die Stylesheets laden, ob Sie wollen oder nicht. Sie geben Ihnen kaum eine Option, darauf zu verzichten. Gelegentlich mache ich eine Anfrage dafür, aber ich glaube nicht, dass es genug ihrer Benutzer interessiert, damit es sich für sie lohnt, es zu implementieren.
Natürlich können Sie nach einem anderen Plugin suchen, um die Stylesheets zu verketten, aber ich habe es schwierig gefunden, eines auf meiner Joomla-Website tatsächlich zum Laufen zu bringen.
Die Lösung, die ich gefunden habe, ist die Verwendung von Google's mod_pagespeed für Apache. Es findet und verbindet nicht alle Dateien, die ich möchte, aber es hilft.
https://developers.google.com/speed/pagespeed/mod
Danke, dass Sie mich jammern lassen ;)
Ich benutze vier.
Es gibt immer mein Single-File-Framework.
Und die anderen drei: tags.css, ids.css, classes.css
Ich benutze diese Methode, um meine Stylesheets zu trennen, sie funktioniert sehr gut.
-Entschuldigen Sie meine englische Grammatik.-
MERKWÜRDIG.
=)
Hah! Ich mache gerade allerlei schlechte Dinge in die entgegengesetzte Richtung, jetzt, da ich festgestellt habe, dass HTML5 es erlaubt. Ich erstelle zuerst .style. Tags im Body, packe sie nicht in eine externe Datei, und erst wenn ich das CSS so finalisiert habe, wie ich es haben möchte, zum Beispiel nachdem ich ihm einen Tag oder so zur Stabilisierung gegeben habe, verschiebe ich es in eine globale Stylesheet.
Hallo Kzqai, ich sehe nicht, wie das schlecht ist! Ich mache solche schnellen und schmutzigen Dinge ständig, sogar Inline-Stile, bis meine "Kunden" (eigentlich meine Chefs) zustimmen, was sie wollen. Wenn es vorübergehend ist und nur Sie daran arbeiten, wen kümmert's? :)
Ich arbeite an vielen Websites, die eine Startseite und höchstens drei oder vier Unterseiten haben. Ich neige dazu, all mein CSS in eine einzige Datei zu packen, da es mich zwingt, einfache, wiederverwendbare Designmuster zu konzipieren. Ich bin im Herzen ein Reduktionist :-)
Obwohl ich den meisten der geäußerten Kommentare zustimme, glaube ich, dass, wenn Sie professionelle Systeme entwickeln möchten, Level drei am besten ist, um die Anwendungsentwicklung kurz- und mittelfristig zu erleichtern.
Wenn das Ziel ist, die Reaktionszeit zu reduzieren, gibt es andere effizientere Methoden, um dies zu erreichen, angefangen mit dem Cache der Basisdateien.
Während ich den meisten der geäußerten Kommentare zustimme, glaube ich, dass, wenn Sie professionelle Systeme entwickeln möchten, Level drei am besten ist, um die Anwendungsentwicklung kurz- und mittelfristig zu erleichtern.
Wenn das Ziel ist, die Reaktionszeit zu reduzieren, gibt es andere effizientere Methoden, um dies zu erreichen, angefangen mit dem Cache der Basisdateien.
In Ihrem dritten Beispiel, warum nicht alle drei Stylesheets (globale CSS, bereichsspezifische CSS und einmalige Seiten-CSS) in einer einzigen Datei einschließen?
Es mag auf den ersten Blick ineffizient erscheinen, aber selbst tausend zusätzliche Zeilen CSS sind nur wenige KB. Also lassen Sie die Person alles herunterladen, wenn sie zum ersten Mal Ihre Website besucht, und dann wird die Stylesheet für den Rest ihres Besuchs zwischengespeichert.
Ich kann mir vorstellen, dass dieser Ansatz für Websites mit *riesigem* Datenverkehr, bei denen jedes einzelne KB zählt, problematisch ist. Aber für 99 % der Websites scheint dies der schnellste und direkteste Weg zu sein.
Es ist ein bisschen schwierig, abstrakt über solche Dinge zu reden, aber ich werde es versuchen. Im "drei"-Beispiel oben denke ich an Websites, bei denen die Website so groß ist und es so viele verschiedene Bereiche gibt, dass das Zusammenlegen in eine einzige Stylesheet nicht praktikabel ist. Vielleicht wäre die Stylesheet dann 3MB oder so etwas (das habe ich schon mehr als einmal gesehen). Aber zumindest wird sie dann für jede Seite der Website zwischengespeichert, oder? Nun, vielleicht. Das ist für Mobilgeräte zu groß, um zwischengespeichert zu werden, also dort nicht. Und dieser anfängliche Treffer ist so groß, dass er sich wahrscheinlich nicht lohnt. Durch die Aufteilung in drei wird aus diesen 3 MB keine 3 MB mehr, sondern so gezielt, dass sie wahrscheinlich WEIT kleiner ist. Sagen wir 100 KB, weil sie nur die Dinge lädt, die sie braucht, nicht alles von dieser riesigen Website. UND sie nutzt den Cache besser. Global.css wird überall verwendet und ist wahrscheinlich ziemlich klein (gut für Mobilgeräte) und zwischengespeichert. Site-section.css ist ähnlich, und während die Leute navigieren, müssen sie höchstens die (wahrscheinlich auch sehr kleine) seitenspezifische CSS herunterladen.
Sie haben völlig Recht. Ich arbeite gerade an einem Projekt, um die Anzahl der Stylesheets und JS-Dateien, die unsere Website abruft, zu reduzieren. Die Anzahl, die wir jetzt haben, ist absolut lächerlich und ich möchte sie auf etwa 3 pro Seite reduzieren. Danke fürs Posten!
Chris, ich sehe, dass Sie einen HTML-Parser oder etwas Ähnliches verwenden, um HTML in Kommentaren zuzulassen, was ein Problem ist, mit dem ich selbst zu kämpfen habe, wo vollständiges Escaping nicht funktioniert und es ein kniffliges Problem zu sein scheint.
Welche Lösung verwenden Sie, und empfehlen Sie sie?
Hey, es tut mir leid, wenn es dumm klingt!!!
Aber was ist, wenn... ich eine Website habe, angeblich eine Blog-Website mit zahlreichen, aber ähnlichen Seiten, und ich daran denke, zahlreiche CSS-Dateien zu referenzieren... für Buttons, Medien und alle anderen möglichen stilbaren Elemente????
Wie würde sich das auswirken?????
Es erstaunt mich, wie viele Webentwickler die Dinge überkomplizieren, und es braucht einen Blogbeitrag wie diesen, um zu sagen: "Hey, hört auf, die Dinge zu überkomplizieren, und steckt einfach globale Stile in eine einzige Stylesheet." Gute Sache.
Ich mag die Vereinfachung, die Sie vorgenommen haben, aber ich stimme nicht zu. Ich denke, eins ist am besten, aber nur, wenn es an den Client gesendet wird. Ich glaube, Sie sollten die CSS-Dateien nach dem trennen, was für die Wartbarkeit am besten Sinn ergibt, je nach Ihrer Situation, und sie dann beim Bereitstellen der Website zusammenführen (es gibt tonnenweise automatisierte Zusammenführungstools dafür). Mit diesem Vorbehalt arbeite ich tendenziell an Webanwendungen und nicht an Websites, sodass es bei einer Website anders sein mag. Ich trenne sie persönlich ähnlich dem, was Sie unten sehen
reset
drucken
gemeinsame css
seitenspezifisch
benutzerkontrollspezifisch
bibliothekspezifisch (jquery, treeview...)
browser-spezifisch
Wenn es auf einer Seite gerendert wird, ist es eine Datei, eine Anfrage. Wenn jemand ein Problem damit sieht, lassen Sie es mich bitte wissen, da ich immer noch wissen möchte, wie ich es verbessern kann.
Ich analysiere Dinge übermäßig. Ich verwende auf jeder Seite eine Stylesheet, verschiedene Stylesheets für jeden Bereich. Das liegt daran, dass Personen, die auf verschiedene Teile der Website zugreifen, auf der ich arbeite, wahrscheinlich keine anderen Seiten der Website sehen. Die Studenten werden niemals die Lehrerverwaltung sehen, also brauchen sie diese Stylesheet-Informationen nie. Sie brauchen eine Studenten-Stylesheet. Beide Designs teilen gemeinsame Elemente, aber anstatt diese Gemeinsamkeiten in einer "globalen" CSS-Datei zu verstauen (die nicht wirklich global wäre, sondern nur zwischen diesen beiden Benutzern geteilt wird – die öffentlich zugängliche Website ist komplett anders, doch wieder!), mache ich es einfach zu einem Include in Sass und kompiliere es zu jedem Blatt.
Klingt für mich schlau.
99 % meiner Arbeit erfolgt in Standard-CMS (Drupal, EE, WP). Hauptsächlich Drupal & EE. Drupal hat eine integrierte Einstellung zum Kombinieren von CSS- und Javascript-Dateien. Aber aus irgendeinem Grund schlägt dies beim Versuch normalerweise fehl. Und seien wir ehrlich, Drupal ist bekannt für seine Leistung und Flexibilität, nicht für seine Effizienz. Die Anzahl der Browseranfragen für einen einzelnen Seitenaufruf ist erstaunlich.
Bei Expression Engine oder wenn ich meine eigene entwickle, bin ich ein großer Fan von HTML5 Boilerplate. 1 Stylesheet, responsiv, mobil-first.
Ich war mir des IE-Selektor-Limit-Bugs nicht bewusst. Glücklicherweise glaube ich nicht, dass ich jemals eine Website erstellt habe, die so viele Selektoren verwendet.
Mein Ansatz ist es, zahlreiche LESS-Dateien (Reset, Grid, Mixins, Layout, Nav, Header, Footer, Typografie, Homepage, ...) zu haben, die meine Stile in logische Dateien trennen, sodass ich, wenn ich etwas anpassen muss, sofort weiß, in welcher Datei es sich befindet. Da sie so aufgeteilt sind, sind die Dateien normalerweise ziemlich klein (unter 500 Zeilen), sodass das Auffinden des genauen Stils sehr schnell geht.
Um sie zusammenzuführen, verwende ich eine einzige LESS-Datei mit @imports, dann eine benutzerdefinierte PHP-Datei zum Minifizieren, Zippen und Zwischenspeichern der Ausgabe in einer einzigen Datei.
Ich bin dabei, eine relativ große Website zu bauen, und bisher habe ich nur 147 Selektoren, also bin ich auf der Vorderseite des IE-Bugs gut aufgestellt. Ich erwarte, dass es noch ziemlich viele geben wird, wenn ich mit dem Skinning beginne, aber ich glaube nicht, dass ich irgendwo in der Nähe der ~4000 des Schwellenwerts des Bugs sein werde.
Laurence,
Das klingt so... verdammt... elegant! Ich bin neidisch auf Ihren Workflow!
Absolut einverstanden. Ich wollte nur darauf hinweisen, dass dies auch ein großartiger Ansatz für JavaScript-Dateien ist. Es gibt keinen Grund, Dutzende von JS-Dateien für jede Seite zu laden.
Je weniger Sie laden, desto schneller ist die Website – desto besser ist Ihr SEO.
Ich habe immer eine Reset-CSS-Datei ... also sind es für mich immer mindestens 2 CSS-Dateien.
Warum nicht das Reset in Ihre "normale" Stylesheet aufnehmen? Frage mich nur, warum, nicht sarkastisch :D Normalerweise behalte ich es in der Haupt-Stylesheet.
Ich rufe eine Datei wie diese auf: <code><link rel="stylesheet" href="./style.css?template=page"></code>. Dann kompiliert PHP alles für diese Seite in ein einziges Blatt, was nur eine HTTP-Anfrage ergibt.
Normalerweise gehe ich bis zu 3, habe aber nie mehr als das.
Meine Struktur ist normalerweise;
Kernlayout (Struktur)
Styling (Typografie, Verläufe, Ränder usw. – das Hauptmaterial)
Seitenspezifisches Material (zum Beispiel zum Stylen eines Sliders oder eines einzigartigen Elements).
Meine Resets usw. gehen in das Kernlayout, da ich gerne Dinge getrennt halte.
Werden Struktur- und Styling-Stylesheets seitenweit verwendet? Warum kombinieren Sie sie nicht? Sie könnten sie während der Entwicklung getrennt halten, aber für die Produktion zusammenführen.
W3TotalCache sieht sehr interessant aus, sieht so aus, als ob jede WP-Seite das braucht :). Ich benutze zwar kein WP, habe dieses 'Problem' aber in meiner Template-Engine gelöst. Jede Template-Datei kann mehrere CSS-, LESS- oder JS-Dateien im Head-Bereich einfügen. Das serverseitige Skript wertet jede Datei aus und kompiliert sie (neu), falls erforderlich. Dann fügt es alle Dateien zu einer einzigen Cache-Datei hinzu. Der Cache-Schlüssel ist für jede Dateikombination eindeutig. Auf diese Weise hat jede Seite ein Minimum an CSS, aber alles ist für die Entwicklung immer noch ordentlich in mehrere Dateien aufgeteilt. Das System hat auch einen Entwicklermodus, in dem alle Dateien separat eingebettet sind. (LESS wird natürlich immer noch kompiliert).
Dies erleichtert den Aufbau wiederverwendbarer Module und hält deren JS/CSS-Fußabdruck klein.
Mir ist bewusst, dass dies nichts ist, was jeder implementieren kann. Aber wenn Sie die volle Kontrolle über Ihren serverseitigen Code haben (vielleicht Ihr eigenes CMS), kann ich Ihnen sagen, dass dieses System mich sehr glücklich gemacht hat ;)
Für diejenigen mit wenig Programmiererfahrung: Schauen Sie sich cloudflare.com an. Ich habe sie diese Woche getestet und sie scheinen großartig zur Behebung von Leistungsproblemen. Sie bieten auch ein System an, das alle CSS und JS auf bestehenden Websites kombiniert. Könnte eine Option für einige sein.
Ich würde die Verwendung einer vierten Ebene für Zielgruppen (Abonnements, Sprachen, Rechte usw.) argumentieren. Beispiele: free_trial.css, year_subscription.css, german.css, canadain_fr.css, admin.css, read_only.css
Das Web wird schneller, Browser rendern immer schneller. Ich habe kürzlich ein Projekt auf Basis von Twitter Bootstrap abgeschlossen. Während der Entwicklung habe ich einfach alle LESS- und JS-Dateien eingebunden, die Bootstrap zu bieten hat. Am Ende habe ich aufgeräumt. Aber ich konnte keinen Geschwindigkeitsunterschied feststellen (ok, ich bin ein Mensch). Warum also der Aufwand?
Oder kümmern Sie sich um die 10 KB Ladezeit, die Sie hier sparen können? Schauen Sie sich vielleicht zuerst Ihre Bilder an.
Wie immer fantastisch.
Ich war ziemlich zufrieden mit mir selbst, weil ich vor diesem Artikel tatsächlich nur ein begrenztes Wissen über das Einbinden mehrerer Stylesheets hatte. Das ist mal eine Abwechslung!
Ich liebe die höhere Posting-Frequenz…
Ich stimme diesem Artikel voll und ganz zu – ich setze seit 2006 modulare CSS-Systeme auf E-Commerce-Plattformen ein. Das Kern-Stylesheet wird für jede Seite geladen, und dann werden eine Reihe von @imports serverseitig kombiniert und minifiziert, bevor sie in die .
Simpel :)
Ich stimme Ihnen vollkommen zu. Eine vollständige Zusammenführung von CSS ist nur nützlich, wenn immer die gleichen CSS-Dateien vorhanden sind oder alle CSS-Dateien unterschiedlich sind. Im Falle von teilweise gleichen CSS-Dateien ist Ihr Ansatz der einzig optimierte Weg, um die beste Leistung zu erzielen.
Toller Beitrag. Wir bei Yandex denken auch darüber nach. Wir haben einen Prototyp eines Tools, das CSS (und andere statische Dateien, z. B. JS) für Seiten erstellen kann, aber basierend auf einigen echten Statistiken über Benutzersitzungen auf der Website. Das ermöglicht die Handhabung von Situationen, in denen sich die Struktur der Website oder verwendete Blöcke ändern, sodass das Tool neu anordnen kann, in welchen Kombinationen von Blöcken Stile zu separaten gebündelten Dateien kombiniert werden sollten.
Hier ist der Link: https://github.com/mihaild/ybundler (leider ist die README nur auf Russisch, aber die Tests und die Kommandozeilenhilfe sind auf Englisch).
Hallo Chris!
Ich bin auch ein Frontend-Entwickler von Yandex.
Dies ist ein Portal mit über 100 Diensten und natürlich denken wir viel über die Verwaltung unserer CSS-Dateien nach. Normalerweise haben wir 1 CSS-Datei pro Seite. Manchmal aber auch mehr. Je nach Projektstruktur kann eine common.css-Datei erscheinen.
Wir können unser CSS-Schema sehr schnell ändern, nachdem wir analysiert haben, welche Seiten jedes Dienstes am beliebtesten sind. Diese Informationen können die Erstellung unserer Dateien beeinflussen. Das alles geschieht automatisch, weil wir kein reines Seiten-CSS schreiben, sondern unsere Seiten deklarativ in Bezug auf Blöcke (verschiedene Teile der Seite) beschreiben. Und so können wir so viele CSS-Dateien generieren, wie wir im Einklang mit der Cache-Logik benötigen.
Dies ist nur ein Vorteil unseres Frontend-Ansatzes namens BEM. Wenn Sie interessiert sind, können Sie mehr darüber erfahren unter dem Link http://bem.github.com/bem-method/pages/beginning/beginning.en.html
Ich würde mich über Ihr Feedback freuen :-)