单类 vs 多类

关于单类和多类的争论也许是一个伪命题，这个权衡上是见仁见智的，但是毕竟是在实习过程中经常碰到的问题，还是稍加总结一下。

Jonathan Lehman在文中指出，单类的方法问题在于：

1. 当一个元素的状态不断增加，修饰符会拖得很长，例如.Btn-secondary--small--disabled，这时单类就失去了优势。
2. 并且在大型网站中，单类会变得非常多而难以维护。

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

多类写法

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;
      }
    }

结论是，最好的方法是结合实际情况，适当情况可以混合使用，以达到最好的效果。