CSS performance - What is faster?

This week I took an interesting test about CSS performance where I had to choose what of the 3 snippets was faster. In this article I'll share the result.

You can take the test created by Simon Sterne here: Web designer depot

Q 1

A)

p
{
    // do somthing
}

B)

#myElement
{
    // do somthing
}

C)

.myElement
{
    // do somthing
}

The right answer is B. An ID selector renders faster than any other selector.

Q 2

A)

p#myElement
{
    // do somthing
}

B)

p.myElement
{
    // do somthing
}

C)

#myElement
{
    // do somthing
}

The right answer is C. An ID selector is the fastest, and doesn't need greater specificity because it’s unique to the page.

Q 3

A)

p > .myElement
{
    // do somthing
}

B)

:root .myElement
{
    // do somthing
}

C)

p .myElement
{
    // do somthing
}

The right answer is A. The child selector is fastest because it matches the fewest elements.

Q 4

A)

nav .menuItem > div
{
    // do somthing
}

B)

nav > .menu > .menuItem > div
{
    // do somthing
}

C)

nav > .menuItem div
{
    // do somthing
}

The right answer is A. This is a tricky one, because if the markup were identical, Answer C wouldn't work!

Q 5

A)

.myElement
{
    color: rgb(19, 195, 154);
}

B)

.myElement
{
    color: #13c39a;
}

C)

.myElement
{
    color: rgba(19, 195, 154, 1);
}

The right answer is B. Hex codes are faster than RGB.

Q 6

A)

.myElement
{
    color: rgb(19, 195, 154);
}
.myElement > * 
{
    opacity: 0.5;
}

B)

.myElement
{
    color: rgb(19, 195, 154);
    opacity: 0.5;
}

C)

.myElement
{
    color: rgba(19, 195, 154, 0.5);
}

The right answer is C. RGBA is faster than rendering RGB and then changing the element’s opacity.

Q 7

A)

.myElement
{
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
}

B)

.myElement
{
    margin: 0 0 0 0;
}

C)

.myElement
{
    margin: 0;
}

The right answer is C. Technically, both Answer B and Answer C are correct. But because Answer C is shorter, it will perform minutely faster than Answer B.

Q 8

A)

.myElement
{
    content-visibility: auto;
}

B)

.myElement
{
    content-visibility: initial;
}

C)

.myElement
{
    content-visibility: auto;
    contain-intrinsic-size: 700em;
}

The right answer is C. You must set a predicted size when using content-visibility, to prevent rendering issues when the content appears.

Q 9

A)

.parentElement
{
    will-change: opacity;
}
.myElement
{
    transition: opacity 450ms ease-out;
}

B)

.parentElement > .myElement
{
    will-change: opacity;
    transition: opacity 450ms ease-out;
}

C)

.myElement
{
    transition: opacity 450ms ease-out;
}

The right answer is A. Setting will-change on the parent element ensures that it’s available before the child element is rendered.

Q 10

A)

h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, pre
{
    // do something
}

B)

* > *
{
    // do something
}

C)

body > *
{
    // do something
}

The right answer is A. Sometimes the most succinct code is not the most performant.

I like this kind of tests because you'll start thinking a bit differently on topics that you might take for granted after you take them.

How well did you do on the test?