Damit können Sie Ihre logische CSS-Datei auf mehrere physische Dateien verteilen. Hilft beispielsweise bei der Teamentwicklung. Auch nützlich, wenn Sie viele CSS-Dateien haben, die Sie nach funktionalen Bereichen (eine für Gitter, eine für Listen, etc.) trennen möchten, in derselben logischen Datei verfügbar zu haben.
Wie der Beantworter gesagt hat, können Sie Ihr CSS in mehrere Dateien aufteilen, während Sie nur eine Verknüpfung im Browser erstellen.
Das heißt, es ist immer noch verschwenderisch, mehrere CSS-Dateien auf stark frequentierten Webseiten herunterzuladen. Unser Build-Skript "kompiliert" unser CSS, wenn es im Release-Modus erstellt wird, indem es Folgendes ausführt:
@import -Anweisungen ist; Während der Kompilierung wird jede dieser Dateien durch das minimierte CSS dieser Datei ersetzt Somit haben wir in der Produktion eine einzelne, minimierte CSS-Datei, während wir im Entwicklungsmodus separate Dateien haben, um das Debuggen zu erleichtern.
Wenn Sie <link> s in Ihren HTML-Dateien verwenden, müssen alle diese Dateien alle CSS-Dateien verfolgen. Dies macht natürlich Änderungen und Ergänzungen (sowohl für CSS- als auch HTML-Dateien) schwieriger.
Mit @import reduzieren Sie eine theoretisch unendliche Anzahl von Änderungen auf eins.
@import ermöglicht Ihnen, ein erweiterbares Stylesheet zu haben, ohne den HTML-Code ändern zu müssen. Sie können link einmal zu Ihrem Hauptblatt hinzufügen und dann, wenn Sie zusätzliche Blätter hinzufügen oder entfernen möchten, ändert sich Ihr HTML nicht.
Außerdem helfen kleinere Dateien dem Browser, besser zu cachen. Wenn Sie einen Teil eines großen Blattes ändern, muss das gesamte Blatt für jeden Benutzer erneut heruntergeladen werden. Wenn die Stile in einigen wenigen Blättern in logische Bereiche unterteilt sind, muss nur die Datei heruntergeladen werden, die den geänderten Teil enthält. Das kostet natürlich zusätzliche HTTP-Anfragen.
Ein weiteres praktisches Bit, obwohl ziemlich veraltet, ist, dass Netscape 4 nicht mit @import umgehen kann, also ist es eine gute Möglichkeit, ein Stylesheet für NS4 zu verwenden und dann ein anderes Stylesheet für modernere Browser zu verwenden, das in Standards importiert wurde konforme Art und Weise.
@import ist CSS-Code. <link> ist HTML-Code. Wenn Sie also Stylesheets in andere Stylesheets einfügen möchten (oder wenn Sie HTML nicht ändern können), ist @import der richtige Weg.
Gemäß der CSS-Spezifikation müssen alle @import -Deklarationen vor beliebigen Stilregeln in Ihrem Stylesheet erscheinen. Mit anderen Worten, alle oben im Stylesheet
Alle @import -Deklarationen, die nach Stilregeln angezeigt werden, sollten ignoriert werden. Internet Explorer hat das nie respektiert; Ich glaube, dass andere Browser dies tun. Dies macht @import ein bisschen weniger nützlich, weil Regeln in einem Stylesheet, die importiert werden, durch Regeln gleicher Spezifität im importierenden Stylesheet überschrieben werden.
Sagen Sie, Sie arbeiten für Massive Dynamics, Corp .. Es hat eine Widgets-Abteilung. Die Abteilung Widgets verfügt über eine Buchhaltung. Konten sind unterteilt in Kreditorenbuchhaltung und Debitorenbuchhaltung.
Mit @include starten Sie die Website mit einem Top-Level-Stylesheet global.css , das für alles gilt.
Dann erstellen Sie ein zweites Stylesheet, widgets.css für die Widgets-Abteilung. Es enthält das globale und seine eigenen Stile (die bei Bedarf die globalen Stile wegen der Kaskade übersteuern können). Dann erstellen Sie eine dritte accounts.css für Accounts. Es enthält widgets.css , dh es enthält auch global.css . Schütten, spülen, wiederholen.
Tags und Links css