Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have always been taught to have all of the CSS in a separate file that is referenced from the head of the page. Reading this article, the author is talking about making the Guardian website responsive. One of the things he notes they did to make the site faster and more resilient is to add the CSS inline into the header, thus reducing HTTP requests.

Now this got me thinking about the right/best/fastest way of using the CSS

If you have one main CSS file, its going to be called and read by the site on every page, no mater how big it is. So with that in mind, I'm actually starting to think its better to just inline the whole style sheet and remove one HTTP roundtrip.

I know for the purposes of neatness and being able to edit the file a separate file is better.

But which would you recommend and which do you think is faster?

share|improve this question

2 Answers 2

up vote 2 down vote accepted

Without actually reading their article I can say their logic is flawed. CSS files are requested once and than cached by the browser (unless you intentionally block this behavior). The result is only one extra HTTP request to get the CSS file (which should be fast if you are compressing your content). Then all of the other pages load faster because the client doesn't have to download all of that CSS over and over again.

share|improve this answer
2  
Yep to extend on Johns answer, basically imagine you had hundreds of lines of CSS code inline with in header of your site and this information alone weighed in at 10KB... now the problem arises is when the user navigates to another page, they will need to download the same 10KB twice on PageB because its not cached. While using a CSS file going from pageA to pageB you would not download the file again saving bandwidth and render time. –  bybe Sep 20 '13 at 22:01
    
+1 Caching can benefit all your pages. Instead you could use a CSS compressor like this one, or add gzip to compress everything. –  dan Sep 21 '13 at 4:35
    
Brilliant. I never thought about the second page issues so thanks for setting me straight. –  David Knight Sep 21 '13 at 15:20
    
It should be noted there are occasions when putting some CSS inline is beneficial - for example if the rules apply only to that page and will not be used anywhere else. –  DisgruntledGoat Sep 22 '13 at 14:23

For best practices, external CSS is good but if you have both inline and external CSS applied to a same page then inline CSS will get the priority. The priority of CSS is as following:

  1. inline CSS
  2. CSS in header
  3. external CSS
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.