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
Matthew Francis
6,967 PointsBest 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
https://stackoverflow.com/questions/7199364/import-vs-link/7199377
1 Answer
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsI'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.
Matthew Francis
6,967 PointsMatthew Francis
6,967 PointsDosen't the browser read the html file from top to bottom, so it would read the first <link> first? and then the next one? so would it be valid to say there's also a delay like @import? So SCSS is basically the standard practice nowadays? is there a video/workshop about it here>
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsBrendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsIf I have two link tags in my html, the browser is going to read the 2nd one a fraction after the first one. It's a tiny amount of time. Both requests for both style sheets are going to be fired off basically at the same time, concurrently. What takes longer is getting the file back from the http request. If I have one stylesheet in a link, and another one in an @import, first the browser sees the link, it sends a request back to the server for that stylesheet, it gets that stylesheet and reads it and discovers it needs another stylesheet, so it sends a request to the server for that one. So the 2nd http request doesn't even start until the first one completes.