Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ross Horak
20,890 PointsWhen to use @import and why?
I am going through the basic CSS course, and just finished the 'importing stylesheets with @import' video lesson.
My question is this. Under what circumstances would it be beneficial to use the @import function? When would you actually ever need to use it?
What is the difference between:
Importing a stylesheet using @import in the 'head' section between the 'style' elements in your html document VS using link rel="stylesheet" href="style.css" ?
Importing styles from stylesheet x.css into stylesheet y.css and using stylesheet y.css for all styling VS just linking to both stylesheet x.css and y.css using the link tag?
What is optimal and standard? One thing to consider I suppose would be server requests. Anything else...
3 Answers
bleedcmyk
5,945 PointsGenerally you dont want to use @import because they are not downloaded concurrently. This reduces throughput and creates a bottleneck. (Even though the files are really small and its generally inconsequential for small sites on fast servers with good bandwidth.)
@import is a good use for web-fonts, and is a way of keeping your CSS files more modular (Although like you pointed out, it really isnt different than direct linking them from the HTML head).
Its also possible to build stylesheets that depend on one another, and make @import important. This can happen with multiple themes for the same HTML markup that are perhaps swapped on a click event.
If you're hand-coding all of your url pointers, it can also be easier to use @import over keeping track of multiple file hierarchy levels of folders for multiple stylesheets as well.
In general though, probably not worth it even though it doesnt really matter for most front end dev's.
Paul K.
12,110 PointsGreat answer..and resource. I was wondering about the same thing.
Carlo Antonio Bilbao
24,113 PointsGreat question. I was just thinking the same thing during the video.
Ross Horak
20,890 PointsRoss Horak
20,890 PointsGreat answer, thanks a lot. I subsequently also researched it on stack exchange which reiterates exactly what you have said above: http://stackoverflow.com/questions/7199364/import-vs-link