This post was sparked by a question I answered on Quora:
transition CSS rule.
There are a few reasons why you should try to leverage the browser’s CSS engine instead of hand-rolling animations, focused states and so on.
CSS and HTML try their hardest to self-remedy. They’re super robust: one broken CSS rule doesn’t crash your whole web-app, a missing tag might break your layout but except in extreme cases it won’t stop your site from loading.
myObj is null/undefined) will crash your whole app, forcing your user to refresh the whole thing and possibly losing some work in the process.
Since CSS is declarative there is a lot more scope for optimisation. The browser can sometimes use hardware acceleration to do CSS things.
It can also optimise things like not computing off-screen element’s styles or run their animations.
With CSS, non-CSS3 compliant browsers aka
pretty-damn-old-browser-that-you-dont-use-any-more-but-your-users-mightwill just ignore the
head even though they load their
scripts at the end of the
CSS is also quite cheap to interpret since it’s declarative, you can parallelise the creation of the in-memory representation of styles (since each selector in the CSS can be interpreted in parallel) and also defer calculation of the final styles until when the elements are painted.
CSS animations and detecting DOM state using pseudo-classes costs you nothing both in terms of loading and not incurring a dependency since CSS and HTML are backed by web standards. It’s very likely any new developers will be familiar with CSS animations, and if they’re not, they should be.
Feel free to get in touch with me on Twitter @hugo__df.
Leave some 👏🏻 if you enjoyed this, and here are some posts you might be interested in:
For more trending tech answers from Quora, visit HackerNoon.com/quora.