Does the order of CSS styles influence the render tree?

Question

During the Paint from the document by the browser the order of the properties of the CSS classes may interfere in how we perceive the page’s "assembly"?

Especially in slower connections, we literally see the styles being applied to the elements, so the order of the properties we use in the classes should be something to consider when writing the CSS? I mean, the order of attributes in the classes interferes with CSSOM and how the Render Tree is built by the browser?

I saw this image and wondered if the order of CSS styles can interfere with Paint page...

Example: (considering the slow rendering/connections/performance and UX/UI tree)

Let’s say we have the following CSS that was written "randomly" with no concern for the attributes.

.container {
    background: rgba(0,0,0,0.25);
    width: 100%; 
    height: 100%;
    text-align: center;
    padding-top: 100px;
    display: block;
    position: absolute;
    z-index: 2;
    font-family: consola;
    font-size: 1rem;
}

And we have another CSS that was written thinking in the order that the layout of the elements is built:

.container {
    display: block;
    position: absolute;
    width: 100%; 
    height: 100%;
    padding-top: 100px;
    z-index: 2;
    background: rgba(0,0,0,0.25);
    font-family: consola;
    font-size: 1rem;
    text-align: center; 
}

There should be a care in the order of these attributes within the classes, they influence how the Render Tree and the page’s Paint happens? Is there any good practice?

Which attributes are more important than others in the CSS and which are interpreted with priority or not?

Or it doesn’t exist, it’s totally irrelevant and you shouldn’t waste time on it?

OBS: I know that very probably each browser can understand this in a different way, so I do not distinguish about a browser or other ok, any information is valid.

Answer 1

I’ve asked myself that question before :)

In this similar OS question, the answers say no: Are there speed Benefits of putting CSS Attributes in Alphabetical order?

Although it has nothing based on an official documentation or link, I believe it doesn’t really affect the performance in page rendering.

A concrete fact that makes me believe this, is that organizational tools of CSS (like the CSS Tidy) has the option to format and sort the statements, which, if there was even a prioritization, would be a big mistake to allow organize.

On the css-Tricks site, there is a post with a search on how people arrange their CSS for the declaration of attributes, and there is also nothing mentioning the render time according to the order of attributes: Poll Results: how do you order your css properties/

It’s not conclusive, but based on these responses, and how the optimization tools behave when handling style files, I believe that there really isn’t a difference in rendering or tree processing according to the order the attributes are declared.

Answer 2

Interesting topic, I always believed that the order would not influence but would help in a code reading.

On the Tableless, has a somewhat old article does not speak of performance but suggests some good practices and even speaks of logical ordering of parameters.

Thinking of organization I follow the logic thinking of the outside block inside and finish with details, borders, Transitions etc.

.seletor {
    [posicionamento]
    [tamanho]
    [espaçamentos]
    [fonte e propriedades de texto]
    [plano de fundo]
    [bordas]
    [outros]
}

Answer 3

In accordance with Article Quantum Up Close: What is a browser engine?, the browser engine reads the entire CSS style sheet to then finally use the style engine and take CSS to apply to the DOM that was created by HTML parser.

So a superficial interpretation, without taking into account nuances of the development of a specific browser, would be that the browser uses the CSS parser in the style sheet by full and, only at the end of the process parse, uses the style engine.

So, nay. No consequences by randomly sorting CSS properties.

However, even if it does not significantly affect the performance of the project, the organization of this fragment of the project should be considered, in order to facilitate the reading of the sheet. Here are some articles on the subject:

"Outside In" - Ordering CSS Properties by Importance - Tutsplus

6 Strategies to Improve Your CSS Organization - Tableless

According to the survey released by CSS Tricks, most developers use the organization strategy by type.

For example: Property width near the property height for both specify dimensions.

In addition to grouping by type, there is also the technique used by the writer of the Tutsplus article: the "Outside In".

The method basically consists of ordering the CSS from "inside out", so the name.

For example: Properties like position, float and display control the flow of elements on the page and this also affects other elements around. So, according to the author, this kind of property must come first. And finally, properties like cursor and z-index, that affect only the element in question, must appear.

The order chosen by the author is:

• Layout properties (position, float, clear, display)
• Modeling properties (width, height, margin, padding)
• Visual properties (color, background, border, box shadow)
• Typographical properties (font-size, font-family, text-align, text-Transform)
• Other properties (cursor, overflow, z-index)

Answer 4

I had asked myself the same question a few times ago, and went looking for what I understood what can influence regarding loading and "page weight" in general are "functions / drawings" of direct elements in CSS and CSS too grids, for example:

• Create an animation within the CSS

• Make a CSS full of bad practices (Putting all the style of all pages into a single file causing it to occupy a large size and need to be loaded into all pages)

An example imagine a class(css) that is only called in index.html

but in page2.html you loaded the same css, your class is unusable by "weighing" without need.

Boa Praticas

In good practice the CSS and JS are divided for each type of need below we have an example of CSS with good practices (Template taken from the site https://br.yahoo.com/ ) executing codes in this way your application in general will not be slow even in low latency connections, because each style is separated for its certain folder of origin and need.

You can also take a look at what influences the page load on this link : https://webmasters.stackexchange.com/questions/30439/what-influences-the-loading-of-a-web-page