I am also most comfortable with the class selector. Although you don't know at which level to use class, class is much clearer than tags if it has clear semantics.

html semantic tagging is a good habit and is helpful for things like SEO,-assisted visual impairment. But it is not good for CSS.

• now the html level is generally very deep, according to your writing, embedded N multi-layer, the code is not elegant a > b > c > d > e.
• reusability is almost zero. I have a right arrow class, that can be used everywhere, write at a hierarchical level, and it's almost impossible to reuse
.
• is too coupled to html. Html to change the tag, css to change, change location, but also to change, add an element, may also have to change, but also one level to find the past, too tired.

so I think it's better to label semantic words with css's class.

first of all, your idea is unreliable. Then analyze it point by point:

1. there is no conflict between modular development and the use of class names, which are much more readable, especially for others and you in the future to understand the HTML structure.
2. such a small number of bytes has little impact on the product, any picture is not handled well, add a few hundred kilograms, top a complete project. Not to mention gzip.
3. fixed structure is suicide, young man. Future maintenance will be troublesome. Semantics is supposed to be followed, but there is no conflict between following semantics and using clearer class names. HTML a total of more than 100 tags, excluding the declaration of print style, special functions, in line with the semantics and the structure of only a dozen, want to show a clear structure is almost impossible, must use other auxiliary means, and the class name readability is obviously stronger than nth-child .

A few suggestions by the way:

1. if you find it troublesome to write HTML, you can try pug
2. think about the long term when writing code, don't just look at the present

first of all, I also think that the class selector is good, and secondly, semantics should be taken into account. (unexpectedly, I was invited to answer. I was not very frightened. I was daring and nonsense.)

html main structure, css main style, semantic tag personally feel like an outline, easy for people to read and machine to find. When organizing a page outline, you can use semantic tags as much as possible to express the overall structure clearly.

about the design of each module or the recommended class selector, whether it is reusability or semantics, it is better to be a class selector

• think about it from the perspective of Components, name it after two words (.article-card article card)
The Elements, in
• Components is named after one word (.article-card .field)
• both Components and Elements may have Variants, underlined (.article-card-small
  .field-red)
• Components can be nested within each other

Note: 1. Components (component), Elements (element), Variants (variant) is similar to BEM's Block, Element, Modifier (modifier)

2. Components should be reusable in different contexts, so avoid setting the following properties:

    Positioning (position, top, left, right, bottom)
    Floats (float, clear)
    Margins (margin)
    Dimensions (width, height) 

3, avatar and logos should be set to a fixed size

4. If you need to locate a component, it should be handled in the context (parent element) of the component. For example, in the following example, widths and floats are applied in list component (.article-list) rather than component (.article-card) itself.

the above are just some big truths. I would like to make a bold and targeted guess about the description of your problem.
1, the question on best practice is that radish and green vegetables have their own preferences, but can not be kidnapped in the mainstream framework;
2, this is a question of proficiency, you have to find
3, tags plus pseudo classes such as span:nth-of-type (2) not to be sure it is the second span tag of the parent element, or to find the parent element, isn't it? And is it really good when you are faced with a bunch of identical tags and numbers, and then the parents are all section? I feel that you are changing other people's code, so it is not smooth.
Note: the dense div you mentioned is probably written at the back end. Ul/h1/span/p itself, these are semantic tags. Even if you use a class selector, the most important thing for using
is that the class name is smart, and it is convenient to achieve css dynamic effect.
and other components
the most common ones are active classes to achieve state switching and animated. There are also the following component style changes, just add the row class

.prodcut-list {
  padding: 0.07rem 0.07rem;
  overflow: hidden;
  width: 100%;
  .product-item {
    padding: 0.07rem;
    width: 50%;
    float: left;
    
    .product-info {
      box-shadow: 2px 3px 4px -sharpf7f7f7;
      border-radius: 0.03rem;
      padding: 0 0 .1rem;
      
      .p-img {
        padding-top: 100%;
        background: url(//timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534855844770&di=35ecd715771d17f496bda394d0b1fb3a&imgtype=0&src=http%3A%2F%2Fimage20.it168.com%2F201403_800x800%2F1782%2Fc3af48b5d10b28a4.jpg)
          no-repeat center/cover;
      }
      .p-info {
        .title {
          display: flex;
          align-items: center;
          padding: 0.05rem;
          img {
            width: 0.36rem;
            height: 0.36rem;
            border-radius: 50%;
            margin-right: 0.08rem;
          }
        }

        .column {
          display: flex;
          align-items: center;
          justify-content: space-around;
          span {//
            font-size: 0.14rem;
            color: -sharp999;
          }
          .tprice {//
            font-size: 0.15rem;
            color: -sharpfa5e6a;
          }
        }
      }
    }
    &.row{//
        width: 100%;
        float: none;
      .product-info {
        display: flex;
      }
      .p-img {
        width: 1.14rem;
        height: 1.14rem;
        padding-top: 0;
        flex: none;
        margin-right: .1rem;
      }
    }
  }
}

in addition, in terms of performance, the
CSS selector matches rules from right to left. As long as there are other selectors to the left of the current selector, the style system continues to move to the left until a selector that matches the rule is found, or exits because of a mismatch. We call the rightmost selector a key selector. If they are all tags like an or span, the browser must traverse all the a tags on the page and match them to the left to the parent. If the hierarchy is clear, try to replace the descendant selector with a descendant selector, and the offspring will only find one layer of parents up, and the descendants will always find the root element.
I always talk a lot of nonsense. Thank you for reading it.

have you learned about BEM? you can refer to it. Personally, I feel that BEM is organized in a good way

you can use less sass or something to write and compile into css,. This meets your needs

class is that class names can be concatenated. Bootstrap is a good example.

although there are many class names, the controllability is quite good.

tag will have a global impact if you are not careful. Not recommended,

you should be able to feel

class is more appropriate.

then take a look at the naming convention.

• Hump naming
• BEM

can be written in sass, and then compiled into css