Es gibt diverse Methoden, CSS einzubinden. Bei mehreren Dateien scheiden sich oft die Geister: Einbinden via link, als @import in der CSS-Datei oder als Mix im HTML-Dokument.

link

So wie man es kennt, untereinander, im HTML-Code sichtbar.

<link rel="stylesheet" href="styles.css" />

@import

Sowohl im HTML-Code als auch in CSS-Dateien einsetzbar. Oft eingesetzt bei Frameworks wie Blueprint (reset.css, typo.css etc.).

<style> 
@import url('styles.css'); 
@import url('nochmehrstyles.css'); 
</style>

link und @import

Gibt auch Leute, die sowas machen.

<link rel="stylesheet" href="styles.css" />
<style>
@import url('nochmehrstyles.css'); 
</style>

Ich persönlich war noch nie ein Freund der @import-Regel. Erstens ist das kein wirkliches Kombinieren mehrerer Dateien, da sie nirgends gecacht werden, sondern nur in einer Datei alle importiert werden und zweitens sind nicht alle Browser vor dem CSS-Gott gleich. Das gilt auch für diese Regel. Also binde ich mehrere Dateien immernoch oldschool einzeln in den Head, kombiniere sie ggf. mit Javascript und PHP oder was es sonst noch dafür gibt.

Direkter Vergleich

In einem schon älteren Artikel von Steve Souders mit der wohlklingenden Headline “don’t use @import” wird meine Methode nun bestätigt: @import räumt zwar optisch auf, ist aber langsamer, als das gute alte link.

Warum? Es ist ganz einfach: Die link-Regel verhindert das parallele Laden der Stylesheets. Während normal eingebundene CSS-Dateien parallel geladen werden, kommen alle importierten Styles erst dran, wenn die anderen fertig sind. Wer sich an die Regeln hält, darf auch als erstes laden, quasi.

Die Unterschiede lassen sich in Sekunden fest machen, wobei schon bei wenigen Dateien Unterschiede von 2 Sekunden und mehr ins Gewicht fallen. Dabei muss man berücksichtigen, dass Javascript erst nach den Styles geladen werden. Daher ist ein paralleles Laden der Styles absolut zu empfehlen. Interessant hierbei ist auch das Problem mit dem Internet Explorer:

The second problem is that IE changes the download order. I added a 10 second script (the really long bar) at the very bottom of the page. In all other browsers, the @import stylesheets get downloaded first, and the script is last, exactly the order specified. In IE, however, the script gets inserted before the @import stylesheets

Kombiniere!

Sollte man größere Projekte realisieren, die eine Performance voraussetzen, dann empfiehlt sich eh das Kombinieren von CSS und Javascript, da die Dateien dann auf dem Server gecached (kann man das eigentlich richtig schreiben?) werden. Ganz gut ist da u.a. dieses Skript. Wenn diese Dateien dann auf einem statischen Server abgelegt werden, braucht man über import eh nicht mehr nachzudenken.

Bei kleinen und mittelgroße Projekten, langsamen Servern oder laggen Verbindungen sollte man also weiterhin die altbewährte link-Methode anwenden. Auch wenn das nicht so cool aussieht, wie zehn @imports in einer CSS-Datei, die man sich dann mühsam zusammen pulen darf, wenn man Bugs anderer Entwickler fixen muss.