Difference between @import and link in CSS

by

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.

More Related Contents:

  1. Remove blue underline from link
  2. How to make button look like a link?
  3. @import vs link
  4. import .css file into .less file
  5. @import in @if statement in Sass
  6. Next.js Global CSS cannot be imported from files other than your Custom
  7. Need to remove href values when printing in Chrome
  8. Why put in front of the file name “_” or “_” in scss/css?
  9. CSS – style a link based on its “rel” attribute?
  10. @import styles not working in a media query
  11. How to keep :active css style after clicking an element
  12. How to make attractive button using CSS
  13. How to create one vertical column in between rows in Flexbox [closed]
  14. How to apply a CSS filter to a background image
  15. Why is a flex item limited to parent size?
  16. Transparent text cut out of background
  17. Remove blue border from css custom-styled button in Chrome
  18. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  19. Should I avoid using !important in CSS?
  20. Font Awesome not working, icons showing as squares
  21. Right to Left support for Twitter Bootstrap 3
  22. What does the dot mean in CSS?
  23. Hidden scrollbars in Firefox (allows scrolling but just no scrollbar)
  24. Can we use any other TAG inside along with ? [duplicate]
  25. Why adding version number to CSS file path?
  26. Can I define a class name on paragraph using Markdown?
  27. up/down arrow key issue with typeahead control (angular bootstrap UI)
  28. chrome : how to turn off user agent stylesheet settings?
  29. How can I delay the start of a CSS animation?
  30. grid-area does not seem to work with the attr function, is this by design?

Leave a Comment