CSS styling approach

[Nischal2015]

This is the discussion of the styling approach taken by the Gatsby team for styling the cards in the overview section of the docs. At least, that was the first CSS styling issue I could find.

Have a look at this pixel pipeline which every browser goes through to generate the frame you see on the screen.

Problem

How the styling is applied to the hover state by transitioning the box-shadow property directly is not the most performant way of achieving the shadow effect. This approach requires the browser to perform all the steps mentioned in the above figure.

But we don't want to perform all the steps every time. What we want is this in best case scenario

We want to skip the LAYOUT and PAINT stages for most of the parts. Luckily, we can achieve this with the solution provided below.

Solution

Rather than directly changing the box-shadow on hover, what we want to do is this instead.

.my-div {
  ...
  position: relative;
}

.my-div::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  z-index: -1,
  transition: opacity animation-duration animation-timing-function ...;
  /* Define all your hover styles */
  ...
}

.my-div:hover::after {
  opacity: 1;
}

We are pre-rendering all the styles we need and changing the opacity to view or hide the styles on hover.
Using this approach skips most of the expensive bits from the pixel-pipeline and hence is a more performant way of achieving the same effects.