Unprefixed rules/properties/values should be written last, after the prefixed ones. Browsers would overwrite the former and apply the last.

document.write, seriously? Isn’t docwriting styles as bad as docwriting scripts ?

Using document.write like you did is bad because fetching resources asynchronously prevents those resources from blocking the page load.

Using a script DOM element maximizes asynchronous loading across current browsers:

<script>
var node = document.createElement(‘link’);
node.type = ‘text/css’;
node.async = true;
node.src = ‘example.css’;
// Now insert the node into the DOM, perhaps using insertBefore()
</script>

Layering into separate files might be good from a code organisation point of view but increases the number of requests the browser has to make and so can have an adverse affect on performance.

From the perfomance angle we encourage people to merge files together (especially small ones) to reduce the number of requests but finding the sweet spot between reducing requests and making most effective use of parallel downloads often requires some experimentation.

One thing we would encourage people to avoid is document.write for inserting scripts.

Steve Souders explains it well here: http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/ but basically using document.write to insert a script prevents the browser from rendering all DOM elements below it until the script has downloaded.

Much better to use the async loading pattern that Steve mentions.

Nice post Val :) I much prefer CSS animations to JS and use them wherever possible for progressive enhancement. I tend to build something as cleanly as possible first and then look back over it and ask “where can I improve the experience for users on modern browsers?” Subtlety is the key when taking advantage of animation, at least in my experience.

Separating your CSS into multiple files is an excellent idea, especially in larger projects and also in cases where you’ll have multiple devs working on the code. You can get around the issue of additional http requests by using a pre-compiler like LESS or SASS to compile many files into one, or a few, and minify them while you’re at it. This can also help you construct your animation rules with the use of dynamic mixins.

I haven’t yet found the need to create new files specifically for animation rules alone, but I like the idea of it as the code structure (@keyframe) is pretty different than the norm and often looks out of place/untidy. It can also be a little frustrating when a keyframe block lives a few hundred lines away from the animation declaration itself!

Ah yes, the asynchronous is a better way for dynamically including files. Whatever method you go with, you can still use the same approach to separating things out, even if it’s only done internally. It’s all about what makes the most sense for the project at hand.

As much as I would have loved working on a site with falling cats, the code in this post wasn’t from a real project :)

I understand the idea of loading in files if you actually need them, but isn’t this something that should be handled on the server-side?