Why is it better to have stylesheets external than internal? Apart from reuse

Question

I've been writing some css for a page as an intern, and I put the css in the header of the page. Instead of putting it in the sites main css file. One huge file. The page has a lot of unique styles compared to the rest of the site. I got an email from the external contractor where I work. Asking that the styles be moved into the main file. Is there any particular reason that I should do this. I don't mind moving it into an external css file other than the main file. I can't really see why this is as he said "standard best practice".

As far as I know the only difference is that external can be re used and i'd like to stick to my guns. But at the same time i'm keen to go with what this guy thinks, because he's more experienced.

If anybody can explain to me why using external stylesheets is best practice. I very rarely see internal stylesheets on sites so I guess there must be some logic to this.

Thanks!

Answer 1

In some cases, your page is going to have dynamic content. Because of that, it cannot be cached. By adding the css to the header, you are increasing that amount of bandwidth that must be used. Having a separate stylesheet can reduce bandwidth consumption through caching.

Also, stylesheets can be loaded in parallel, so external stylesheets can speed up page loads.

Answer 2

Many pages reuse the same CSS. Therefore the browser can cache the external stylesheet and reuse it on every page, which will result in lower overhead and faster page loads.

If the global CSS is inline, it's being loaded for every page and that's a lot of overhead and unnecessary lifting for the connection and browser.

However, there are good arguments for inlining some of your CSS, what you could classify as "critical" CSS. External CSS stylesheets are render-blocking, so it won't apply your styles until all of the CSS has been downloaded. For large, global external CSS files, you'll sometimes notice a delay before the browser applies the styles (also known as FOUT [Flash of Unstyled Text]). A proposed solution is to inline the critical CSS that's visible above the fold so those styles are applied quickly. Then allow the browser to apply the rest of the CSS when the page is ready.

FOUT is much more noticeable on mobile connections and in this day-and-age where mobile traffic increases daily, it's important to consider these practices to improve the mobile experience.

Addy Osmani wrote a great article "Detecting Critical CSS For Above-the-Fold" that'll give you a better understanding of the practice and its benefits: http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/

Answer 3

In addition to Franz's answer, separation of structure, logic, and display code is a best practice. It's the driving force behind MVC - it makes for much more maintainable code.

Answer 4

To format a web page or the theme for a blog there are 3 types of stylesheets available for you to use: External Stylesheet: An external stylesheet is a separate file with all your styles in it. You link to it in the head section of your web page coding.

<link rel="stylesheet" type="text/css" href="styles/stylesht.css">

This makes it easy to find all your stylesheets if you have multiple ones. Also, you can put an instruction in your robot.txt file instructing the search engine bots to stay out of the folder and not add these to their database.

---

Internal Stylesheet : An internal stylesheet is added to the head of the page.

<style type="text/css">
Your style types
</style>

Styles inside the internal stylesheet are only applied to the page they are actually coded into. You see this quite often. A template is made with an internal stylesheet and as you recylce the template the style coding is inserted into each page's head section. Some Wordpress plugins will do this too instead of inserting a link to an external stylesheet just for the plugin.

---

Inline Style : An inline style is applied to an HTML element.

<p style="color: #636954;">My sentence.</p>

This inline style changes the colour of my text to a green: