Ich bin kürzlich auf eine Verwendung der @ import-Regel auf Coda.com gestoßen. Sie verwenden tatsächlich das Haupt-Stylesheet für die Site, insbesondere das Format:
%Vor%Was verbirgt die Regeln von Netscape 3 und IE 3 und 4. Da ein primäres Publikum der Web-Entwicklungs-Tools moderne Browser verwenden wird, welche anderen Gründe würde es geben, dies anstelle eines Links zu verwenden?
Für Codas Seite würde ich mir vorstellen, dass sie das eher aus Gewohnheit als aus technischer Notwendigkeit heraus taten.
@import -Anweisungen in tatsächlichen CSS-Dateien (nicht in einem <style> -Element in HTML) dienen vielen Zwecken, wie zum Beispiel das einfache Ein- und Auslagern anderer CSS-Dateien. Das Blueprint-CSS-Framework ermöglicht Ihnen das einfache Entfernen bestimmter Teile des Frameworks, z. B. die Typografie oder das Grid-Zeug.
In einer Produktionsumgebung ist es natürlich verpönt, einige @import -Anweisungen zu verwenden, da dies die Anzahl der Dateien erhöht, die ein Webbrowser aufrufen muss.
Keine. Die Verwendung eines <link> -Elements hat auch den Vorteil, den FOUC loszuwerden.
BEARBEITEN : Die Verwendung von @import in einem anderen Stylesheet ( .css file) kann wie ein #include in C verwendet werden, aber es gibt keinen Grund, @import in a <style> block.
Der einzige Grund, diese Regel heute zu verwenden, besteht darin, Ihr CSS modularer zu gestalten, indem Sie es in verschiedene Dateien wie Bibliotheken aufteilen.
So, während Ihre Seite mit einem Stylesheet verknüpft ist, kann das Stylesheet andere Stylesheets für Reset, Typografie usw. importieren.
Dies verlangsamt jedoch das Laden Ihrer Seite, da es nur mehr sequentielle HTTP-Anfragen sind.
Ich stimme Andrew zu. Ich verwende auch Importe, um meine CSS logisch zu trennen. Persönlich teile ich sie gerne in 4 auf: reset, structure, typography, general (bgs / border etc)
Abhängig von der Person, deren Stil und Präferenz, können CSS-Dateien auch nach Seitenbereichen aufgeteilt werden, zB header.css, footer.css etc.
Eine zusätzliche Sache, die ich tue, um die mehreren HTTP-Anfragen zu vermeiden, ist ein Build-Prozess, der (in der Reihenfolge des Imports) die CSS-Dateien für die Live-Bereitstellung zusammenführt und komprimiert.
Hoffe das hilft
Ich verwende selbst einen modularen Entwicklungsansatz und habe oft mehr als 10 individuelle CSS-Dateien. Wie Sie wissen, ist das eine ziemlich drastische Anzahl von HTTP-Anfragen, daher verwende ich Blender .
Blender ist ein Rubygem, das eine beliebige Anzahl von CSS-Dateien zu einem einzigen Stylesheet konsolidiert und verkleinert. Es funktioniert auch für JavaScript.
Sie können @media in Ihren individuellen Stylesheets so definieren, dass nur die entsprechenden Regeln für die richtigen Gerätetypen verwendet werden.
Tags und Links css web-standards