Re: [問題] 關於版型、css的規劃問題

[tomin (藍藍紫黃橘 粉灰白綠咖)]

我是兩者都用，不過如果只能選一種的話，我會選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間切換。

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.122.30.198
→ TonyQ:你把他們兩個想到一個極端了   這兩個作法都不好。
→ TonyQ:#1CDPVpEJ (Web_Design) 我覺得這篇evenwu 講得reuse的part
→ TonyQ:才是王道。
→ TonyQ:話說如果因為ie6不吃mutliple selector就不對element上兩個
→ TonyQ:classname 的話，那有點囧。（我是會在寫css selector時避開
→ TonyQ:這問題。不過我也不是專職寫css的，或許有些狀況考慮到優先
→ TonyQ:權真的避無可避吧(?) 不過只用一個class真的蠻侷限的。
evenwu法
.menu{}
.active{}
<div class="menu active"></div>

evenwu變化形
.top10{}
.top{}
.sales{}
.computer{}
.cpu{}
<div class="top10 top sales computer cpu"></div>

evenwu法的語義、再用確實都較好，但要做到跨站、跨類型的通用、共用就不太行，
因為每次menu的css都會變，但floatR, pa10, ma20這種就可以一體適用。
至於變化形，也適用於固定的一個站。

classes不多用還有其他原因。多數情況不需要那麼多，還有id, 元素名, 父親可搭配；
前後順序不同造成管理(尋找取代)不易，例如"menu active top", "active top menu"；
用空格區分令人不安心 "menu top" 跟 "menu                top"；
javascript要多加引號 class=\"menu active\"　vs. class=menuActive 。

推 JYHuang:#1CLxaxse ，我提到的IE6 對multiple class的問題
→ JYHuang:ie6不是不吃multi class，而是會把style裡的multi class
→ JYHuang:h3.color.italic => IE6會當成 h3.italic
→ JYHuang:造成影響
這是一例沒錯，如果是.color.italic也只會看成.italic，
再看個例子吧，用IE6和其他瀏覽器看，
http://web.cc.ntnu.edu.tw/~697080342/doubleclass.html
※ 編輯: tomin           來自: 140.122.30.198       (11/05 12:10)