Omar Abid Omar Abid - 3 months ago 11
CSS Question

Difference between @import and link in CSS

I'm learning some CSS to tweak my project template. I come to this problem and didn't find a clear answer on the web. Is there a difference between using @import or link in CSS?

Use of @import

<style type="text/css">@import url(Path To stylesheet.css)</style>


Use of Link

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


What's the best way to do it? and why?
Thanks!

Edit: There is some thoughts here

Answer

In theory, the only difference between them is that @import is the CSS mechanism to include a style sheet and <link> the HTML mechanism. However, browsers handle them differently, giving <link> a clear advantage in terms of performance.

Steve Souders wrote an extensive blog post comparing the impact of both <link> and @import (and all sorts of combinations of them) called "don’t use @import". That title pretty much speaks for itself.

Yahoo! also mentions it as one of their performance best practices (co-authored by Steve Souders): Choose <link> over @import

Also, using the <link> tag allows you to define "preferred" and alternate stylesheets. You can't do that with @import.