Photo of Jantin Durnbos on Unsplash

This is by no means a criticism of colleagues, but just a short list of important things that I have independently learned about CSS lately.

It's no secret that many developers don't seem to think about CSS. This is easily noticed by discussions on the Internet and in conversations with friends and colleagues. Nevertheless, we get a lot of knowledge from colleagues, and sometimes I understand that no one told me about some important nuances of CSS, because people just don’t spend time studying this topic.
')
To fix this, I did some research and made a small list of concepts that I find interesting and useful for better understanding and writing CSS.

This list is definitely not exhaustive. It contains only new things that I have learned over the past few days and what I want to share, all of a sudden it will help someone else.

Terminology

As in any programming language, certain terms are used to describe concepts. Being a programming language, CSS is no different, so it is important to learn some terminology in order to simplify communication and just for personal development.

Descendant Combinator

Did you see a space between selectors in your style? In fact, he has a name, it is a descendant combinator (descendant combinator).


Descendant Combinator

Layout, drawing and composition

These terms are related to rendering in the browser, but they are important because some CSS properties affect the various rendering pipeline steps.

1. Layout

The layout step is the calculation of how much space an element takes on the screen. Changing the 'layout' property in CSS (for example, width, height) means that the browser will have to check all other elements and redraw the page, that is, repaint the affected areas and superimpose them on each other.

2. Paint (paint)

This process fills all the visual parts of the elements (colors, borders, etc.) with pixels. Elements are usually drawn on several layers.

Changing the 'paint' property does not affect the layout, so the browser skips the layout step, but it still draws.

The rendering often takes the most time during rendering.

3. Composition (composite)

Composition is a step in which the browser has to draw the layers in the correct order. Since some elements may overlap each other, at this stage the browser checks that the elements are displayed in the specified order.

If you change the CSS property, which does not affect the layout or drawing, the browser remains to do only the composition.

For details on which processes trigger various CSS properties, see CSS Triggers .

CSS performance

The selector descendants can be costly

Depending on the size of your application, using only a descendant selector without specific instructions can hit resources hard. The browser will check for compliance with each element of the child, because the relationship is not limited to the parent and child.

For example:


An example of a descendant selector

The browser will have to evaluate all the links on the page before moving on to those inside our #nav section.

A more efficient way is to add a specific .navigation-link selector to each <a> link inside the #nav section.

Browser reads selectors from right to left

It seems I should have known this important thing before, but I didn’t know ... When parsing CSS, the browser parses the selectors from right to left.

Consider the following example:


Browser reads from right to left

Steps:

• match all <a> on the page;
  
• find all <a> contained in <li> ;
  
• take matches and narrow them down to those contained in <ul> ;
  
• finally, filter the above choice to those contained in the element with the class .container .

Looking at these steps, we see that the more specific the right selector is, the more effectively the browser will be able to filter and apply CSS properties.

To improve the performance of this example, we could replace .container ul li a by adding something like .container-link-style on the <a> tag itself.

If possible, do not change the layout.

Changes to some CSS properties require updating the entire layout.

For example, the geometric properties of width , height , top , left require re-calculate the layout and update the rendering tree.

If you change these properties on many elements, it will take a long time to calculate and update their position / size.

Be careful with drawing complexity.

Some CSS properties (like blur) are more expensive than others when it comes to rendering. Think about more effective ways to achieve the same result.

Expensive CSS Properties

Some CSS properties are more expensive than others. This means that rendering takes longer.

Some of the expensive properties are:

• border-radius
• box-shadow
• filter
• :nth-child
• position: fixed

This does not mean that they cannot be used at all, but you need to understand that if an element uses some of these properties and is rendered hundreds of times, it will affect performance.

Ordering

Order matters

Look at this CSS:



And then look at the HTML code:



The order of selectors in HTML does not matter, but in CSS it does.

---

A good way to evaluate CSS performance is to use developer tools in the browser.

In Chrome or Firefox, you can open the developer’s tools, go to the Performance tab, and record what happens when you load or interact with your page.


Screenshot of the Performance tab in Chrome

Resources

While exploring the topic for this article, I came across some really interesting tools listed below:

CSS Triggers is a website that lists some CSS properties and how they affect performance.

Uncss is a tool for removing unused styles from CSS.

Css-explain is a small tool that explains CSS selectors.

Fastdom is a DOM batch read / write tool to speed layout performance.

Bye for now! Hope this makes sense!