Should you leave normalize.css as a separate file? (Nope.)

The HTML5 Boilerplate has recently separated out normalize.css, giving it a separate stylesheet link in its default template file. Should you leave it like this in your production site? Is there some caching or other gain? Nope. At least probably not.

Looking at the rationale, one finds this was done to help with maintenance and versioning of the H5BP code.

For production, the recommendation is still to roll up all your CSS, including normalize.css into one minified and compressed file.

Necolas points this out in the GitHub pull request on this issue:

Benefits of disentangling normalize.css from the rest of the project’s
CSS:

Easier to track normalize.css version.
Easier to update normalize.css.
Easier to remove normalize.css if the user wants.
Clearer distinction between normalizing CSS and the additions that HTML5 Boilerplate provides.
Drawback is the additional HTTP request incurred from the extra
stylesheet referenced in the HTML. However, we already do something
similar for the JS, and anyone serious about performance is going to
employ a build process to concatenate and minify CSS/JS.

Emphasis added.

Further Notes

  • HTML5 Bones also has normalize as a separate file.
  • As pervasive as normalize is becoming, this could become a new best practice …
  • But in terms of site performance there would need to be caching benefits to overcome the need for the extra HTTP request. If I understand how browsers decide when to use a cached file, the file would need to be sourced from the same online location — as the H5BP does with Google-hosted jQuery.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s