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.
Matthew Francis6,967 Points
Best practice in using the amount of style sheets
So the best answer for this SO post said that @import is inefficient and should be avoided. <link> is much a better option. He also said that we should only use one style sheet? is he referring one style sheet per page/html file? or making a huge stylesheet and link that to every page/html file? Wouldn't that essentially force you to id/class everything? making it harder to "generalize" an element, if that makes sense
Brendan WhitingFront End Web Development Techdegree Graduate 84,696 Points
I'm not sure why that would force you to id/class everything, can you clarify?
If you have a stylesheet that includes @import to another stylesheet, the browser isn't going to even know about the 2nd stylesheet until it reads the first one, and finds out that it needs to fetch a different one. So this means there's a delay in getting the 2nd stylesheet. If you use <link> in the html, the browser immediately sees all the things it needs to get in the html from the link tags in the header and fetches them right away.
Even better is to just use one stylesheet. The fewer http requests the better. If you consolidate everything into one stylesheet, it improves performance. But it's not fun as a developer to manage everything in one giant stylesheet. So this is one advantage of using SCSS (among others). When you use @import in scss, it bundles everything up into one stylesheet when it transpiles it. So you get the benefit of being able to work in separate files, but also the browser only has to load one stylesheet. There's a SO article here about that.