What I've never been told about CSS

Published on March 25, 2019

What I've never been told about CSS

Original author: Charlie Gerard
  • 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-linkto 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 ait by adding something like .container-link-styleon 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, leftneed 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!