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 trialGoldSpec Digital
4,185 Points@import style sheets
Instead of using @import to import various different style sheets, why not just have several different CSS files (fonts.css background.css colors.css) and link these in your head?
<head> <link a href="/fonts.css"> <link a href="/background.css"> <link a href="/colors.css">
</head>
2 Answers
Jennifer Nordell
Treehouse TeacherHi there! Yes, you could totally do that and it would still be the same number of HTTP requests. So in that regard, it's exactly the same.
But the real thing to take away here is efficiency for you, the developer and maintainer of that site. Your site might have 3 pages and that would mean you would need to update the <head>
on each page if you needed to remove a style sheet or add one. That would likely be manageable.
But what happens if your site has 25 pages... or even 100? Do you really want to retype all those by hand or would it be simpler just to import them into your current stylesheet? Personally, my vote is for the one style sheet link in the head.
Hope this helps!
Ray Karyshyn
13,443 PointsHey Naomi,
Using the head
in your HTML documents to add CSS files is actually more preferable than using @import
in your CSS.
However, it is recommended to use @import
for adding web-fonts.
Check out this discussion for more info: https://stackoverflow.com/questions/7199364/import-vs-link/7199377
Jennifer Nordell
Treehouse TeacherHi Ray Karyshyn! I read that discussion (and a few others) about this issue, and yes, @import
blocks link
, but only in IE. I suppose it ultimately depends on how dedicated you are to supporting IE users and if that is a requirement.
Brian Miller
Courses Plus Student 6,696 PointsBrian Miller
Courses Plus Student 6,696 PointsThis is the bottom line take away! Great point.