說實(shí)話，看到這個(gè)題目時(shí)我覺得這有什么好討論的，肯定會(huì)是場(chǎng)一邊倒的討論。因?yàn)閭€(gè)人比較傾向于短命名，簡(jiǎn)單優(yōu)雅，可能是出于程序員的潔癖，容不得任何冗余的東西。（和我一個(gè)想法的人應(yīng)該不在少數(shù)吧 ！）

先看下長(zhǎng)命名和短命名的定義：

<!– 長(zhǎng)命名：使用前綴體現(xiàn)上下文環(huán)境的CSS命名方式。 –>
<div class="category">
        <div class="category-hd"></div>
        <div class="category-bd"></div>
        <div class="category-ft"></div>
</div>

<!– 短命名：使用繼承體現(xiàn)上下文環(huán)境的CSS命名方式。 –>
<div class="category">
        <div class="hd"></div>
        <div class="bd"></div>
        <div class="ft"></div>
</div>====

會(huì)上大家先是給雙方各列了一堆優(yōu)缺點(diǎn)，結(jié)果不相上下。

然后從性能和可維護(hù)性上進(jìn)行了詳細(xì)的爭(zhēng)論。

性能分為下載性能(速度)和渲染性能，大家認(rèn)為：

1. 下載性能可能是短命名略勝一籌，因?yàn)槲募?huì)稍小些；
2. 渲染性能則是長(zhǎng)命名好些，因?yàn)镃SS中通常短命名我們用類似.box .hd {}定義樣式，而長(zhǎng)命名直接是.box-hd {}，pagespeed認(rèn)為選擇器長(zhǎng)度會(huì)影響渲染性能。
(注：其實(shí)平時(shí)工作中這兩點(diǎn)都會(huì)被忽略。gzip可以進(jìn)一步減少第一個(gè)問題的差距，而由此引發(fā)的渲染性能也是微乎其微)

然后大家就可維護(hù)性進(jìn)行了討論，這次支持長(zhǎng)命名的人較多。

1. 長(zhǎng)命名給人較為可靠的感覺；
2. 長(zhǎng)命名較短命名發(fā)生沖突的幾率低很多；
3. 可復(fù)用的內(nèi)容通過短命名定義，無可爭(zhēng)議；
…
最后是使用場(chǎng)景，玉伯借用YAHOO首頁的例子牽頭，大家討論，總結(jié)如下：(主要依據(jù)可維護(hù)性)

1. 框架級(jí)樣式用短命名，比如盒模型、柵格；
2. 通用樣式用短命名，比如.hidden、.clearfix；
3. 應(yīng)用級(jí)樣式用長(zhǎng)命名，比如淘江湖項(xiàng)目的通用樣式都加上“sns”前綴(有.sns-avatar、.sns-box等)；
4. 頁面級(jí)樣式用長(zhǎng)命名，比如類目模塊，可能包含category-hd、category-bd、category-bd-tips等；
5. 嵌入式應(yīng)用用長(zhǎng)命名，因?yàn)榭赡軙?huì)被嵌入到任何復(fù)雜環(huán)境中，比如開源編輯器、Google的各種應(yīng)用(map, adsence, gmail…)
以上結(jié)論有個(gè)前提：就是頁面是多人(包括后期的維護(hù)人員)協(xié)作的，一個(gè)人的頁面(如Blog)不在考慮范圍之內(nèi)。

====

歡迎補(bǔ)充指正。