這個話題是應(yīng)騰訊ISD同仁之邀在WebReBuild三周年交流會上做的主題分享。由于臨場等原因有些問題當時沒有講明白，回來后按原有思路形成了一篇小論文，對其中一些問題進行了進一步闡述?，F(xiàn)場有位同行朋友提出了對使用表現(xiàn)性語義的質(zhì)疑，當時沒有給出讓他滿意的答復(fù)，因此文章中花了較多的篇幅來探討語義性有關(guān)的問題，算是對那位朋友的解答。

一、 公用樣式模板的“公用”的含義

1. 能夠應(yīng)用在不同功能的web系統(tǒng)上（用在哪？）

企業(yè)的web開發(fā)團隊除了開發(fā)一些在公共平臺運營為公司用戶服務(wù)的web產(chǎn)品，也會開發(fā)一些供公司內(nèi)部團隊使用的信息管理系統(tǒng)(IMS，Information Management System)，用以優(yōu)化流程，提高辦公效率。例如企業(yè)ERP（Enterprise Resource Planning）、人事管理、工作流程管理、銷售管理、倉庫資源管理等系統(tǒng)。這類系統(tǒng)主要供內(nèi)部部門使用，功能繁雜，注重信息的組織和功能的實現(xiàn)，對前臺界面的個性化要求不高，不必要每個系統(tǒng)都重新設(shè)計制作界面，提供一套公用樣式模板可以有效地提高開發(fā)效率。

2. 提供給不同專業(yè)背景的人使用（給誰用？）

有一類web頁面時效性很強，需要非常快速地制作上線，例如一些新聞專題；另外有些頁面總量很大，但結(jié)構(gòu)相似，例如上面提到的IMS系統(tǒng)的很多不同的功能模塊。這類頁面由于時間限制或者根本沒有必要由專業(yè)的重構(gòu)人員來精細制作，寫好每一個頁面每一個標簽的代碼，所以也有必要提供一套使用方便的公用樣式模板，供內(nèi)容編輯、或者后臺開發(fā)人員直接使用。

二、 公用樣式模板的設(shè)計要求
能夠應(yīng)用在多個web系統(tǒng)上要求

1. 公用模板設(shè)計需要具備抽象性、代表性

(1). 整體規(guī)劃頁面層次邏輯

h1,h2,h3,h4,h5,h6 的整體規(guī)劃

一本書的目錄部分，往往能很清晰地體現(xiàn)出這本書的結(jié)構(gòu)層次，第一章第一節(jié)第一小節(jié)，次序井然。好的網(wǎng)頁也應(yīng)該有清晰的層次邏輯，網(wǎng)頁大標題、次級標題、段落內(nèi)容等，層層展開。(X)HTML網(wǎng)頁標記語言本身也給我們提供了標識網(wǎng)頁層次的標簽：h1/h2/h3/h4/h5/h6。在公用模板中要整體規(guī)劃好網(wǎng)頁內(nèi)容的結(jié)構(gòu)層次，并恰當?shù)厥褂眠@些標簽來體現(xiàn)。在禁用CSS的情況下，可以從瀏覽器默認樣式方便地看到網(wǎng)頁的結(jié)構(gòu)層次。

清晰的導(dǎo)航菜單和面包屑(crumb)標識
在做好上面合理地規(guī)劃h(n)標識的情況下，導(dǎo)航菜單和面包屑導(dǎo)航在網(wǎng)頁上能更加直觀地體現(xiàn)網(wǎng)頁的層次，也是增強網(wǎng)頁可用性必須具備的網(wǎng)頁元素。

(2). 具有代表性的頁面布局結(jié)構(gòu)

網(wǎng)頁結(jié)構(gòu)布局也有一定的范式，往往包括頁頭、導(dǎo)航菜單、主體內(nèi)容和頁腳。遵循這些最普遍的布局原則才能最大程度保證公用模板的通用性。

(3). 具有代表性的頁面元素

1、Logo、網(wǎng)頁大標題

Logo具有品牌標識作用。大標題最直接地告訴用戶網(wǎng)頁/系統(tǒng)的內(nèi)容/用途，但不是必備的，有些網(wǎng)頁只有l(wèi)ogo和副標題，因此設(shè)計時網(wǎng)頁大標題可以作為可選項目。

2、導(dǎo)航菜單

導(dǎo)航菜單的重要作用不再強調(diào)。需要注意的是，在設(shè)計模板菜單樣式的時候，要有標識當前項的樣式，以及需要特別強調(diào)的進行高亮顯示的項目樣式。還要考慮多級菜單對子菜單進行下拉或者折疊顯示的情況。設(shè)計的時候考慮周全，在需要的時候可以方便地進行拓展。

3、面包屑導(dǎo)航

不多強調(diào)，相當于網(wǎng)頁上的GPS。

4、數(shù)據(jù)表格、文本內(nèi)容

這類元素往往是網(wǎng)頁的主體內(nèi)容，用以呈現(xiàn)格式化的信息。在設(shè)計制作數(shù)據(jù)表格的表頭、單元格樣式的時候，需要考慮根據(jù)不同的數(shù)據(jù)形式，樣式可能也會不同。比如較長的文本內(nèi)容可能需要在單元格里左對齊，而數(shù)字類型數(shù)據(jù)，為了直觀地比較數(shù)位大小，通常需要右對齊。有時候數(shù)據(jù)內(nèi)容比較多，需要分頁進行顯示，所以也有必要提供一個具有良好用戶體驗的分頁樣式。

5、數(shù)據(jù)錄入表單

用以錄入數(shù)據(jù)的表單組件：單選框、復(fù)選框、下拉框、文本框等等?？梢愿鶕?jù)需要對這類網(wǎng)頁原生的交互組件的默認外觀進行統(tǒng)一的初始化。如果對交互效果要求比較高，需要設(shè)置鼠標、鍵盤事件與表單項進行交互時的不同樣式（如 onmouSEOver、onclick、onfocus等）。由于IE6-對偽類選擇器（hover、focus）支持不完善，制作這些效果的時候要使用腳本進行一些兼容處理。另外，還有一些填寫表單時的注意事項等提示類信息，以及對錄入數(shù)據(jù)進行驗證出錯時的錯誤提示信息，這些信息通常會顯示在表單旁邊，驗證錯誤時還需要將出錯的表單項進行高亮顯示，這些樣式在公用模板里都需要進行設(shè)計。

6、各類備注、報錯、提示信息
包括上面提到的附加在元素旁邊顯示的表單填寫提示及驗證報錯，和一些對內(nèi)容進行解釋的備注說明等，還有一些可能會以單獨模塊出現(xiàn)，例如用戶操作成功、失敗或者是登陸超時等提示信息。

7、交互UI組件：切換標簽、下拉菜單和模態(tài)彈窗等

除了網(wǎng)頁表單控件以及瀏覽器提供的消息組件（alert、confirm、prompt），經(jīng)常還需要用到一些自定義的交互組件，例如切換標簽、下拉菜單，以及考慮到易用性問題而對瀏覽器消息組件進行封裝的模態(tài)彈窗等（例如lightbox、thickbox），可以選擇最常用組件集成到公用模板中。

能夠供不同專業(yè)背景的人員使用則要求：

2. 使用方便，易于自學
(1). 簡單易記的命名規(guī)則

結(jié)構(gòu)語義性：class=”newsList” wrapper、nav
表現(xiàn)語義性：class=”textLeft” cRed、f14px

具有語義的內(nèi)容是最容易理解記憶的。有一種記憶法就是使用一些有一定意義的聯(lián)想來增強對陌生內(nèi)容的記憶。公用模板中可以使用具有簡明語義的名稱來對選擇符進行命名，這樣，非專業(yè)做重構(gòu)開發(fā)的模板使用者，不必具有專業(yè)的CSS方面的知識或者是閱讀很復(fù)雜的說明文檔即可從命名上對模板中的選擇符的用法進行理解，掌握了其中的規(guī)律，就可以非?？焖俚刈詫W以達到熟練運用。

Web標準的所謂的語義性，主要是指(X)THML標簽上的語義，強調(diào)要按照標簽元素最初的定義去使用他們；同時提倡要使用具有結(jié)構(gòu)屬性語義的標簽，而避免使用具有表現(xiàn)語義的標簽。例如使用h(n)來標識各級標題，ol用來建立一個有序列表，li來標識列表項；對于small、b、i、blink、center這類含有元素視覺表現(xiàn)語義的標簽，則要盡量避免使用。事實上除了(X)HTML標簽名上固定的語義，還可以通過一些標簽自定義的屬性值來增強語義。例如后來出現(xiàn)的微格式（Microformat），就是基于class屬性值的語義性的應(yīng)用。

由于id的唯一性，使用id選擇符的樣式在同一個頁面中不能重用。為了保證定義樣式的可重用性，通常需要使用類定義（class）作為選擇符。在對class屬性值進行語義化命名的時候，嚴格遵循web標準結(jié)構(gòu)與表現(xiàn)分離準則的人可能會排斥使用表現(xiàn)性語義，他們認為一旦需要通過改變CSS定義來更新元素的外觀，類選擇符所含有的表現(xiàn)語義就會與它修改后的實際外觀不符合。例如設(shè)置左對齊并且類命名為“textLeft”的樣式，如果把CSS定義更改為右對齊，則類選擇器的命名語義與它的實際內(nèi)容并不符合。首先要承認這種考慮是非常細致的。但實際項目的開發(fā)往往非常復(fù)雜，要綜合考慮多方面需求，很難在某一方面達到理想狀態(tài)。在一個大型系統(tǒng)的諸多頁面中，要將所有使用到樣式的元素都用某個結(jié)構(gòu)特征來進行描述，從我的個人經(jīng)驗來看這是非常傷神的一件事。這些具有細枝末節(jié)的結(jié)構(gòu)語義的樣式的通用性也很成問題——有些元素只是使用了相同的樣式，比如相同的字體、顏色等，但他們代表的結(jié)構(gòu)屬性卻并不相同，如果選擇器全部以結(jié)構(gòu)語義來進行命名，很多外觀相同但結(jié)構(gòu)語義不同的樣式就要重復(fù)定義了。例如，我們在如下兩個地方都用到了紅色字體，一個是報錯警示信息，一個是地方是股票上漲點數(shù)，如果全部用語義命名方式，就需要分別命名一個“error”和一個“strengthen”的類定義，并且都設(shè)置屬性“color:red”，這個“color:red”就在這兩個地方重復(fù)定義了。如果有一個以表現(xiàn)語義命名的類“cRed”并設(shè)置表現(xiàn)語義所對應(yīng)的紅色樣式，就可以在這兩個地方同時使用“cRed”這個類了。另外還需要強調(diào)的是，我們設(shè)計制作的是“公用樣式模板”，已經(jīng)是經(jīng)過整體規(guī)劃高度抽象化了的具有代表性的元素樣式，應(yīng)該保持已有CSS的穩(wěn)固，在需求有變的情況下寧愿去改變(X)HTML端的選擇器掛鉤，而不應(yīng)該隨意改變CSS中已定義好的屬性。在必要的地方使用表現(xiàn)語義進行命名也是有一定合理性的。

所以，任何固有的規(guī)則都會有兩面性，需要我們根據(jù)實際情況去權(quán)衡利弊。在對可變需求有一定的預(yù)見性的情況下，靈活地打破規(guī)則書寫更易維護代碼這也是開發(fā)人員的一項專業(yè)素質(zhì)?！白袷匾?guī)范的一個重要標準，就是知道何時打破它，并大膽地打破?！辈粦?yīng)該死守教條，這樣只會畫地為牢自筑樊籬。只有擱置爭議，綜合運用，才能在項目需求、開發(fā)成本、維護成本的多方博弈中取得均衡。

(2). 簡單易理解的嵌套層次
布局最好可視化，能通過 IDE 操作，局部運用table
table布局的弊端：不符語義性、解析慢、重用性
學業(yè)啟蒙時代習字本上的方格子，辦黑板報也先用三角尺來畫格子，這些少年時的記憶都直觀地給了我們這樣的印象，規(guī)整的格子是來排版布局的最好輔助?；ヂ?lián)網(wǎng)發(fā)展初期的網(wǎng)頁也是用表格（table）來進行布局的，這個時期的Web設(shè)計人員直接在IDE的可視化視圖下就可以完成頁面的排版布局。隨著技術(shù)的深入發(fā)展，table布局方式的弊端也逐步暴露出來——語義性差不利于搜索引擎，整個table全部加載完才顯示出來導(dǎo)致瀏覽器解析緩慢，代碼不夠精簡冗余度高等。網(wǎng)頁設(shè)計制作人員開始使用更專業(yè)的方式來進行網(wǎng)頁布局——(X)HTML來標記數(shù)據(jù)組織結(jié)構(gòu)，CSS設(shè)置外觀樣式。這種新的方式克服了table布局時代的一些缺陷，也對網(wǎng)頁制作人員有了更高的要求，需要專業(yè)的代碼編寫知識甚至一些復(fù)雜的技巧。比如，為實現(xiàn)三列等高自適應(yīng)的布局，有些重構(gòu)人員通過運用復(fù)雜的標簽嵌套，配合一些奇異的CSS hack方式來最終實現(xiàn)效果。

在提供給其他專業(yè)背景人員使用的公用樣式模板中，我們也推薦使用CSS進行布局，但那些復(fù)雜的嵌套方式則是不可取的。這對于使用者來說不易理解，也難以使用。簡單易理解的嵌套層次是必要的，甚至，為了給使用者帶來方便，我們還可以對web標準進行一些折衷——鑒于table布局的直觀和在IDE可視化視圖里可以直接進行操作，我們可以在局部范圍使用一些小的table來實現(xiàn)多列的布局。如下圖例：

整體框架布局采用CSS控制，在局部的小模塊里，使用table（圖中紅色部分所示，實際運用中邊框不可見）來實現(xiàn)多列的布局，其他地方，web標準推薦使用什么就采用什么標簽。這樣，一定程度保持了語義性（實際上，頁面語義性標簽對于搜索引擎的引導(dǎo)作用會越來越小，隨著搜索引擎越來越智能化，分詞技術(shù)、數(shù)據(jù)挖掘技術(shù)的進一步發(fā)展，搜索引擎完全可以脫離頁面標記而直接從文本內(nèi)容來分析頁面。語義化更大的作用將會體現(xiàn)在方便數(shù)據(jù)共享(例如RSS、微格式等)和利于代碼維護。個人觀點，接受有風險，參考須謹慎），分散的小表格克服了瀏覽器對于大的table解析緩慢的弊端，這些僅供實現(xiàn)多列布局的table也不會影響代碼重用而造成代碼冗余。

對于一些網(wǎng)頁元素，根據(jù)其特點揚長避短靈活地運用，才能最大程度地裨益我們的項目。

設(shè)計開發(fā)人員的專業(yè)水準

3. 設(shè)計風格統(tǒng)一，保持一致性
設(shè)計師主導(dǎo)著網(wǎng)頁的視覺風格，他們充分發(fā)揮聰明才智使用戶界面好用又好看。但任何創(chuàng)造性的工作，也都需要遵循一定的范式。書法家潑墨揮毫筆走龍蛇，看似漫不經(jīng)心，實則章法井然法度森然，鈐印題款都有講究；音樂家作曲，靈感噴涌如滔滔江水綿綿不絕，音符的組織卻必須符合韻律節(jié)拍；詩人情感迸發(fā)，花間一壺酒，筆下三千言，但好的詩作往往也需要講求平仄格律。設(shè)計師在設(shè)計模板樣式的時候，也要有一定規(guī)范。對于字體、字號，常用顏色，以及模塊的邊框、間距等，要有整體規(guī)劃，保持一致性，同一元素在不同頁面的風格保持統(tǒng)一。只有這樣，負責代碼編寫的重構(gòu)人員才能對元素樣式進行抽象化，提煉出可以重用的部分編寫高效代碼。這些規(guī)范一定是設(shè)計師與重構(gòu)開發(fā)人員在長期的交流探討中逐步完善的，有一定跨專業(yè)的知識對于兩者的合作將大有益處——請永遠記住，你不是一個人在戰(zhàn)斗。

4. 合理拆分樣式，巧妙組合運用
網(wǎng)頁模板的設(shè)計風格確定了，剩下就要靠頁面工程師來把設(shè)計圖稿實現(xiàn)成精良的網(wǎng)頁了?？剂烤W(wǎng)頁重構(gòu)品質(zhì)的各項指標之中，包括瀏覽器兼容性、代碼的易擴展和可重用性。要做好這些，必須對抽象出來的頁面元素樣式進行合理拆分，區(qū)分哪些樣式可以作為全局公用，哪些需局部定義，并運用樣式的繼承覆蓋原則進行優(yōu)化。

(1). 樣式拆分組合的理論依據(jù)
class=“cRed textLeft ”class屬性可以賦值為多個類選擇器名稱，中間用空格分隔，這多個類定義的樣式可以同時作用于標簽元素。依據(jù)這一特性，可以在CSS里定義時對樣式進行拆分打散，在(X)HTML里調(diào)用樣式類時再將其組合使用。例如，有些常用的字號和顏色可以單獨進行全局定義，在具體模塊的類“newsList”中定義其他除字體和顏色之外的樣式屬性，用class調(diào)用樣式的時候再組合多個選擇器進行賦值 class=“newsList f14px cRed”。這樣，顏色和字號屬性在全局范圍內(nèi)就可以多次使用，提高了樣式的復(fù)用率，松散耦合的樣式也更利于擴展。而且，同一屬性進行最少次數(shù)的定義，一定程度也優(yōu)化了CSS性能。

樣式的繼承覆蓋原則，選擇器優(yōu)先級算法在對樣式進行全局公用或局部特殊定義時，考慮最多的是樣式的繼承覆蓋原則。對于最普遍的樣式進行全局定義，在需要個性化定義的地方再對全局樣式進行覆蓋，可以很大地提高CSS效率。這正是辯證唯物主義關(guān)于矛盾普遍性和特殊性關(guān)系的典型實踐。例如，為改善CSS的瀏覽器兼容性而定義的reset文件作為全局樣式，將元素在各個瀏覽器中表現(xiàn)不同的默認樣式進行了初始化，在頁面的具體模塊中需要個性定制元素樣式的地方再對初始化的樣式進行覆蓋。要有效地利用繼承和覆蓋原則，關(guān)于選擇器優(yōu)先級的算法必須熟練掌握。id選擇器、類選擇器、標簽選擇器以及行內(nèi)樣式的優(yōu)先級權(quán)重是不一樣的，特別是這些選擇器進行組合運用的時候。
本文從公用樣式模板的設(shè)計制作為例，詳解了一個項目從實際需求到技術(shù)要求的分析過程，以需求為主導(dǎo)，不放棄專業(yè)追求的理念貫徹其中，未涉及具體的技術(shù)實現(xiàn)細節(jié)，旨在提供一種思考問題的思路，希望能給大家提供借鑒。

附錄：演示幻燈片下載

原文：http://www.ued163.com/?p=597