What I've never been told about CSS
- Transfer

Photo by Giantin Durnbos at Unsplash
This is by no means a criticism of colleagues, but just a short list of important things that I myself have learned about CSS recently.
It's no secret that many developers don't seem to think about CSS. This is easy to notice from discussions on the Internet and in conversations with friends and colleagues. Nevertheless, we get a lot of knowledge precisely from colleagues, and sometimes I understand that no one told me about some important CSS nuances, because people simply do not spend time studying this topic.
To fix this, I did some research and put together a short list of concepts that I find interesting and useful for better understanding and writing CSS.
This list is definitely not exhaustive. It contains only the new that I learned in the last few days and what I want to share, all of a sudden it will help someone else.
Terminology
As with any programming language, certain terms are used to describe concepts. Being a programming language, CSS is no different, so it’s important to learn some terminology in order to simplify communication and just for personal development.
Descendant Combinator
Have you seen the gap between the selectors in your style? In fact, it has a name, it is a descendant combinator.

Descendant Combinator
Layout, rendering and composition
These terms are related to rendering in the browser, but they are important because some CSS properties affect the various steps of the rendering pipeline.
1. Layout
The layout step is the calculation of how much space an element occupies on the screen. Changing the 'layout' property in CSS (for example, width, height) means that the browser will have to check all the other elements and redraw the page, that is, repaint the affected areas and overlap them.
2. Drawing (paint)
This process fills with pixels all the visual parts of the elements (colors, borders, etc.). Elements are usually drawn on multiple layers.
Changing the 'paint' property does not affect the layout, so the browser skips the layout step, but does the rendering anyway.
Rendering often takes the most time when rendering.
3. Composition (composite)
Composition is the step in which the browser should draw the layers in the correct order. Since some elements may overlap, at this point the browser checks that the elements are displayed in the specified order.
If you change the CSS property, which does not affect either the layout or rendering, the browser only has to do the composition.
For more information on which processes trigger various CSS properties, see CSS triggers .
CSS performance
Offspring selector can be expensive
Depending on the size of your application, using only the descendant selector without specific instructions can hit the resources hard. The browser will check for compliance with each element of the descendant, because the relationship is not limited to the parent and child element.
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 section
#nav
. A more efficient way is to add a specific selector
.navigation-link
to each link <a>
within the section #nav
.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 selectors from right to left.
Consider the following example:

The browser reads from right to left.
Steps:
- match everything
<a>
on the page; - find everything
<a>
contained in<li>
; - take matches and narrow them down to those contained in
<ul>
; - finally, filter the above selection 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 efficient the browser will be able to filter and apply CSS properties.
To improve the performance of the above example, we could replace
.container ul li a
it by adding something like .container-link-style
on the tag itself <a>
.If possible, do not change the layout.
Changes to some CSS properties require updating the entire layout.
For example, the geometric properties
width
, height
, top
, left
need to re-calculate and update the layout 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 rendering complexity
Some CSS properties (like blurring) are more expensive than others when it comes to rendering. Think of 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:
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
Let's look at this CSS:

And then look at the HTML code:

The order of the selectors in the HTML doesn't matter, but in the CSS it does.
A good way to evaluate CSS performance is to use the developer tools in a browser.
In Chrome or Firefox, you can open the developer tools, go to the Performance tab and record what happens when you load or interact with your page.

Performance tab screenshot in Chrome
Resources
While researching the topic for this article, I came across some really interesting tools, listed below:
CSS Triggers is a website listing some CSS properties and how they affect performance.
Uncss is a tool to remove unused styles from CSS.
Css-explain is a small tool explaining CSS selectors.
Fastdom is a DOM batch read / write tool to speed up layout performance.
That's all for now! Hope this makes sense!