Animations, Transitions and Keeping CSS Kosher

Wrapping up Code School's excellent (and free!) Try jQuery course, and concluded with animations for making an element on the page move up when you click on it. 

There are two ways they show you how to do this. One is by using jQuery's animate() method in your app code (let's call it your app.js file):

$(this).animate({'top': '-10px'}, 'fast');

And the other is to separate out all the styling and store it in your app.css file, and refer to it in your app.js file.  This is what I call "keeping CSS kosher."

// app.js
$('div').on('click', '.someElement', function() {

// app.css 
.someElement {
  transition: top 0.2s; // assumes browser supports CSS transitions
.highlight {
  top: -10px;

Keeping CSS kosher requires a lot more code, and also assumes browser compatibility. According to CanIUse, about 7 percent of browser usage globally does not support CSS transitions, and half of that comes from Opera Mini, which Jacques (hi, Jacques!) says it's OK to ignore. So that leaves us with 3 percent global usage, or 5.6 percent U.S. (IE 8 and 9 users) unsupported.

So why keep CSS kosher if: 1) It requires more code, and; 2) It leaves out a small but actual percentage of users on unsupported browsers? 

First, it makes it easier to maintain your code if you keep all styling separate. This I know to be true from experience... painful experience.

Second, Jacques says it is way more performant to keep CSS kosher because then your computer will offload transitions to the GPU, which is built to handle tasks like that. 

So, when it comes down to it, your decision tree would be:

  • Do I have to support IE 8 and/or IE 9 users?
    • Yes: Use jQuery methods in your app.js file. Maybe eat a ham sandwich, and wash it down with milk while you're at it. 
    • No: Keep CSS kosher. Create classes in your app.css file, and refer to them in your app.js file.