CSS-Performance

Let’s be honest, CSS “speed” and performance is not as important as PHP or JavaScript performance. However, this doesn’t mean we should ignore it. A sum of small improvements equals better experience for the user.

Three areas of concern are network requests, CSS specificity and animation performance.

Performance best practices are not only for the browser experience, but for code maintenance as well.

Network Requests

• Limit the number of requests by concatenating CSS files and encoding sprites and font files to the CSS file.
• Minify stylesheets
• Use GZIP compression when possible Automate these tasks with a PHP or/and JavaScript build process.

CSS Specificity

Stylesheets should go from less specific rules to highly specific rules. We want our selectors specific enough so that we don’t rely on code order, but not too specific so that they can be easily overridden.

For that purpose, classes are our preferred selectors: pretty low specificity but high reusability.

Avoid using !important at all costs.

Use efficient selectors.

Avoid:

div {
  background: radial-gradient(ellipse at center,  #a90329 0%,#8f0222 44%,#6d0019 100%);
}

Overqualified:

div div header#header div ul.nav-menu li a.black-background {
  background: radial-gradient(ellipse at center,  #a90329 0%,#8f0222 44%,#6d0019 100%);
}

Inheritance

Fortunately, many CSS properties can be inherited from the parent. Take advantage of inheritance to avoid bloating your stylesheet but keep specificity in mind.

Avoid:

.sibling-1 {
	font-family: Arial, sans-serif;
}
.sibling-2 {
	font-family: Arial, sans-serif;
}

Prefer:

.parent {
	font-family: Arial, sans-serif;
}

Reusable code

Styles that can be shared, should be shared (aka DRY, Don’t Repeat Yourself). This will make our stylesheets less bloated and prevent the browser from doing the same calculations several times. Make good use of Sass placeholders. (also see Inheritance)

CSS over assets

Don’t add an extra asset if a design element can be translated in the browser using CSS only. We value graceful degradation over additional HTTP requests.

Very common examples include gradients and triangles.

Animations

It’s a common belief that CSS animations are more performant than JavaScript animations. A few articles aimed to set the record straight (linked below).

• If you’re only animating simple state changes and need good mobile support, go for CSS (most cases).
• If you need more complex animations, use a JavaScript animation framework or requestAnimationFrame.

Limit your CSS animations to 3D transforms (translate, rotate, scale) and opacity, as those are aided by the GPU and thus smoother. Note that too much reliance on the GPU can also overload it.

Avoid:

#menu li{
  left: 0;
  transition: all 1s ease-in-out;
}
#menu li:hover {
  left: 10px
}

Always test animations on a real mobile device loading real assets, to ensure the limited memory environment doesn’t tank the site.

Articles worth reading: * CSS animations performance: the untold story * Myth Busting: CSS Animations vs. JavaScript * CSS vs. JS Animation: Which is Faster? * Why Moving Elements With Translate() Is Better Than Pos:abs Top/left * CSS vs JavaScript Animations * requestAnimationFrame