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是要保留給程式下參數用的. 但是和程式配合得當的話, 也可以不用考慮這些. 因為寫程式的人也會自動避開已經被使用的名稱.