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
Jim Dennis
13,075 Points@import normalize.css --- best practice?
Would it fair to described @import normalize.css at the top of a site's main.css to be a "best practice?"
Should the rest of the Treehouse videos covering normalize.css be updated to include this?
5 Answers
Jason Anders
Treehouse Moderator 145,858 PointsHey Jim,
Actually using @import is not a good way to include any style sheets. Unless it is absolutely necessary (i.e. one stylesheet has a direct dependency on another, which is rare by the way), you should always 'include' your CSS files in the HTML.
Using @import has a significant impact on Site Speed as the CSS files often will not load concurrently.
For more info, you can read this thread on Stackoverflow, or this post at stevesouders.com
Keep Coding! :)
Sarah Thomas
4,190 PointsAs a related question: I'm working on my first website and I'm up to about 30 pages. I'm still experimenting with fonts (using google fonts) and @import would make it convenient to make the change in one place rather than 30. Is there a clever way to do this or do I just need to update all 30 places when I'm happy with my final choice?
Thanks!
Kevin Korte
28,148 Points30 css files? That's probably too many, unless you're running a large site. Even then, that's a lot of http requests to pull all of those in.
@import would be fine while you're experimenting on getting your site right. If it adds an extra 2-3 seconds to your load time in dev mode, that's ok if it's ok to you. But by production time it should be cleaned up.
Here is what I do:
When I find a font I want from google fonts, I go to the font's URL in my browser. Take for example this font: https://fonts.googleapis.com/css?family=Open+Sans
I go there, and than copy and paste the css code into a single fonts.css file. That way everything stays in one predictable place.
Sarah Thomas
4,190 PointsHi Kevin - sorry I meant I have about 30 html pages that have independent css links to google fonts. So if I make a font change I have to update it in 30 places rather than 1.
For example:
<link href='https://fonts.googleapis.com/css?family=Raleway|Neucha|Loved+by+the+King' rel='stylesheet' type='text/css'>
Kevin Korte
28,148 PointsGottcha, yeah, that's enough to drive you crazy.
You can do it like I showed, so all you have is a simple fonts.css file linked to all pages, and than you just import the google fonts through that one file, or you can import if it makes your life easier. It' almost doesn't matter at this point. (It does matter, but your sanity matters more.)
How you're building sites is temporary in structure. It's how I started too, but you'll soon enough get into where everything will be in one place, and you'll dynamically bring in the data you need, when you need it, so you're not linking the same stylesheets 30 times over.
Kevin Korte
28,148 PointsI agree with Jason. @import creates some performance issues it's generally not a good way to include a stylesheet
Jeremy Castanza
12,081 PointsSarah, I would start looking into WordPress development for where you're at. It'll be weird at first, but the beauty of it is that it solves a lot of these issues by having a single header file that loads for all 30 of your pages. In terms of maintenance, it gives you the solution that you're looking for as far as being able to update a single link element rather than having to update 30 pages individually.