When writing CSS, will too many class levels affect the rendering performance of the page? _html/css_WEB-ITnose

Just give an example, such as:

<div class='first'>     <div class='first-one'>            <div class='first-two'>                     <span class="first-span">                           test                           <small>small</small>                      </span>             </div>      </div></div>

css:
.first .first-one .first-two { margin: 0px; }
.first .first -one .first-two .first-span small { color: black; } // Is there any performance problem with writing like this?

Because I am not a front-end person, I have always been troubled by this problem. The company doesn't have anyone who specializes in front-end writing, so I came here to ask.

Reply to the discussion (solution)

For the front end, CSS focuses on code simplicity and shortening it as much as possible. If the code is too long, it will definitely affect the loading speed.


Generally speaking, when writing styles, it is best not to have more than 3 levels, as long as you can find the corresponding tag to set the style.

In addition, there are too many nested levels , too poor readability for other people

Theoretical impact. But it can be ignored. It's so long to write mainly because it looks awkward.

Basically this will not happen!
The important thing is to consider readability!

There will be performance issues. But a small amount of use will not have any impact

CSS is not difficult, but it is still not easy to write well. In order to facilitate reading and maintenance, there is also a logical relationship between the page structure , needs a good definition