單類 vs 多類

關于單類和多類的爭論也許是一個偽命題,這個權衡上是見仁見智的,但是畢竟是在實習過程中經(jīng)常碰到的問題,還是稍加總結一下。

Jonathan Lehman在文中指出,單類的方法問題在于:

  1. 當一個元素的狀態(tài)不斷增加,修飾符會拖得很長,例如.Btn-secondary--small--disabled,這時單類就失去了優(yōu)勢。
  2. 并且在大型網(wǎng)站中,單類會變得非常多而難以維護。

下面借用了大漠博客中的例子:

多類寫法

HTML

    <div class="btn btn--twitter">twitter</div>
    <div class="btn btn--facebook">facebook</div>

CSS

    .btn {
      min-width: 100px;
      padding: 1em;
      border-radius: 1em;
    }
    %twitter-background {
      color: #fff;
      background: #55acee;
    }
    %facebook-background {
      color: #fff;
      background: #3b5998;
    }
    
    .btn {
      &--twitter {
        @extend %twitter-background;
      }
      &--facebook {
        @extend %facebook-background;
      }
    }

單類寫法

HTML

    <div class="btn--twitter">twitter</div>
    <div class="btn--facebook">facebook</div>

CSS

    %button {
      min-width: 100px;
      padding: 1em;
      border-radius: 1em;
    }
    %twitter-background {
      color: #fff;
      background: #55acee;
    }
    %facebook-background {
      color: #fff;
      background: #3b5998;
    }
    
    .btn {
      &--twitter {
        @extend %button;
        @extend %twitter-background;
      }
      &--facebook {
        @extend %button;
        @extend %facebook-background;
      }
    }

結論是,最好的方法是結合實際情況,適當情況可以混合使用,以達到最好的效果。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容