class 的好處是 可以類名拼接。 bootstrap 就是很好的例子。

雖然類名多點(diǎn)，但是可控性還是比較爽的。

標(biāo)簽的話 一不小心會(huì)有全局的影響。不推薦，

當(dāng)項(xiàng)目頁面100+ 的時(shí)候 你應(yīng)該能感受到了

class是比較合適的。

然后了解一下命名規(guī)范。

• 駝峰命名
• BEM

了解過BEM 嗎，可以參考，個(gè)人感覺 BEM這樣的組織方式不錯(cuò)

你可以使用 less sass 什么的來寫, 寫完編譯成 css, 這樣都滿足你需求了

先說你的想法不靠譜。然后逐點(diǎn)分析：

1. 模塊化開發(fā)和使用類名并不沖突，類名可讀性強(qiáng)的多，尤其有利于別人和未來的你理解 HTML 結(jié)構(gòu)。
2. 這么一點(diǎn)字節(jié)數(shù)對(duì)產(chǎn)品的影響微乎其微，隨便一張圖片沒處理好，增加幾百K，頂一個(gè)完整的項(xiàng)目了。何況還有 gzip。
3. 固定結(jié)構(gòu)就是自尋死路啊少年……未來維護(hù)會(huì)麻煩死的。語義化本來就要遵守，但是遵守語義化和用更清晰的類名并不沖突。HTML 總共100多個(gè)標(biāo)簽，排除掉聲明打印樣式的、特殊功能的，符合語義并且表示結(jié)構(gòu)的只剩十幾個(gè)，想表現(xiàn)清晰的結(jié)構(gòu)幾乎不可能，必須用其它輔助手段，而類名可讀性明顯強(qiáng)于 nth-child。

順便給幾個(gè)建議：

1. 如果你覺得寫 HTML 麻煩可以試試 pug
2. 寫代碼要從長(zhǎng)期考慮，不要只看眼下

可以用sass來寫，寫完編譯成css就行了

我用著也是類選擇器最順手。用class雖然不知道在哪個(gè)層級(jí)，但是class如果有明確的語義，相比標(biāo)簽要清晰很多。

html用語義話的標(biāo)簽是個(gè)好習(xí)慣，對(duì)SEO，輔助視覺障礙之類的都有幫助。 但用作CSS來說，卻不好

• 現(xiàn)在的html層級(jí)一般都很深，按照你的寫法，內(nèi)嵌N多層，代碼并不優(yōu)雅 a>b>c>d>e.....
• 可復(fù)用性幾乎為0。我一個(gè)右箭頭的class，可以到處用，按照層級(jí)寫，幾乎不可能重復(fù)用
• 和html耦合性太高了。html換個(gè)標(biāo)簽，css要改，換個(gè)位置，更要改動(dòng)，增加個(gè)元素，也可能要改，還要挨個(gè)層級(jí)找過去，太累了。

所以我覺得 用語義話的標(biāo)簽加css的class 這樣比較好

首先我也覺得類選擇器好，其次語義化也要兼顧。（居然有人邀請(qǐng)我回答，不甚惶恐，在下斗膽，廢話一篇）

html主結(jié)構(gòu)，css主樣式，語義化標(biāo)簽個(gè)人覺得就像是大綱，方便人看和機(jī)器找，組織頁面大綱的時(shí)候可以盡量使用語義化標(biāo)簽，清晰的表達(dá)出整體結(jié)構(gòu)。

關(guān)于各模塊的設(shè)計(jì)還是推薦類選擇器，此處不管是復(fù)用性還是語義化都是類選擇器更好

• 以 Components 的角度思考，以兩個(gè)單詞命名（.article-card文章卡片）
• Components 中的 Elements，以一個(gè)單詞命名（.article-card .field）
• Components 和 Elements 可能都會(huì)擁有 Variants，以中劃線（.article-card-small
  .field-red）
• Components 可以互相嵌套

注：1、Components（組件）, Elements（元素）, Variants（變體）類似BEM的Block、Element、Modifier（修飾符）

　　2、Components 應(yīng)該在不同的上下文中都可以復(fù)用，所以應(yīng)避免設(shè)置以下屬性：

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

　　3、頭像和 logos 這些元素應(yīng)該設(shè)置固定尺寸

　　4、倘若你需要為組件設(shè)置定位，應(yīng)將在組件的上下文（父元素）中進(jìn)行處理，比如以下例子中，將 widths和 floats 應(yīng)用在 list component(.article-list) 當(dāng)中，而不是 component(.article-card) 自身。

以上只是些大道理，關(guān)于你的問題描述，以下我大膽的針對(duì)性的猜測(cè)一番。
1、關(guān)于最佳實(shí)踐的問題本就是蘿卜青菜各有所愛，但是不能以主流框架去綁架語言；
2、這是熟練度問題，該找還得找
3、標(biāo)簽加偽類如span：nth-of-type(2)不就確定是父元素的第2個(gè)span標(biāo)簽，還是要找父元素不是嗎？而且當(dāng)你面對(duì)一堆一模一樣的標(biāo)簽和數(shù)字，然后父級(jí)還都是section的時(shí)候，真的好嗎？我感覺你是在改別人的代碼，所以才不順暢吧
說明：你說的密密麻麻的div怕是后端寫的吧，本身ul/h1/span/p這些都是語義化標(biāo)簽，就算用類選擇器，這些也都是用上的
最關(guān)鍵的是類名比較靈動(dòng)，可以方便實(shí)現(xiàn)css動(dòng)效，和組件變體等
最常見的就是active類實(shí)現(xiàn)狀態(tài)切換以及animated之類，還有如下組件樣式變換只需添加row類

.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 #f7f7f7;
      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 {//默認(rèn)統(tǒng)一樣式
            font-size: 0.14rem;
            color: #999;
          }
          .tprice {//個(gè)別加類區(qū)分
            font-size: 0.15rem;
            color: #fa5e6a;
          }
        }
      }
    }
    &.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;
      }
    }
  }
}

另外，從性能方面來說
CSS 選擇器是從右到左進(jìn)行規(guī)則匹配，只要當(dāng)前選擇符的左邊還有其他選擇符，樣式系統(tǒng)就會(huì)繼續(xù)向左移動(dòng)，直到找到和規(guī)則匹配的選擇符，或者因?yàn)椴黄ヅ涠顺?。我們把最右邊選擇符稱之為關(guān)鍵選擇器。如果都是像a、span之類的標(biāo)簽的話，瀏覽器必須遍歷頁面中所有的 a 標(biāo)簽，并向左匹配直至父級(jí)，層級(jí)明確的情況下盡量用子代選擇器代替后代選擇器，子代只向上找一層父級(jí)，而后代會(huì)一直找到根元素。
我一向廢話比較多，感謝看完的同學(xué)。