Beste Möglichkeit, CSS einzuschließen? Warum @import verwenden?

Grundsätzlich frage ich mich, welchen Vorteil / Zweck es hat @import, Stylesheets in ein vorhandenes Stylesheet zu importieren, anstatt nur ein weiteres hinzuzufügen ...

<link rel="stylesheet" type="text/css" href="" />

an den Kopf des Dokuments?

Unter dem Gesichtspunkt der Seitengeschwindigkeit @importsollte eine CSS-Datei fast nie verwendet werden, da dies verhindern kann, dass Stylesheets gleichzeitig heruntergeladen werden. Zum Beispiel, wenn Stylesheet A den Text enthält:

@import url("stylesheetB.css");

Dann wird der Download des zweiten Stylesheets möglicherweise erst gestartet, nachdem das erste Stylesheet heruntergeladen wurde. Wenn andererseits beide Stylesheets in <link>Elementen auf der Haupt-HTML-Seite referenziert sind , können beide gleichzeitig heruntergeladen werden. Wenn beide Stylesheets immer zusammen geladen werden, kann es auch hilfreich sein, sie einfach in einer einzigen Datei zu kombinieren.

Es gibt gelegentlich Situationen, in denen dies @importangemessen ist, aber sie sind im Allgemeinen die Ausnahme und nicht die Regel.

Ich werde Devil's Advocate spielen, weil ich es hasse, wenn die Leute zu sehr zustimmen.

1. Wenn Sie ein Stylesheet benötigen, das von einem anderen abhängt, verwenden Sie @import. Führen Sie die Optimierung in einem separaten Schritt durch.

Es gibt zwei Variablen, für die Sie zu einem bestimmten Zeitpunkt optimieren - die Leistung Ihres Codes und die Leistung des Entwicklers . In vielen, wenn nicht in den meisten Fällen ist es wichtiger , den Entwickler effizienter zu machen und erst dann den Code leistungsfähiger zu machen .

Wenn Sie ein Stylesheet haben, das von einem anderen abhängt , ist es am logischsten, es in zwei separate Dateien zu legen und @import zu verwenden. Das ist für die nächste Person, die sich den Code ansieht, am logischsten.

(Wann würde eine solche Abhängigkeit auftreten? Es ist meiner Meinung nach ziemlich selten - normalerweise reicht ein Stylesheet aus. Es gibt jedoch einige logische Stellen, an denen Dinge in verschiedene CSS-Dateien eingefügt werden können :)

• Theming: Wenn Sie unterschiedliche Farbschemata oder Themes für dieselbe Seite haben, teilen diese möglicherweise einige, aber nicht alle Komponenten.
• Unterkomponenten: Ein erfundenes Beispiel: Angenommen, Sie haben eine Restaurantseite mit einem Menü. Wenn sich das Menü stark vom Rest der Seite unterscheidet, ist es einfacher zu pflegen, wenn es sich in einer eigenen Datei befindet.

Normalerweise sind Stylesheets unabhängig, daher ist es sinnvoll, sie alle mit einzuschließen <link href>. Wenn es sich jedoch um eine abhängige Hierarchie handelt, sollten Sie das tun, was am logischsten ist.

Python verwendet den Import. C verwendet include; JavaScript hat erforderlich. CSS hat Import; Wenn Sie es brauchen, verwenden Sie es!

2. Wenn Sie den Punkt erreicht haben, an dem die Site skaliert werden muss, verketten Sie das gesamte CSS.

Mehrere CSS-Anfragen jeglicher Art - ob über Links oder über @imports - sind für Hochleistungswebsites eine schlechte Praxis . Sobald Sie an dem Punkt angelangt sind, an dem die Optimierung wichtig ist, sollte Ihr gesamtes CSS durch einen Minifier fließen. Cssmin kombiniert Importanweisungen. Wie @Brandon hervorhebt, hat grunt auch dafür mehrere Möglichkeiten. ( Siehe auch diese Frage ).

Sobald Sie sich in der minimierten Phase befinden, <link>ist es schneller, wie die Leute bereits betont haben. Verknüpfen Sie also höchstens ein paar Stylesheets und importieren Sie keine, wenn überhaupt möglich.

Bevor die Site jedoch den Produktionsmaßstab erreicht, ist es wichtiger, dass der Code organisiert und logisch ist, als dass er etwas schneller abläuft.

Aus @importGeschwindigkeitsgründen ist es am besten, CSS NICHT in eine Seite aufzunehmen. In diesem ausgezeichneten Artikel erfahren Sie, warum nicht: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Außerdem ist es oft schwieriger, CSS-Dateien zu minimieren und zu kombinieren, die über das @ import-Tag bereitgestellt werden, da Minify-Skripte die @ import-Zeilen nicht aus anderen CSS-Dateien "herausschälen" können. Wenn Sie sie als <Link-Tags einfügen, können Sie vorhandene Minify-PHP / Dotnet / Java-Module verwenden, um die Minimierung durchzuführen.

Also: verwenden <link />statt @import.

Mit der Link-Methode werden die Stylesheets parallel geladen (schneller und besser), und fast alle Browser unterstützen Link

Beim Importieren werden alle zusätzlichen CSS-Dateien einzeln (langsamer) geladen, und Sie erhalten möglicherweise Flash Of Unstyled Content

@Nebo Iznad Mišo Grgur

Im Folgenden finden Sie alle korrekten Möglichkeiten zur Verwendung von @import

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Es gibt keinen großen Unterschied zwischen dem Hinzufügen eines CSS-Stylesheets im Kopf und der Verwendung der Importfunktion. Die Verwendung @importwird im Allgemeinen zum Verketten von Stylesheets verwendet, damit diese leicht erweitert werden können. Es könnte verwendet werden, um verschiedene Farblayouts einfach auszutauschen, beispielsweise in Verbindung mit einigen allgemeinen CSS-Definitionen. Ich würde sagen, der Hauptvorteil / Zweck ist die Erweiterbarkeit.

Ich stimme dem Kommentar von xbonez auch darin zu, dass Portabilität und Wartbarkeit zusätzliche Vorteile sind.

Sie sind sehr ähnlich. Einige mögen argumentieren, dass @import besser zu warten ist. Jeder @ Import kostet Sie jedoch eine neue HTTP-Anfrage auf die gleiche Weise wie die Verwendung der "Link" -Methode. Im Kontext der Geschwindigkeit ist es also nicht schneller. Und wie "duskwuff" sagte, wird es nicht gleichzeitig geladen, was ein Nachteil ist.

Ein Ort, an dem ich @import verwende, ist, wenn ich zwei Versionen einer Seite mache, Englisch und Französisch. Ich werde meine Seite auf Englisch mit einer main.css erstellen. Wenn ich die französische Version ausbaue, werde ich auf ein französisches Stylesheet (main_fr.css) verlinken. Oben im französischen Stylesheet importiere ich die Datei main.css und definiere dann bestimmte Regeln für nur die Teile neu, die ich in der französischen Version anders benötige.

Zitiert von http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

Der Hauptzweck der @ import-Methode besteht darin, mehrere Stylesheets auf einer Seite zu verwenden, jedoch nur einen Link in Ihrem <Kopf>. Beispielsweise kann ein Unternehmen für jede Seite der Site ein globales Stylesheet haben, wobei Unterabschnitte zusätzliche Stile enthalten, die nur für diesen Unterabschnitt gelten. Durch Verknüpfen mit dem Stylesheet des Unterabschnitts und Importieren der globalen Stile oben in diesem Stylesheet müssen Sie kein gigantisches Stylesheet mit allen Stilen für die Site und jeden Unterabschnitt verwalten. Die einzige Voraussetzung ist, dass alle @ import-Regeln vor den restlichen Stilregeln stehen müssen. Und denken Sie daran, dass Vererbung immer noch ein Problem sein kann.

Manchmal muss man @import anstelle von Inline verwenden. Wenn Sie an einer komplexen Anwendung mit 32 oder mehr CSS-Dateien arbeiten und IE9 unterstützen müssen, haben Sie keine andere Wahl. IE9 ignoriert alle CSS-Dateien nach den ersten 31 und dies schließt CSS ein. Jedes Blatt kann jedoch 31 andere importieren.

Es gibt viele gute Gründe, @import zu verwenden.

Ein wichtiger Grund für die Verwendung von @import ist das browserübergreifende Design. Importierte Blätter sind im Allgemeinen vor vielen älteren Browsern verborgen, sodass Sie bestimmte Formatierungen für sehr alte Browser wie Netscape 4 oder ältere Serien, Internet Explorer 5.2 für Mac, Opera 6 und älter sowie IE 3 und 4 für PC anwenden können.

Zu diesem Zweck können Sie in Ihrer base.css-Datei Folgendes haben:

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

Wenden Sie in Ihrem importierten benutzerdefinierten Blatt (newerbrowsers.css) einfach den neueren Kaskadenstil an:

html body {
  font-size:1em;
}

Die Verwendung von "em" -Einheiten ist den "px" -Einheiten überlegen, da sich sowohl die Schriftarten als auch das Design basierend auf den Benutzereinstellungen dehnen können, während ältere Browser besser mit pixelbasierten Einheiten umgehen können (die starr sind und in den Benutzereinstellungen des Browsers nicht geändert werden können). . Das importierte Blatt wird von den meisten älteren Browsern nicht gesehen.

Sie können so, wen interessiert das? Wenn Sie versuchen, größere veraltete Regierungs- oder Unternehmenssysteme aufzusuchen, werden diese älteren Browser weiterhin verwendet. Aber es ist wirklich nur gutes Design, denn der Browser, den Sie heute lieben, wird auch eines Tages veraltet und veraltet sein. Wenn Sie CSS nur eingeschränkt verwenden, haben Sie jetzt eine noch größere und wachsende Gruppe von Benutzeragenten, die mit Ihrer Website nicht gut funktionieren.

Wenn Sie @import verwenden, erreicht Ihre browserübergreifende Website-Kompatibilität jetzt eine Sättigung von 99,9%, einfach weil so viele ältere Browser die importierten Blätter nicht lesen. Es garantiert, dass Sie einen einfachen Schriftsatz für das HTML anwenden, aber fortgeschrittenere CSS werden von neueren Agenten verwendet. Auf diese Weise können ältere Agenten auf Inhalte zugreifen, ohne die in neueren Desktop-Browsern erforderlichen visuellen Anzeigen zu beeinträchtigen.

Denken Sie daran, dass moderne Browser HTML-Strukturen und CSS nach dem ersten Aufruf einer Website sehr gut zwischenspeichern. Mehrere Anrufe an den Server sind nicht der Engpass, der es einmal war.

Megabyte und Megabyte an Javascript-APIs und JSON, die auf intelligente Geräte hochgeladen wurden, und schlecht gestaltete HTML-Markups, die zwischen den Seiten nicht konsistent sind, sind heute der Haupttreiber für langsames Rendern. Ihre durchschnittliche Google-Nachrichtenseite enthält mehr als 6 Megabyte ECMAScript, um nur ein kleines Stück Text zu rendern! LOL

Ein paar Kilobyte zwischengespeichertes CSS und konsistentes sauberes HTML mit kleineren Javascript-Footprints werden in einem Benutzeragenten blitzschnell gerendert, einfach weil der Browser sowohl konsistentes DOM-Markup als auch CSS zwischenspeichert, es sei denn, Sie möchten dies über Javascript-Zirkustricks manipulieren und ändern.

Ich denke, der Schlüssel dazu sind die beiden Gründe, warum Sie tatsächlich mehrere CSS-Stylesheets schreiben.

1. Sie schreiben mehrere Blätter, da für die verschiedenen Seiten Ihrer Website unterschiedliche CSS-Definitionen erforderlich sind. Oder zumindest erfordern nicht alle von ihnen alle CSS-Definitionen, die eine andere Seite benötigt. Sie teilen also die CSS-Dateien auf, um zu optimieren, welche Blätter auf den verschiedenen Seiten geladen werden, und um zu vermeiden, dass zu viele CSS-Definitionen geladen werden.
2. Der zweite Grund, der Ihnen in den Sinn kommt, ist, dass Ihr CSS so groß wird, dass es unhandlich wird, es zu handhaben. Um die Verwaltung der großen CSS-Datei zu vereinfachen, teilen Sie sie in mehrere CSS-Dateien auf.

Aus dem ersten Grund würde das zusätzliche <link>Tag gelten, da Sie so verschiedene CSS-Dateien für verschiedene Seiten laden können.

Aus dem zweiten Grund @importerscheint die Anweisung als die praktischste, da Sie mehrere CSS-Dateien erhalten, die geladenen Dateien jedoch immer gleich sind.

Aus Sicht der Ladezeit gibt es keinen Unterschied. Der Browser muss die getrennten CSS-Dateien unabhängig von ihrer Implementierung überprüfen und herunterladen.

Verwenden Sie @import in Ihrem CSS, wenn Sie ein CSS-RESET wie Eric Meyers Reset CSS v2.0 verwenden. Es erledigt also seine Aufgabe, bevor Sie Ihr CSS anwenden, um Konflikte zu vermeiden.

Ich denke, @import ist am nützlichsten, wenn Sie Code für mehrere Geräte schreiben. Fügen Sie eine bedingte Anweisung ein, um nur den Stil für das betreffende Gerät einzuschließen. Dann wird nur ein Blatt geladen. Sie können das Link-Tag weiterhin verwenden, um allgemeine Stilelemente hinzuzufügen.

Ich habe einen "hohen Höhepunkt" verknüpfter Stylesheets erlebt, die Sie hinzufügen können. Während das Hinzufügen einer beliebigen Anzahl von verknüpften Javascript für meinen kostenlosen Host-Anbieter kein Problem war, kam es nach dem Verdoppeln der Anzahl externer Stylesheets zu einem Absturz / einer Verlangsamung. Und das richtige Codebeispiel ist:

@import 'stylesheetB.css';

Ich finde es also nützlich, eine gute mentale Karte zu haben, wie Nitram erwähnte, während ich das Design noch hart codiere. Gute Fahrt. Und ich entschuldige mich für etwaige englische Grammatikfehler.

Es gibt fast keinen Grund, @import zu verwenden, da es jede einzelne importierte CSS-Datei separat lädt und Ihre Site erheblich verlangsamen kann. Wenn Sie an der optimalen Art und Weise interessiert sind, mit CSS umzugehen (wenn es um die Seitengeschwindigkeit geht), sollten Sie wie folgt mit Ihrem gesamten CSS-Code umgehen :

• Öffnen Sie alle Ihre CSS-Dateien und kopieren Sie den Code jeder einzelnen Datei
• Fügen Sie den gesamten Code zwischen einem einzelnen STYLE-Tag in den HTML-Header Ihrer Seite ein
• Verwenden Sie niemals CSS @import oder separate CSS-Dateien, um CSS bereitzustellen, es sei denn, Sie haben eine große Menge Code oder es besteht eine besondere Notwendigkeit.

Weitere Informationen finden Sie hier: http://www.giftofspeed.com/optimize-css-delivery/

Der Grund, warum das oben Genannte am besten funktioniert, liegt darin, dass der Browser weniger Anfragen bearbeitet und sofort mit dem Rendern des CSS beginnen kann, anstatt separate Dateien herunterzuladen.

Dies könnte einem PHP-Entwickler helfen. Mit den folgenden Funktionen werden Leerzeichen entfernt, Kommentare entfernt und alle Ihre CSS-Dateien verkettet. Fügen Sie es dann <style>vor dem Laden der Seite in ein Tag im Kopf ein.

Die folgende Funktion entfernt Kommentare und minimiert die übergebenen CSS. Es wird in Verbindung mit der nächsten Funktion gepaart.

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

Sie rufen diese Funktion im Kopf Ihres Dokuments auf.

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

Fügen Sie die Funktion concatenateCSS()in Ihren Dokumentenkopf ein. Übergeben Sie ein Array mit den Namen Ihrer Stylesheets mit dem Pfad IE : css/styles.css. Sie müssen die Erweiterung nicht hinzufügen, .cssda sie in der obigen Funktion automatisch hinzugefügt wird.

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>