This post was sparked by a question I answered on Quora:
Answer (1 of 7): The rules regarding this are the following: * if you can use CSS to do something instead of JS, do it…www.quora.com
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.
3. Easy and costly to get wrong
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.
5. Cost of maintenance and added dependencies
- you’re adding a dependency with its own API, which means potentially more things to learn for anyone looking to maintain the code after you
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:
The tools we wield define us, git is the one tool all developers usehackernoon.com
Amazon Web Services is one of the leading hosting providers, here’s why.medium.com
For more trending tech answers from Quora, visit HackerNoon.com/quora.