6

Possible Duplicate:
Difference between @import and link in CSS

I've read about CSS @import as a bad practice, and was wondering about the methods I'm using.

I'm currently building a website using WordPress, which imports each plugin's stylesheets by link references, and the main stylesheet is linked in the same manner, however, the main stylesheet currently contains several @import declarations, which I believe I should be moving into the header or into the appropriate pages that they're used in (having two of them are only used on certain pages).

Are my concerns justified, and what are the implications of using those @import declarations?

Community
  • 1
  • 1
Jack
  • 603
  • 1
  • 6
  • 14

4 Answers4

4

The web provides a lot of information about this topic, I suggest reading:

Community
  • 1
  • 1
poitroae
  • 20,146
  • 9
  • 56
  • 77
  • 1
    I see, thanks. I thought the information was a bit out-dated, but apparently one of those topics states the different. – Jack Jul 29 '12 at 13:35
  • 1
    While this may theoretically answer the question, [it would be preferable](http://meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Bill the Lizard Jul 29 '12 at 14:22
3

I think you should use LINK for simplicity—you have to remember to put @import at the top of the style block or else it won’t work. It turns out that avoiding @import is better for performance.

link

  • Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet.

import

  • Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet.

The most common reason given for using @import instead is because older browsers didn't recognize @import, so you could hide styles from them.

This link will solve your all queries

What's the Difference Between @import and link for CSS?

Prashobh
  • 8,281
  • 14
  • 54
  • 87
  • 1
    Hm, so if say I have two boxes that are at the bottom of the page and there is 99.99% chance that they won't be even glanced at within the next five minutes, @import sounds like a good idea to load them later, as the rest of the page would load BEFORE those two styles? I.e. other stuff would be downloaded before it, which is what the user would be looking at. – Jack Jul 29 '12 at 14:21
2

Using the import rule is not bad practice in itself. You just have to keep in mind that imports are only handled after the file including them has been downloaded. So if you have a bunch of files with these statements it can take rather long for your audience to see the css applied.

Each @import statement creates a new http request since it happens client side. So from this perspective you are hurting visitors with slow connections like mobile visitors on Edge or 3G.

A rule of thumb I hear a lot is to merge all CSS that you need instantly and only use @import for things you need later on.

Torsten Walter
  • 5,312
  • 21
  • 25
  • Actually I wonder, some users land directly on those pages, so I shouldn't use @import at all, as in some cases, those styles are needed instantly. – Jack Jul 29 '12 at 13:37
  • As I said, it comes down to your specific needs. If you need styles instantly its better to link them where you need them. – Torsten Walter Jul 29 '12 at 13:39
1

It is best to NOT use @import to include CSS in a page for speed reasons.

importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. Older browsers didn't recognize @import, so you could hide styles from them, It is the reason for @import.

check this:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
css @import

Community
  • 1
  • 1
RAN
  • 1,413
  • 3
  • 19
  • 30