Before you start code your layout with CSS Grid, setup up your HTML so it makes sense. First and foremost your markup should be readable on screen readers and work without a fancy layout.

If you create an animation in CSS you have to specifically describe what is going to happen for every step, whereas in Javascript with the WAAPI you are more flexible, because you can programmatically define the animation in an animation object.

There is so many ways to animate things on the web today. From pure CSS animation to fancy libraries like GSAP. The Web Animations Api (short WAAPI) tries to combine the power of CSS with the flexibility of Javascript in order to allow complex animation sequences.

CSS variables have been around for a while. Although they still lack some Browser Support (mainly IE and Edge), they provide a great new way to structure and interact with your CSS. In order to take a closer look at the performance impact of CSS variables one has to understand the basic principle of the scope, because it also applies to CSS variables.