As strongly influenced by the css cascade for performance? And how to deal with this?

Question

As strongly influenced by the css cascade for performance? And how to deal with this?

Hi. Make a big project with a 10-kami css files for each individual category of the website. Use SASS with the scss Syntex.
There are many guides and video tutorials on the preprocessors, they all say that they increase the speed in the layout (it really is), etc., but with all its advantages, the preprocessors for a draw puttee of selectors, and on this ground I have raised the question: how does the nesting in the compiled CSS to publish on the speed of the rendering and site performance?

Here are 3 example tell me which one is more preferable to use and take it for a rule, or show the CORRECT VERSION

Option 1:

.header {
 .logo {
 background-color: #ccc;
 a {
 color: #000;
 text-decoration: none;
 img {
 display: block;
 width: 100%;
}
}
}
}

Option 2:

.header {
 &-logo {
 background-color: #ccc;
 a {
 color: #000;
 text-decoration: none;
}
 img {
 display: block;
 width: 100%;
}
}
}

Option 3:

.header {
 &-logo {
 background-color: #ccc;
 &-a {
 color: #000;
 text-decoration: none;
}
 &-img {
 display: block;
 width: 100%;
}
}
}

gennaro.Heidenreich asked July 8th 19 at 15:42

Related questions

More answers about "As strongly influenced by the css cascade for performance? And how to deal with this?"

1 answer

Annabelle_Schoen answered on · Accepted Answer · 2019-07-08T15:44:20.708Z

Annabelle_Schoen answered on July 8th 19 at 15:44

Solution

The most preferred option 3, since in this case it is assumed that each element will have a class that meets almost all of the major methodologies, and dearly loved me SMACSS.

The performance of the cascade is affected directly, because, firstly, increasing the size of the css file blocking the rendering, and second, the reading of the selectors and the search in the tree right to left, i.e. in the embodiment 1 will first find all references and images, and then collected heap violents ones that are in the hat. But ideally, of course, will be something like this:

.logo {
 background-color: #ccc;
}
.logo-link {
 color: #000;
 text-decoration: none;
}
.logo-img {
 display: block;
 width: 100%;
}

No cascade (the size of the output css is minimized), the loss of productivity in the sample is also minimized.

Well, Yes, I'm talking about reading right to left you know, just thought maybe something has changed over time, all the time "YouTube GURU" mold that came. As for Your example, fully support You, such writing also allows you to reuse these elements in the project and having them in the template elements, for example. Thanks for the reply. Read about SMACSS - gennaro.Heidenreich commented on July 8th 19 at 15:47

Tell me, how to increase the rendering duration between the 100 classes of linear and 10 classes in which invested in 10 classes? well, or let it be 500 to 50, at 10. One malaysiano a fraction of a second? - danny43 commented on July 8th 19 at 15:50

and, the user on the apple watch website wants to see... there safely the difference in a thousand, and multiply. Although a serious test on performance I wouldn't mind. - Annabelle_Schoen commented on July 8th 19 at 15:53

: also, from Amazon, for example, once the second load is 1.6 billion dollars a year. Therefore, 1006000000 / 1000 = 1006000 dollars. In other words, one thousandth of a second could potentially save over one million dollars! Think about it. - Annabelle_Schoen commented on July 8th 19 at 15:56

: You propose to spend your time to Amazon earned more? No, I want to think about your time and your earnings. - danny43 commented on July 8th 19 at 15:59

: now imagine that the customer reads your messages =) - sherman_Sip commented on July 8th 19 at 16:02

: what? So I have to act like a nigger? If he wants to optimize it for me the only question is the money. And if you want to all was included, then let him go fuck. - danny43 commented on July 8th 19 at 16:05

: and so we live, you come to the hospital, and there doctor, "if you want to cure, let him pay, and the symptoms will withdraw and let live." - sherman_Sip commented on July 8th 19 at 16:08

: Well, you also give an example..
If the person paying for the 50$ , respectively, then it is 50$ gets.
When you come to the store to buy a kilo of oranges, you get a kilo of oranges, but not as much as you need so you can become orange.
Now everyone wants everything for free....and without the desire to spend money on it.
You cite the example of Amazon, which where every second million dollars...
but you did not provide the amount of how much Amazon spends on developing / supporting, etc.
To reduce their costs of such are used..
Even though you yourself think what you're saying, and then write about how to live. - Jillian_Goodw commented on July 8th 19 at 16:11

Have all your proportions.The man is clearly asking the question is not about the ten seconds.. - Jillian_Goodw commented on July 8th 19 at 16:14

a person pointed out specific ranges at which the question of performance was relevant - Annabelle_Schoen commented on July 8th 19 at 16:17

: so then all sorts of scribbled absolutely hellish css with a bunch of cascades and rewrites, and I wonder why sites inhibit - Annabelle_Schoen commented on July 8th 19 at 16:20

Came to that has created the scss lint and made the maximum nesting 2 selector. Code is easy to read, + when measuring application performance, the difference is a fraction of a second - gennaro.Heidenreich commented on July 8th 19 at 16:23