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

CSS CSS Basics (2014) Getting Started with CSS Importing Style Sheets with @import

Posted by Jeya Uma Kalimuthu
Jeya Uma Kalimuthu
2,444 Points

when we can use @import in browser cache? Could you please explain in brief?

We can use @import while linking external style sheet, when we can use for browser cache?

2 Answers

Frans de Haan
Frans de Haan
5,193 Points
Frans de Haan
Frans de Haan
5,193 Points

It's meant to split a css file in more different files. You can use it in your stylesheet to refer other stylesheets. But in my opinion it's not a good idea.

Andre Kucharzyk
Andre Kucharzyk
4,479 Points
Andre Kucharzyk
Andre Kucharzyk
4,479 Points

But instead of doing it you could do it like that:

<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style2.css">

So whats the point?

Andrew Lim
Andrew Lim
8,004 Points
Andrew Lim
Andrew Lim
8,004 Points

There are may ways to include css into your page. Both of the link and @import ways are valid. But @import is mainly used for maintenance purposes (especially for larger sites).

An example of why you may want to use @import is if you have a lot of pages for your site and you like to compartmentalise the different areas of stylesheets. In this sense you may have one 'main' stylesheet and then have imported stylesheets, for example the normalisation could have its own stylesheet, typography, layout, color schemes all may have their own as well.

Some advantages are:

  • sometimes css files can get very long, this reduces the size and easier to maintain.
  • you may want to swap out one style sheet for another (e.g. all your web pages may use a different layout) and changing the import is a lot easier than searching and editing an entire CSS file
  • could allow for very quick experimentation, e.g. swapping out an imported stylesheet and see if it works before committing to it.