Things in CSS that no one ever told me about.
This post is by no means a criticism of anyone I have ever worked with, it is just a shortlist of important things I learned about CSS recently through my own research.
The fact that it seems to many developers that developers don’t really care about CSS is nothing new. However, in the community, much of what we learn comes from sharing knowledge with peers, and as a result, I sometimes realize that there are important things in CSS that I have never been told about because other people never spent more time to study.
To try to fix this, I decided to conduct my own research and make a shortlist of concepts that, in my opinion, are interesting and useful for a better understanding and writing of CSS.
This list is definitely not exhaustive, it only contains what I learned in the last few days, and I want to share it.
As with any programming language, there are certain terms used to describe concepts. CSS is a programming language, it is no different, therefore, the study of terminology is important to help in communication or even just for your personal knowledge.
Do you know this little gap between your style selectors? In fact, he has a name – Descendant combinator.
Layout, paint, and composite
These terms are more related to the way the browser displays the data, but it’s still important, as some CSS properties will affect the various stages of rendering.
A layout step is a calculation of how much space an element occupies when it is 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 “recompose” the page, that is, redraw the affected areas and put them together.
This process fills the pixels for each visual part of the elements (colors, borders, etc.). Drawing elements are usually performed on several layers.
Changing the “drawing” properties does not affect the page layout, so the browser skips the layout step but still draws.
Drawing is often the most expensive part of the chain.
The layout is a step where the browser needs to draw layers in the correct order. Since some elements may overlap, this step is important to ensure the order in which the elements are displayed.
If you change the CSS property, which does not require any layout or rendering, then the browser only needs to make the composition.
For more information on what triggers changing various CSS properties, look at CSS Triggers.
Offspring selector can be costly
Depending on how big your application is, just using a child selector without more specificity can be very costly. The browser is going to check each descendant element for compliance because the relationship is not limited to the parent and child elements.
The browser is going to check all the links on the page before moving on to those inside our
A more efficient way to do this is to add a specific selector
.navigation-linkto each element of
The browser reads selectors from the right to left
I should have known this because it sounds very important, but I didn’t know
When parsing CSS, the browser resolves CSS selectors from right to left.
If we look at the following example:
Steps were taken:
- match every one
<a>on the page.
- find everything
- use previous matches and narrow down to those contained in
- Finally, filter the above elements to those contained in the element with the class .container
Considering these steps, we see that the more specific the right selector, the more efficient the browser will filter and enable CSS properties.
To improve the performance of the above example, we could replace
.container ul li a чем-то вроде
.container-link-stylethe tag itself
Avoid changing layouts where possible.
Changes to some CSS properties will require updating the entire layout.
For example, properties such as width, height, top, left (also called “geometric properties”) require a recalculation of the layout and a renderer of the tree display for updating.
If you change these properties for many elements, it will take a long time to calculate and update their position/size.
Beware of the complexity of drawing
Some CSS properties (like a blur) are more expensive than others when it comes to rendering. Think of other, more effective ways to achieve the same result.
Expensive CSS Properties
Some CSS properties are more expensive than others. This means that they take longer to draw.
Some of these expensive properties include:
- : nth-child
- position: fixed
This does not mean that you should not use them at all, but it is important to understand that if an element uses some of these properties and will be rendered hundreds of times, this will affect rendering performance.
The order in the CSS files matters
If we look at the CSS below:
And then take a look at this HTML:
The order of the selectors in the HTML doesn’t matter; the order of the selectors in the CSS file does.
A good way to gauge the performance of your CSS is to use your browser’s developer tools.
If you use 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.
While doing some research for this article, I came across several really interesting tools, listed below:
CSS Triggers is a site that lists some CSS properties and the performance impact of using and changing these properties in your application.
Uncss is a tool to remove unused styles from CSS.
CSS-explain is a small tool explaining CSS selectors.
Fastdom is a tool for batch DOM read/write operations to speed up layout performance.
That’s all for now! Hope this makes sense!