※ 本文轉寄自 tomin.bbs@tomin.twbbs.org

---

---

我是兩者都用，不過如果只能選一種的話，我會選n大的作法，
原因是不同case往往需要微調，要窮舉、定義所有可能，不太可行。

-----------------------------------------------------------------------
回顧一下

1.老闆的作法
.floatL{float:left}
.color12{color:#112233}
.paddingA5{padding:3em}
.bgC3{background:#445566}

<div class="floatL color12 paddingA5 bgC3"></div>
<div class="floatL color12 paddingA5 bgC3"></div>
<div class="floatL color12 paddingA5 bgC3"></div>
<div class="floatL color12 paddingA5 bgC3"></div>

2.鄉民n大的作法
.top_sales{
float:left;
color:#112233;
padding:3em;
background:#445566;
}
<div class="top_sales"></div>
<div class="top_sales"></div>
<div class="top_sales"></div>
<div class="top_sales"></div>

------------------------------------------------------------------------

先說結論，後者比較好。以下是評論：

1.首先前者的命名不太好　至少要命名成color112233　或red, bgBlue等

　可惜的是，就算class="color112233 bg112233 padding3em margin4px"
　瀏覽器不能自動轉成css，還是要事先定義一組css，不然我會認真考慮這種寫法。


2.考慮到維護、修改

假設客戶要求將文字綠色換成草地綠，藍色換成天空藍，
前者可能要多次取代html，後者只要改css的2個地方。

更何況html可能不只一個，那就暈了、悲劇了。


3.考慮到分工、權限

通常css會是獨立的檔案，因為要讓瀏覽器能快取等因素。

如果公司有美工人員，有些人就可以只管那些css檔，
而不需要去動到html, php等等，css改爛不會死，但php改爛可不好玩。


4.套用佈景主題

相信大家都知道blog大多可以輕鬆換版型與樣式　王建民風、海洋風、Open將風等
如果今天寫死成海洋風<div class="colorSeaBlue bgSea"></div>

那我要改套用「綠意盎然」或「粉紅佳人」時，不是很尷尬嗎？


5.過時的瀏覽器 (相容性)

IE6處理多個class時　有殘缺　
承上，寫成.colorSeaBlue.bgSea時，IE6只認得.bgSea，
亦即<div class="abcd bgSea"></div>在IE6會符合，但其實不然。

因此，class我的習慣儘量只給一個，因為我不知道還有沒有別的問題。


6.可讀性、出錯率

n大有提到用前者的方法，會很難讀懂css的語義。我再舉個例子。
假設要畫地圖，外圍是淡色，愈中心愈深色。

前者寫法
.blue{ color: lightblue}
.blue .blue{ color: blue}
.blue .blue .blue{ color: darkblue}
<div class="blue">外圈
  <div class="blue">內圈</div>
     <div class="blue">核心</div>
  </div>
</div>

若是後者　可能會寫成
.Taiwan .Taipei .TaipeiCity{color: darkblue}就好懂多了　
而且不容易出錯　你能想像定義了一堆blue的css和html　究竟會發生什麼事嗎？



大致上只想到這些。至於前者有沒有優點……，如果css定義得很完整的話，
開發速度也許會很快，因為只要專心寫html，不用一直在html和css間切換。

--


--