Gibt es Gründe, die CSS-Regel "@import" noch zu verwenden?

Question

Ich bin kürzlich auf eine Verwendung der @ import-Regel auf Coda.com gestoßen. Sie benutzen tatsächlich die Hauptstylesheet für den Standort zu importieren, speziell das Format:

<style type="text/css" media="screen"> 
    @import url(./coda.css); 
</style> 

die die Regeln von Netscape 3 und IE 3 und 4. Da eine Web-Entwicklungs-Tool primäre Zielgruppe verstecken verwenden werden moderne Browser, welche anderen Gründe würde es geben, dies statt eines Links zu verwenden?

Answer 1

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, z. B. zum einfachen 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.

Natürlich, in einer Produktionsumgebung ist die Verwendung einer Reihe von @import Aussagen verpönt, weil es die Anzahl der Dateien erhöht, die ein Web-Browser herunterziehen muss.

Answer 2

Keine. Mit einem <link> Element hat auch den Vorteil, die FOUC loszuwerden.

EDIT: Mit @import in einem anderen Sheet (.css-Datei) kann wie ein #include in C verwendet werden, aber es gibt keinen Grund @importin einen <style> Block zu verwenden.

Answer 3

Der einzige Grund, diese Regel heute zu verwenden, besteht darin, Ihr CSS modularer zu machen, indem Sie es in verschiedene Dateien wie Bibliotheken aufteilen.

So, während Ihre Seite ein Stylesheet verknüpfen könnte, kann man erkennen, Sheet andere Sheets für Reset, Typographie @import usw.

Allerdings bedeutet dies das Laden der Seite verlangsamen, da es Anfragen nur mehr sequentielle http ist .

Answer 4

Ich stimme Andrew zu. Ich verwende auch Importe, um meine CSS logisch zu trennen. Persönlich teile ich sie gerne in 4: reset, Struktur, Typografie, allgemein (bgs/Grenzen usw.)

Je nach der Person, die es tun, ihren Stil und Präferenz können CSS-Dateien auch nach Seitenabschnitt z header.css, footer.css usw.

Eine zusätzliche Sache, die ich jedoch vermeide, um die mehreren HTTP-Anfragen zu vermeiden, ist ein Build-Prozess, der die CSS-Dateien für die Live-Bereitstellung zusammenführt (in der Reihenfolge des Imports).

hoffte, das hilft

Answer 5

Ich benutze eine modulare Entwicklung selbst nähern, und oft mit 10+ einzelnen CSS-Dateien enden. Wie Sie wissen, ist das eine ziemlich drastische Anzahl von HTTP-Anfragen, deshalb verwende ich gerne 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 richtigen Regeln für die richtigen Gerätetypen verwendet werden.