HTML and CSS Reference
In-Depth Information
Using this model also lets us lean heavily on CSS for its strengths, like responsive design and
using breakpoints to redefine your interaction at the various screen sizes. It also helps if you're
specifically targeting a device with a constrained bandwidth, because, as we all know, CSS is
much lighter than JavaScript in both download and execution time.
Being able to offload
some of the weight JavaScript carries onto CSS is a great benefit.
In production, we are currently using CSS animations and transitions for micro interactions like
hover effects and maybe a spinning graphic or a pulsating knot. We've come to a point where
CSS is a pretty powerful language that performs very well in the browser and it's okay to use it
more heavily for those macro interactions that are typically built using JavaScript. If you're
looking for a lightweight and consistent experience that's relatively easy to maintain while
allowing you to use the latest and greatest browser features — it's probably time to start
mending fences and build strength back into the relationship between CSS and JavaScript. As
a great man once said, “The key to writing great JavaScript is knowing when to use CSS
instead.” (It was me… I said that.) ❧
—