Write Better CSS: Tips and Tutorial

Browser Rendering Workflow

Hello friends today we gonna learn about Write Better CSS: Tips and Tutorial. So read this article, Write Better CSS: Tips and Tutorial step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: Write Better CSS: Tips and Tutorial

In today’s post, we’ll be thinking about the code choices we can make in CSS for improved site performance. But before we get into those choices, let’s take a brief and closer look at the web page rendering workflow to focus on the problematic (performance-oriented) areas that can be resolved through CSS.

This is the global set of operations performed by the browser after the DOM tree is created:

  1. Recalculate the style (and display the tree structure). Browser calculates the styles to apply to the elements in the DOM tree. A render tree is later created while removing the nodes (elements) from the DOM tree that should not be rendered (elements with display: none) and the ones that are (pseudo elements).
  2. Layout (aka Reflow). Using the calculated style in advance, the browser calculates the position and geometry of each element on the page.
  3. Repaint. Once the layout is mapped, pixels are pulled to the screen.
  4. Composite layers. During repainting, the painting can be applied autonomously in several layers; those layers are then eventually combined with each other.

Now let’s move on to what we can do in the first three stages of the edit to write better performing CSS codes.

back to menu ↑

1. Reduce style calculations

As mentioned earlier, in the “Recalculate Style” stage, the browser calculates the styles to apply to the elements. To do this, the browser first finds all selectors in the CSS that point to a particular element node in the DOM tree. Then it goes through all the style rules in those selectors and decides which ones to actually apply to the element.

Style CalcIMAGE: Aerotwist

To avoid expensive style calculations, reduce complex and deeply nested selectors so that it is easier for the browser to figure out which element a selector refers to. This reduces the computation time.

Other ways to use include reduce the number of style rules (where possible), removing unused CSS and avoid redundancy and transfersso that the browser does not have to go through the same style every time during style calculations.

back to menu ↑

2. Reduce reflows

Reloads or changes to the layout in an element are very ‘expensive’ processes and they can be an even greater problem when the element that went through the layout changes has a significant number of children (since Reflows run through the hierarchy

Reflows are triggered by changes to the layout of an element, such as changes in geometric properties such as height or font size, adding or removing classes to elements, the size of the window, triggered: hover, DOM changes by JavaScript, etc.

As with style calculation, to reduce reflows, avoid complex selectors and deep DOM trees (again, this is to avoid excessive cascading of reflows).

If you need to change the layout styles of a component on your page, focuses on the styles of the element that is lowest in the hierarchy of elements of which the part is made. This is so that the layout changes do not (almost) trigger other reflows.

If you animate an element that is going through layout changes, get it from the page stream by absolutely position, since Reposition in absolutely positioned elements does not affect the rest of the elements on the page.

To summarize:

  • Target elements lower in the DOM tree when making layout changes
  • Choose absolutely positioned elements for animations that change the layout
  • Avoid animating layout properties whenever possible
back to menu ↑

3. Reduce the number of repaints

Repaint refers to drawing pixels on the screen and, like Reflow, is an expensive process. Repaints can be triggered by Reflows, page scrolling, changes in properties such as color, visibility and opacity.

Pixel Art

To avoid frequent and large-scale repainting, use less of the properties that cause expensive recoating like shadows.

If you animate properties of an element that can directly or indirectly activate Repaint, that’s a big advantage if that element is in its own layer prevent the paint process from affecting the rest of the page and causing hardware acceleration. With hardware acceleration, the GPU up the job of performing the animation changes in the layer, saving the CPU extra work while speeding up up the process.

In some browsers, opacity (with a value less than 1) and transform (value other than none) are automatically promoted to new layers and hardware acceleration is applied for animations and transitions. So giving preference to these properties for animations is good.

With power promote an element to a new layer and switch to hardware acceleration two techniques are used for animation:

  1. add transform: translate3d (0, 0, 0); to the element, tricking the browser into activating hardware acceleration for animations and transitions.
  2. add the will-change property to the element, which informs the browser of the properties that are likely to change in the element in the future. Note: Sara Soueidan has an in-depth and super helpful article on the Dev.Opera site about this.

To summarize:

  • Avoid Expensive Styles That Cause Repaints
  • Look for layer promotion and hardware acceleration for bold animations and transitions.
back to menu ↑

take note

(1) So up Until now, we haven’t talked about reducing the CSS file size. We mentioned that reducing style rules (and DOM elements) provides a significant performance boost due to how much less the browser will have to work on the process of calculating the stylesDue to this code reduction, writing better selectors and removing unused CSS, the file size will decrease automatically

(2) It is also recommended to don’t make too many consistent changes to an element’s styles in JavaScriptInstead, add a class to the element (use JavaScript) containing the new styles to make these changes – this will avoid unnecessary reflows.

(3) You will like avoid Layout Thrashing also (forced synchronous reflows) created by opening and changing the layout properties of elements using JavaScript. Learn more about how this kills performance here.

back to menu ↑

Write Better CSS: Tips and Tutorial: benefits

  • The Write Better CSS: Tips and Tutorial tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the Write Better CSS: Tips and Tutorial guide is free.

back to menu ↑

Faq

Tutorial summary of Write Better CSS: Tips and Tutorial

In this guide, we told you about the Write Better CSS: Tips and Tutorial; please read all steps so that you understand Write Better CSS: Tips and Tutorial in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the Write Better CSS: Tips and Tutorial, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the Write Better CSS: Tips and Tutorial tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide Write Better CSS: Tips and Tutorial. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the Write Better CSS: Tips and Tutorial, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “Write Better CSS: Tips and Tutorial”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide Write Better CSS: Tips and Tutorial, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo