Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Import URL in CSS useless?

Do we really need to use this when at the beginning of stylesheets? Because when you use the link rel for HTML it should already know the name of the stylesheet right?

@import url(../CSS/style.css);

3 Answers

Michael Soileau
Michael Soileau
16,199 Points

There's three reasons you don't want to do it in your HTML file.

First, if you use the include directive, you added an extra GET request to your html. The hit isn't that bad on a desktop, but for slower mobile connections, it can be a problem.

Second, will be non-cachable. External links can be cached making subsequent page visits that use the same assets faster. CSS directly embedded will not be cached and your HTML file size will be larger for each page.

Third, your css being embedded means it will both overwrite your external css in priority. If you are mixing both embedded and external CSS , not knowing the priority order will make it a problem when you change a CSS rule in an external sheet and don't see the change get reflected. You'll have to use the hacky !important css rule.

There is a time to use @import though if you switch to using a CSS preprocessor like Sass. Sass will let you keep your stylesheets separate, (which is important if you have to work on a large website), and then combine them into one file when they are needed for processing. It cuts down on requests and makes the code more maintainable.

yes you don't need to import in css if you have already done in html. Btw its a bad practice to use @import url(); because your web-page will do additional http request that make your site load little slow.

wait for more best answers from experts with additional links good luck.

Thanks so much! I was really wondering about that, going to delete from CSS now.