原文作者：Jonathan Lehman
原文地址：http://technology.customink.com/blog/2014/09/19/single-class-vs-multi-class-css/
像我之前在有關(guān)模塊化CSS文章中提到的那樣，寫Sass/CSS很困難餐茵。檢查項(xiàng)目里用到的標(biāo)簽，是判斷項(xiàng)目中結(jié)果代碼是否簡潔并且結(jié)構(gòu)良好的最好的方法之一。過度嵌套的元素導(dǎo)致過度嵌套的CSS并且當(dāng)你發(fā)現(xiàn)很難明白類名的意思谍椅，那么CSS本身很可能缺乏語義批狱。隨著我們?cè)诿總€(gè)元素上增加越來越多的類，代碼可讀性越來越差，簡直是雪上加霜。如果我們可以只寫一個(gè)類就能實(shí)現(xiàn)元素需要的所有樣式的話呢？
單類CSS
讓我們?cè)囈辉噯晤惖姆椒ㄆ锶摺榱俗尷雍喢魑覀冑x予一個(gè)按鈕樣式（為了達(dá)到這個(gè)例子的目的我們將使用SUITCSS來讓我們的CSS語義化）。我們假設(shè)有不同類型的按鈕先煎，或者一個(gè)相同按鈕的變形贼涩，讓我們給每個(gè)想要類型的按鈕寫一個(gè)單類。
首先我們構(gòu)建想要生成的HTML模型薯蝎，然后在模型基礎(chǔ)上構(gòu)造CSS遥倦。
<button class="Btn">Just a Button</button>
<button class="Btn--disabled">Disabled Button</button>
<button class="Btn-secondary">Secondary Button</button>
<button class="Btn-secondary--disabled">Secondary Disabled Button</button>
哇，這讓DOM樹非常簡潔占锯，通過使用SUIT袒哥，我們的類名非常語義化并且易于理解缩筛。
.Btn {
background-color: blue;
border-radius: 5px;
color: white;
padding: 0.5rem;
}
.Btn--disabled {
background-color: grey;
border-radius: 5px;
color: white;
padding: 0.5rem;
}
.Btn-secondary {
background-color: white;
border-radius: 5px;
color: blue;
padding: 0.5rem;
}
.Btn-secondary--disabled {
background-color: light-grey;
border-radius: 5px;
color: blue;
padding: 0.5rem;
}
<a class="sb-Btn sb-Btn--secondary sb-Btn--responsive">Play with this example in Sassmeister</a>
我們寫的CSS很繁復(fù)。我們可以通過Sass之類的預(yù)處理器進(jìn)行改進(jìn)堡称。
%Btn-base {
border-radius: 5px;
padding: 0.5rem;
}
@mixin ColoredBtn($color, $background-color) {
@extend %Btn-base;
color: $color;
background-color: $background-color;
}
.Btn {
@include ColoredBtn(white, blue);
// .Btn--disabled
&--disabled {
@include ColoredBtn(white, grey);
}
// .Btn-secondary
&-secondary {
@include ColoredBtn(blue, white);
}
// .Btn-secondary--disabled
&-secondary--disabled {
@include ColoredBtn(blue, light-grey);
}
}
<a class="sb-Btn sb-Btn--secondary sb-Btn--responsive">Play with this example in Sassmeister</a>
Sass一般比等價(jià)的CSS更加簡潔瞎抛，讓我們更一進(jìn)步評(píng)估這個(gè)單類方法。到現(xiàn)在為止它很吸引人却紧，但是它在不同尋常的例子中表現(xiàn)如何呢桐臊？
你也許已經(jīng)注意到了單類存在的隱患，.Btn-secondary--disabled啄寡。一開始也許你很滿意，甚至覺得可以如此簡單得通過Sass構(gòu)建樣式便于打包使用單類的想法非常聰明哩照。潛在的問題是如果我們有更多可以組合的類挺物？我們需要?jiǎng)?chuàng)建一個(gè)單類來代表每一個(gè)構(gòu)造。如果我們想要增加一個(gè)修飾符來控制按鈕的尺寸飘弧，我們會(huì)使用這樣的排列例如.Btn-secondary--small--disabled以及.Btn-secondary--large--disabled识藤。或者也許是.Btn-secondary--disabled--large?我們既不需要記住所有修飾符的順序次伶，也不需要為相同的CSS生成更多CSS來代表每個(gè)順序痴昧。單類方法開始失去它的吸引力」谕酰可選的方法是通過多類方法中的多類來構(gòu)建我們的樣式赶撰。
多類CSS
比起用單類來表示每個(gè)元素的所有狀態(tài)，我們可以考慮使用多類來達(dá)到想要的效果柱彻。我們依然使用上面按鈕的例子豪娜。再一次，首先我們從HTML開始哟楷，可以用來當(dāng)CSS的模板瘤载。
<button class="Btn">Just a Button</button>
<button class="Btn Btn--disabled">Disabled Button</button>
<button class="Btn Btn-secondary">Secondary Button</button>
<button class="Btn Btn-secondary Btn--disabled">Secondary Disabled Button</button>
基于這個(gè)HTML結(jié)構(gòu)，多類Sass寫法如下卖擅。
.Btn {
background-color: blue;
border-radius: 5px;
color: white;
padding: 0.5rem;
// .Btn-secondary
&-secondary {
background-color: white;
color: blue;
}
// .Btn--disabled
&--disabled {
background-color: grey;
}
}
<a class="sb-Btn sb-Btn--secondary">Play with this example in Sassmeister</a>
關(guān)于多類方法你會(huì)注意到的第一件事是需要的Sass代碼明顯更少鸣奔。這是因?yàn)槲覀儾恍枰獙?duì)每個(gè)可能需要的樣式組合生成CSS。取而代之我們可以創(chuàng)建最小塊并且用它們構(gòu)建我們期望的任何樣式組合惩阶。
多類CSS很好得增添了寫語義化模塊化CSS的特性挎狸。如果可組合性沒有讓你心動(dòng)那么只要看一下我們兩個(gè)Sass例子生成代碼的區(qū)別。
單類生成的CSS
.Btn, .Btn--disabled, .Btn-secondary, .Btn-secondary--disabled {
border-radius: 5px;
padding: 0.5rem;
}
.Btn {
color: white;
background-color: blue;
}
.Btn--disabled {
color: white;
background-color: grey;
}
.Btn-secondary {
color: blue;
background-color: white;
}
.Btn-secondary--disabled {
color: blue;
background-color: light-grey;
}
多類生成的CSS
.Btn {
background-color: blue;
border-radius: 5px;
color: white;
padding: 0.5rem;
}
.Btn-secondary {
background-color: white;
color: blue;
}
.Btn--disabled {
background-color: grey;
}
結(jié)論
這個(gè)平凡例子中的Sass以及生成的CSS都更簡潔精煉断楷。想象下對(duì)于一個(gè)大型網(wǎng)頁應(yīng)用需要生成多少的單類伟叛，每個(gè)可能樣式組的組合都有一個(gè)類。這會(huì)以指數(shù)增長脐嫂，很快會(huì)變得不可管理统刮。等價(jià)的多類會(huì)生成極小塊并允許用戶在DOM上通過多種方法結(jié)合這些類紊遵，這是一個(gè)更加靈活的方法。單類同樣難以擴(kuò)展侥蒙，這在任何應(yīng)用中都是很糟糕的更不要說在CSS框架里暗膜。
雖然單類方法一眼看上去很吸引人，但請(qǐng)?jiān)跊_動(dòng)之前好好考慮一下鞭衩。長遠(yuǎn)來看用多類方法會(huì)有收益并且能幫助你編寫簡潔而強(qiáng)大的類來完成任何可能有的樣式需求学搜。
后續(xù)閱讀
我非常推薦這篇Nicolas Gallagher寫的關(guān)于HTML語義化的文章，這篇文章研究了語義化css论衍，包括多類vs單類的問題瑞佩。
