• Things nobody ever taught me about CSS.
  • By Charlie Gerard
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: Xuyuey
  • Proofreader: Fengziyin1234, Xionglong58

This article is in no way a critique of anyone I’ve ever worked with, it’s just a few points ABOUT CSS that I recently learned while doing some personal research.

I think it’s not new that a lot of developers don’t care much about CSS. You can observe this phenomenon in various conversations online or with friends and colleagues.

However, in the community, much of what we learn comes from sharing with our peers, and sometimes I realize that a lot of the basics of CSS are never shared in the community because others never take the time to dig deep into CSS.

To solve this problem, I decided to do some research into CSS and put together a few concepts that I thought would be useful for better understanding and writing CSS code.

This list is certainly not that comprehensive, it just includes new knowledge I have learned in the past few days, and I hope it will help you by sharing it.

The term

In all programming languages there are specific terms used to describe concepts. As with CSS as a programming language, knowing these terms is helpful for communication and even just to improve your knowledge base.

Descendant selector

You know that little space in the middle of a style selector? It actually has a name, and its name is descendant selector.

Merge the layout, draw and render layers

These terms are more relevant to browser rendering, but they are still important because some CSS properties can affect different steps in the rendering process.

1. The layout

The layout step is responsible for calculating the amount of screen space an element takes up. Changing the “layout” properties in CSS (e.g., width, height) means that the browser needs to look at all the other elements and “rearrange” the page, that is, redraw the affected areas and merge them together.

2. Draw

This process is the process of filling pixels for the visual parts of an element (colors, borders, and so on). Drawing elements is usually done on multiple layers.

Changing the “draw” property does not affect the layout of the page, so the browser skips the layout step but still performs the draw.

Drawing is often the most expensive part of the entire rendering process.

3. Render to merge

In the render layer merge step, the browser needs to draw the layers in the correct order. Because some elements overlap, this step is important to ensure that the elements are displayed in the expected order.

If you change a CSS property that requires neither layout nor drawing, the browser only needs to do the render layer merge.

For more information on the different CSS Triggers, you can check out the CSS Triggers page.

CSS properties

Progeny selectors may be very energy intensive

Depending on the size of the program, it can be very expensive to just use descendant selectors with little specificity. The browser checks to see if each descendant element matches, because the descendant relationship is not limited to the parent.

Such as:

The browser evaluates all the links on the page and eventually locates the link that is actually inside the #nav element.

A more efficient approach is to add a specific.navigation-link selector to each element in the #nav element.

The browser reads the selector from right to left

I feel like I should know this, because it sounds important, but I don’t know…

When parsing the CSS, the browser parses the CSS selector from right to left.

Let’s look at the following example:

The steps taken are as follows:

As you can see from the steps above, the more specific the selector on the right is, the more efficient the browser will be at filtering and parsing CSS properties.

To improve the performance of the example above, we can replace.container ul li a with a class name similar to.container-link-style on the tag.

Avoid changing the layout as much as possible

Changing some CSS properties may require updating the layout of the entire page.

For example, properties such as Width, height, top, and left (also known as “geometric properties”) require recalculating the layout and updating the render tree.

If you change these attributes on a large number of elements, it can take a long time to calculate and update their positions/sizes.

Be careful of the complexity of the drawing

Some CSS attributes (such as blur) are more expensive to draw than others. Consider using other, more efficient methods to achieve the same effect.

Expensive CSS properties

Some CSS properties are more expensive than others, which means they take longer to draw.

Some of these attributes are as follows:

  • border-radius

  • box-shadow

  • filter

  • :nth-child

  • position: fixed

This doesn’t mean you shouldn’t use them at all, but you should understand that if an element uses some of these attributes and will render hundreds of times, rendering performance will be affected.

The order

Order is important in CSS files

Let’s look at the following CSS code:

Then look at this HTML code:

We’ll find that it’s not the order in which the selectors appear in the HTML code that affects the rendering, but the order in which the selectors appear in the CSS file.

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

If you’re using Chrome or Firefox, open the Developer tools, go to the Performance TAB, and record what happens when you load or interact with the page.

resources

While doing research for this article, I came across some very interesting tools, like these:

CSS Triggers — This site lists some CSS properties and how using and modifying them in your application can affect performance.

Uncss – a tool that removes unused styles from CSS files.

Css-explain – a widget that explains Css selectors.

Fastdom – a tool for batch DOM read/write operations to speed up layout performance.

That’s pretty much it! Hope it makes sense!

Thanks for reading! 🙏

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.