Selectors - the secret to faster CSS

For years, I thought the only CSS optimization technique one can do was to "minify" the files.

How wrong was I!

I came across this term called "Lean CSS" in an articlethe other day - and the first word that came to my mind, even before I read the article, was minification.

Turns out, there's more to CSS optimization than just reducing the file size.

'Selectors' - the secret to Lean CSS

The secret to lean CSS and improved website performance is optimizing for selectors

If you know how and where to place the selector - you will see tremendous performance optimization.

However, to get the placement right, one needs to understand how selectors work and how browsers parse CSS selectors.

CSS Selectors - a refresher

A selector determines which element(s) a CSS rule applies to

There are 5 basic types of selectors

Universal Selector

applies to the entire document

Element Selector

applies a margin of all 25 px to all p elements

ID Selector

Any element in the document with ID value header will receive a padding of 25px

Class Selector

This rule will match every element in the document with a class of container and give it a color of gray

Attribute Selector

Matches all anchor elements that have an href attribute that contains the string w3schools.com

You can work with selectors only if you understand the relationship between the elements you are working on.

Combinators

CSS combinators define relations between elements of a document. In CSS3, they come in three variants according to the specification:

Descendant combinator: a descendant combinator describes a descendant relationship between two elements. A descendant combinator is made of the whitespace sign

body p

Child combinator: a child combinator describes a childhood relationship between two elements. This combinator is made of the > sign.

body > p

Sibling combinator: there are two different sibling combinators, the adjacent sibling combinator and the general sibling combinator. They are noted with the + andsigns respectively.

p + *

We know the type of selectors and combinators and we understand how they can affect a change in the entire document or a specific element. But how does it affect the performance of the webpage?

To understand this you have to know how CSS works in the browser.

How CSS works in the browser

The Document Object Model, or DOM, is a data structure in the browser. It is a tree of objects that represent the elements in the document and their structure and hierarchy. This tree is composed of DOM nodes. The DOM is created by reading the HTML markup, tokenizing it, parsing it, and finally creating the object hierarchy that makes up the DOM.

Couldn't wrap your head around that?

Let me explain with an illustration.

The parsing of CSS files takes place in two steps.

The first step: Cascading:: Resolving the CSS declarations conflicts

In this step, the browser resolves any conflicts between the different rules and declarations applied to the same element by the importance of specificity.

The second step: Processing final CSS values

Here final processed values are given to all the styles

It's during the creation of CSS object model selector placement that plays an important role.

Browsers read CSS selectors from right to left.

A selector to the furthest right is the most important factor for performance

#menu ul li a #item {}

The browser first checks for #item, then a, then li, then ul, and then #menu. Is this efficient?

No. continue reading to understand why.

This is inefficient because the browser found the element it was after on the first check, but was then forced to continue looking through the document for all the additional selectors.

One of the biggest reasons for slow rendering efficiency on websites today is the poor use of selectors.

But if you can get your head around the way browsers read CSS, you can improve your load times.

If you found this article useful, follow me on twitter for more such content.

Please subscribe to this blog for weekly articles on Digital Experiences, UI/UX, and Web Development.

Resources:

• https://stackoverflow.com/questions/12279544/which-css-selectors-or-rules-can-significantly-affect-front-end-layout-renderi/

• https://www.section.io/engineering-education/how-css-works-behind-the-scenes/

• http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing