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

Jim Dennis
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
MOD
Jason Anders
Treehouse Moderator 145,860 Points

Hey 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
Sarah Thomas
4,190 Points

As 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
Kevin Korte
28,149 Points

30 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
Sarah Thomas
4,190 Points

Hi 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
Kevin Korte
28,149 Points

Gottcha, 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
Kevin Korte
28,149 Points

I agree with Jason. @import creates some performance issues it's generally not a good way to include a stylesheet

Jeremy Castanza
Jeremy Castanza
12,081 Points

Sarah, 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.