@import vs linking styles in css

[CodeGirl79]

Hello my seasoned CSS friends! I am new to learning how to code. As we quickly brushed over it in school I decided to take it upon myself to learn html and CSS like the back of my hand. I want to learn it the right way. I’m reading a book Beginning CSS Web Development -Simon Collison and it talks about the different ways to use CSS in your HTML document. One of which is a little confusing to me… @import.

Could someone tell me more about @import vs linking in css. I researched other articles online and have found this to be a sliding subject of preference. Which is better to use? Should you use both at the same time (is that even possible)? Please educate me on this topic.

Thanks-

[georgearnall]

I may not be correct here but I am sure I read somewhere that it is better to use because it can download them at the same time whereas @import is one after another.

However, in reality you should really just concatenate, compress and use one file.

[rkieru]

However, in reality you should really just concatenate, compress and use one file.

This.

For the purposes of development I tend to rely @import for the simple ease of being able to break CSS into smaller component files so that it’s just that much easier to work with and bug test. For production you’re much better off combining them into a single CSS file.

As georgearnall mentioned though; if you ARE going to use one of these in a live site the preferred method is <link> because it allows for multiple HTTP requests to be made whereas the @import method does not.

[CodeGirl79]

Thank you both for your input on this topic. Your information was helpful. Thanks-

[Author]

Posts