How should the css hierarchy be regulated?

Code: 

 <div class="container">
    <div class="left">
        <div class="left-con">
            <div class="hidden-scroll">
                <div class="personal">
                    <img src="./images/person.png" alt="">
                </div>
            </div>
        </div>
     </div>
 </div>

question:
find personal, through the selector. If there is only one class in the world, personal, would it be better to have .personal {}?
does this kind of writing seem cumbersome?
.left. Left-con. Hidden-scroll. Personal {

XXX

}
which way is better in terms of css selector performance and post-maintenance?

Css3 front-end html5 css html
Mar.30,2021
there are no levels and deep nesting levels, so you should try your best to avoid them!
  1. there is no hierarchy, the repetition of class names is inevitable, and your ability to name in the postgraduate entrance examination
    2. If the
  2. level is too deep, the client-side css parsing efficiency will be reduced
    3. If the level of
  3. is deep, the priority of css presentation will be raised relatively. For example, the style defined by ul li will take precedence over li presentation. The problem is that if you want to cover those deep-level styles, you have to define deeper-level styles.

so do it on a case-by-case basis, don't be rigid. If you have a special name, you won't repeat it with others, so you can use only one level. For css classes that are suitable for many scenarios, each scene is related to nesting, so use the nesting hierarchy that is necessary for .

the last nagging sentence: don't waste resources for the so-called want to make the level of each element clear, set a very deep level, waste resources!
keep the hierarchy as short as possible, and don't make simple things complicated.

CSS suggestion

Previous: What books should you read to learn about sql optimization, java caching, and distribution?

Next: Does the HttpResponse utility class have the function of proxying ip?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu