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>@import url(Path To stylesheet.css)</style>
Use of Link
<link rel="stylesheet" href="Path To stylesheet.css">
In theory, the only difference between them is that
@importis 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 @importAlso, using the
<link>tag allows you to define “preferred” and alternate stylesheets. You can’t do that with@import.