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

Matthew Francis
Matthew Francis
6,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

https://stackoverflow.com/questions/7199364/import-vs-link/7199377

1 Answer

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front 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.

Matthew Francis
Matthew Francis
6,967 Points

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.

Dosen'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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,696 Points

If 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.