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
jobbol
Full Stack JavaScript Techdegree Student 17,238 PointsIs there an alternative to @import for my CSS?
With @import
Don't use it, the video says.
Since import occurs within a css file, the browser must first load and parse the original file before it sees the imported one. This results in an unnecessary second trip.
Which causes it to load/parse in series like this:
html > linked css > @import css
So Nick went into the import file, copied it, and pasted it straight into the original.
Alternatively
In a situation like this, I would want to keep my files separate because it will help maintain readability.
My question is, why can't we just keep both files and link the other directly from the html?
This would create parallel requests instead of a series:
html > both linked css
2 Answers
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsYou can do that, but it creates another request so it is still not ideal.
You kind of have to take the good with the bad. How important is it for you to minimize the number of requests being made? If it is super important, or if you just happen to highly value frontend performance, then you'd do best to take Nick's advice. If you think you could get away with that extra request, then go ahead and link a separate css file.
I think the best thing to do is learn to write CSS that is readable. If you have already gotten into SASS, I'd recommend checking out the course "Modular CSS with SASS".
Roy Penrod
19,810 PointsHey, Josh.
Most developers some form of CSS pre-processor like Sass or LESS to create partial CSS files to help them stay organized, then use an automated process to join the partial CSS files together into a single file. That way you get the best of both worlds.