5/13/2007

CSS 命名規則

最近在工作上討論到CSS命名規則, 目的是希望大家能對相同的資料區塊使用同一種名稱, 方便設計師彼此或工程師coding時辨認, 例如: 頁首就用<div class=”header”>.

開始用CSS做網頁設計以來, 所使用的命名規則並非一直固定著, 有時因為版型/佈局不同, 有時因為資料區塊不同, 有時因為網頁結構的寫法不同, 有時是因為想法不同, 認為先前的做法不好所做的改進.

其中又以"網頁結構寫法不同"而更改的原因比較多. 幾年前還是生手時, 做標題總是用: <div class=”title>網頁標題</div> 的方式寫, 所以CSS裡面會有一組: .title {…….}. 現在知道要用結構化的語法寫就改用 <h3>網頁標題</h3>, 當然CSS裡面也要跟著改成 h3 {…….}. (結構化語意請參考 支援各種平台的網站製作方式談Web標準 )

其次是佈局, 我喜歡簡潔的設計(不確定是否一直如此), 傾向極簡風格一派, 希望畫面看起來乾淨舒適又可以表達意涵. 所以比較容易以網頁結構本身的tag (如h, p, ul, li) 命名做設計, 頂多在資料區塊外加一組<div>, 例如:

<div class=”news”>
<h4>即時新聞標題</h4>
<p>即時新聞內文……</p>
<ul>
<li>相關新聞條列1. </li>
<li>相關新聞條列2. </li>
</ul>
</div>

CSS可以寫成:

.news {……}
.news h4 {……}
.news p {……}
.news ul {……}
.news li {……}

這種寫法可以省很多 <div>和<class>, 達到網頁結構簡潔的目的. 但多數設計師是喜歡屬於華麗風格的(也許害怕客戶抱怨沒認真在幫他們做設計), 通常會在資料區塊外圍加上有底圖的圓角邊框包起來, 或者在四周再加上插圖等裝飾圖片. 這樣設計的網頁結構自然也要複雜起來, html寫法可能會變成:

<div class=”news”>
<div class=”header”> </div> -- 這裡放圓角邊框上方底圖

<div class=”body”> --這裡放圓角邊框中間底圖
<h4 class=”title” >即時新聞標題</h4>
<p class=”text”>即時新聞內文……</p>
<ul>
<li class=”list_1”>相關新聞條列1. </li>
<li class=”list_2”>相關新聞條列2. </li>
</ul>
</div>

<div class=”footer”> </div>
-- 這裡放圓角邊框下方底圖
</div>

<div class=”pic><img src…… /></div>
-- 整個資料區塊下方再補個插圖

CSS可能寫成:

.news {……}
.news .header {……}
.news h4 {……}
.news .body {……}
.news p {……}
.news .title {……}
.news .text {……}
.news .list_1 {……}
.news .list_2 {……}
.news .footer {……}
.news .pic {……}

從上面例子可以看出, 比較難辨認的是Html的語法結構, CSS只要命名不是和內容完全沾不上邊的, 都還好辨認. 工程師coding時的困擾也應該是Html結構層面, 不全是CSS名稱的緣故. 如果頁面上類似的資料區塊多達3~5個的話, 這結構和CSS就真的複雜的可以了! 我經常看見有設計師即使是沒插圖的簡單資料區塊, 也要保留空的<div> tag (header, body, footer), 只為了將來也許會修改的可能性. 這種可能性其實微乎其微, 真的運氣不好也頂多到工程那兒請他加個tag, 幾分鐘就完成了. 如果工程師知道為了這些沒用到的tag讓他困惑許久的話, 也會希望不要保留比較好.

真的要訂規則的話, 應該要用比較客觀的方式命名, 並且考慮"網頁結構"和"版型佈局". 簡單設計和需要放很多插圖的網頁結構必定不同, 簡單設計可以只用少許<div>完成設計. 但是很多插圖的網頁就需要藉由一層又一層的<div>做為放置插圖的區塊. 例如兒童版的網頁就少不了要多放些可愛造型的風景或人物圖片, header. body, footer這些div會是需要存在的. 但如果統一以兒童版的結構訂定一組極大化標準規則的話, 對很多只需要簡單結構的網頁來說會太肥大, 頁面充滿不需要用到的tag. 如果以簡單結構的網頁訂定標準規則的話, 對兒童版的網頁來說又不夠用, 必需再行擴充. 所以不管怎麼訂都是"有欠周全", 而那一類型的網頁適用這樣的規則也應該是思考方向之一.

一位英國資深網頁設計師Andy Clarke做過相同的研究, 發表What's in a name (上) 和 What's in a name (pt2) (下) 二篇文章探討CSS命名規則. 他找了40位當今知名的CSS網頁設計師的網站, 分析他們對外框, 上, 下, 左, 中, 右欄位和導覽列的命名, 並歸納出最常被使用的名稱. 這份分析表請參考Naming Conventions Table.

從分析表可以看到有些欄位是空的, 因為不是每個欄位都有被使用到, 例如有的版型是二欄靠左, 就不會有右邊欄位; 最外框container則視版面的製作方式, 不一定要存在; 導覽列有的獨立在頁面上方, 有的和相關資訊一起放在左邊或右邊欄位.

Andy Clarke 第一篇文章What's in a name從分析表歸納出最常被使用的名稱如下:

‧外框: container (8/40)
‧頁首: header (18/40)
‧主導覽列: nav (4/40) 但是nav相關名稱(navigation, navber, topnav, navcontainer)也佔多數
‧左邊或右邊欄位: sidebar (7/40)
‧內容: content (16/40)
‧頁尾: footer (24/40)

以上的名稱相信也是很多人習慣使用的命名方式, 可以完全同意(雖然我習慣將導覽列命名為menu). 文中也提到命名應該描述區塊本身的意義而非外觀或位置, 因為外觀(顏色)位置(左右)是經常會變動修改的. 他也另外列出幾個常用名稱, 但不在這份分析表中, 所以僅供參考:

‧次導覽列: sub-nav
‧網站搜尋: search
‧搜尋結果: search-results
‧版權資訊: copyright

Andy Clarke 第二篇文章What's in a name (pt2) 又對比較細項的內容區塊命名, 但這些細項就缺少像第一篇那樣客觀的分析, 他也說了: 這些純粹是他個人的想法和建議. 這些建議和我看過優秀的CSS設計網頁的命名有很大差異(例如中間有"-"符號). 由於客觀性不足, 不具說服力, 在此並不推薦第二篇文章所寫的命名方式.

當Andy Clarke發表第一篇文章時就受到Eric Meyer (知名的Web標準和CSS大師級人物)的批評: 認為CSS命名規則是非必要之事, 它應該留給設計師做比較彈性的運用空間. Eric Meyer的看法請參考Elemental Nomenclature. (Eric Meyer也在那40人的名單當中) 但是Andy Clarke的第二篇文章隨即反駁Eric Meyer說法, 並且做出更細項的命名規則結論. Andy Clarke認為他是站在coding和公司的角度看這件事就有其必要性.

從設計師的角度看, 我贊同Eric Meyer 的看法, 因為從事設計或創意工作的人喜歡可以自由發揮創意的空間, 多少都會對"制式"的東西感到反感. 但如果非要制定規則的話, 也以資料區塊為命名單位, 制定符合意義並容易辨認的名稱, 例如: headline, newslist, bulletin, epaper, relatednews等 , 更細項的項目則保留彈性不需訂定. 因為不管做多細都會有如前面所說的"有欠周全"的地方.


附註:
有件事Andy Clarke並未探討, 那就是使用id或class? id通常在頁面中扮演定位或辨識的角色,例如: <div id=”header”>在同一個頁面允許使用一個, 不能出現第二次, class可以重複出現(請參考 id和class的差異 一文), 所以像header, content, footer是常見的以id定位成大區塊框架的做法, 但是都用class定位的也大有人在. 就看製作網頁時的功能設定為何? 有的id是要保留給程式下參數用的. 但是和程式配合得當的話, 也可以不用考慮這些. 因為寫程式的人也會自動避開已經被使用的名稱.

6 則留言:

壞掉的印表機 提到...

阿姐~您真是太認真啦~~
不跟你拍拍手真的對不起你~~啪啪啪
不過~這份資料妳竟然偷偷發在BLOG上
幸好我有專心注意BLOG動態才看的到
不然就會Loss掉哩

不過你說得沒錯,要制定死板板的規範綁死設計師的確是讓設計師感覺很不舒服(畢竟沒有人喜歡受限制)
而在妳文章中說到的~就站在公司與codeing人員來說~這倒是變成比較方便的一種方式
且要制定命名規則~要作的齊全真的是不容易阿~
我倒是覺得說
與其說要作的齊全~不如說做的方不方便與彈性是否夠大
畢竟設計沒有完美的~那規則怎麼可能會有完美的呢?哈(這是在找藉口嗎XD)
我也認同用區塊意義來做命名的方式~
先等我把一些東西消化整理之後~~
再請你多多檢閱指導囉^^

Jane 提到...

Amos,

很高興你有仔細在看, 把握對的原則做出來的東西就應該相差不遠!
私底下建議可以從那40人名單的網站找規則出來(W3C也可以),因為從這些資深網頁設計師做採樣分析得出來的結果會比用其他可能不知其所以然的人的採樣分析準確有用.
我接受不完美, 但出來的東西必須是對的和可用的.
好好加油!我也不願意打擊你脆弱的心靈, 只是遇到該說的還是要說. 要準備好!

柳丁皮 提到...

整理的真的很棒~而且深入淺出~
受用受用

拜讀了 Orz

Jane 提到...

柳丁皮, 對CSS命名有興趣也可以到W3C HTML 5 differences from HTML 4
看看HTML 5新制定的tag, 例如:section, article, aside, header, footer, nav, dialog, figure, audio, video...等, HTML 5應該是打算將目前用div=class"###"的layout排版都用標準化的新的HTML標籤取代, 設計人員就不會對網頁下一堆亂七八糟的div和class了.

現在要探討HTML5還有點早, 但可以用這些新標籤的語義來當目前對class命名的參考.

Eazen 提到...

从你的Blog真是偷学到了不少,索性订阅到Google Reader当忠实Fans得了.

:)

Jane 提到...

謝謝! 歡迎之至.