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

Prath M
Prath M
9,631 Points

In general, is it best to just use one style sheet?

I can't see the benefit of ever using an import statement. Wouldn't it be best, for load-time, to just always use one style sheet?

Also, which takes a larger toll on site performance: import statements or linking to more than one style sheet?

2 Answers

Gunhoo Yoon
Gunhoo Yoon
5,027 Points

Regular CSS import rule is pretty bad because it makes request every now and then. That's why you would probably need CSS pre-processor like SASS.

SASS has special import behavior for its own file extension which doesn't make request but just try to combine them in a compile time. It also has caching which further increase the import performance once it has been compiled. This way you can still use one stylesheet and import different part of components. SASS import.

Here's simple abstraction from SASS site

CSS has an import option that lets you split your CSS into smaller, more maintainable portions. 

The only drawback is that each time you use @import in CSS it creates another HTTP request. 

Sass builds on top of the current CSS @import but instead of requiring an HTTP request, 

Sass will take the file that you want to import and combine it with 

the file you're importing into so you can serve a single CSS file to the web browser.

So in a nutshell, regular CSS import rule is evil because of extra request made to server that impacts the performance but SASS tries to resolve that.

This is not from my experience and I'm just relying on piece of information from SASS documentation and other google search results, so be aware.

Avoid regular CSS import behavior as best as possible.

gregory gordon
seal-mask
.a{fill-rule:evenodd;}techdegree
gregory gordon
Full Stack JavaScript Techdegree Student 14,652 Points

i have thought the same thing but i think for big projects it is just easier to keep everything sorted and neat for editing in the future.