Does the order of CSS styles influence the render tree?

Question

Does the order of CSS styles influence the render tree?

Navigation

#1 by (8 votes)
#2 by (7 votes)
#3 by (6 votes)
#4 by (4 votes)

16

During the paint of the document by the browser the order of the properties of the CSS classes can interfere in how we perceive the "assembly" of the page?

Especially on 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 take into consideration when writing CSS? I mean, does the order of attributes in classes interfere with CSSOM and how does the Rendering Tree build from the browser?

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

Example:(consideringtherendertree/slowconnections/performanceandUX/UI)

Let'ssaywehavethefollowingCSSthatwasspelled"randomly" without any concern about 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 constructed:

.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 care in ordering these attributes within the classes, do they influence how the Rendering Tree and page paint work? Is there any good practice?

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

Or does not it exist, is it totally irrelevant and should not waste time on it?

OBS: I know that most likely each browser can understand this in a different way, so I do not make any distinction about a browser or another one ok, any information is valid.

html css dom cssom

asked by anonymous 03.09.2018 / 16:34

4 answers

How to test null values in JavaScript Object.create or new Object () in JavaScript? What's the difference between the two?

score 8 · Answer 1

I had already asked myself this question before :)

On this similar OS question, the answers say no: Are there speed benefits of putting CSS attributes in alphabetical order?

Although I have nothing based on an official documentation or link, I believe it does not really affect performance in rendering the page.

One concrete fact that makes me believe this is that CSS organization tools (such as CSS Tidy ) have the option to format and sort statements, which, if there was even prioritization, would be a big mistake to organize.

In the css-tricks site, there is a post with a search on how people constum organize their CSS regarding the declaration of attributes, and also there is nothing mentioning the rendering time in the order of the attributes: poll results: how do you order your css properties /

It is inconclusive, but based on these answers, and on how optimization tools behave when dealing with style files, I believe there really is no difference in rendering or rendering of the tree according to the order that the attributes are declared.

score 7 · Answer 2

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

In Tableless, has a somewhat old article does not talk about performance but suggests some good practices and even talks about logical ordering of parameters.

Thinking about organization I follow the logic thinking of the block from the outside and finish with details, borders, transitions, etc.

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

score 6 · Answer 3

According to article Quantum Up Close: What is a browser engine? >, the browser engine reads the entire CSS style sheet so you can finally use the style engine and get the CSS to apply to the DOM that was created by the HTML parser .

So a superficial interpretation, without taking into account nuances of the development of a particular browser, would be that the browser uses the CSS parser in the style sheet for complete, and only at the end of the parse , use the style engine .

Then no . There are no consequences by randomly sorting CSS properties.

However, even if it does not significantly affect the performance of the project, you should consider the organization of this project fragment, in order to make it easier to read the sheet. Here are some articles on the topic:

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

6 Strategies to improve the organization of your CSS - Tableless

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

For example: width property next to the height property because both specify dimensions.

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

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

For example: Properties such as 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 should come first. And, finally, properties like cursor and z-index , which affect only the element in question, should appear.

The order chosen by the author is:

Display
Display
Display properties
padding )
Visual properties , background , border , box-shadow
Font-size , font-family , text-align text-transform )
Other properties , overflow , z-index )

score 4 · Answer 4

I had asked myself the same question a few times ago, and I was looking for what I understood what can influence in relation to loading and "page weight" in general are "functions / drawings" of elements directly in CSS and CSS lots of grids, for example:

Create an animation within CSS
Make a CSS full of bad practices (Putting all style of all pages into a single file causing it to occupy a large size and need to be loaded on 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 becomes unusable "weighing" unnecessarily.

Good Practices

In good practices CSS and JS's are divided for each type of need below we have an example of CSS with good practices (Template removed from the site link ) executingcodesinthiswayyourapplicationwillnotalwaysbereadeveninlowlatencyconnections,becauseeachstyleisseparatedforitsparticularfolderoforiginandnecessity.

Youcanalsotakealookatwhatinfluencestheloadofthepageonthislink: link