關(guān)于單類和多類的爭(zhēng)論也許是一個(gè)偽命題缓熟，這個(gè)權(quán)衡上是見仁見智的脆炎，但是畢竟是在實(shí)習(xí)過(guò)程中經(jīng)常碰到的問(wèn)題，還是稍加總結(jié)一下鞋邑。
Jonathan Lehman在文中指出诵次，單類的方法問(wèn)題在于：
- 當(dāng)一個(gè)元素的狀態(tài)不斷增加，修飾符會(huì)拖得很長(zhǎng)枚碗，例如
.Btn-secondary--small--disabled逾一，這時(shí)單類就失去了優(yōu)勢(shì)。 - 并且在大型網(wǎng)站中肮雨，單類會(huì)變得非常多而難以維護(hù)遵堵。
下面借用了大漠博客中的例子：
多類寫法
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;
}
}
結(jié)論是，最好的方法是結(jié)合實(shí)際情況怨规，適當(dāng)情況可以混合使用陌宿，以達(dá)到最好的效果。
