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

進入論壇參與討論: http://www.missyuan.com/viewthread.php?tid=419265

目錄

一、  公用樣式模板的“公用”的含義：       
          1.       能夠應用在不同功能的web系統上（用在哪？）       
          2.       提供給不同專業背景的人使用（給誰用？）       
二、  公用樣式模板的設計要求       
          1.       公用模板設計需要具備抽象性、代表性       
               (1).  整體規劃頁面層次邏輯       
                        1)       h1,h2,h3,h4,h5,h6 的整體規劃       
                        2)       清晰的導航菜單和面包屑(crumb)標識       
               (2).  具有代表性的頁面布局結構
               (3).  具有代表性的頁面元素
                        1)       Logo、網頁大標題
                        2)       導航菜單
                        3)       面包屑導航
                        4)       數據表格、文本內容       
                        5)       數據錄入表單
                        6)       各類備注、報錯、提示信息
                        7)       交互UI組件：切換標簽、下拉菜單和模態彈窗等
          2.       使用方便，易于自學       
               (1).  簡單易記的命名規則       
                        1)       結構語義性：class=”newsList”  wrapper、nav
                        2)       表現語義性：class=”textLeft”   cRed、f14px
               (2).  簡單易理解的嵌套層次
                        1)       布局最好可視化，能通過 IDE 操作，局部運用table       
                        2)       table布局的弊端：不符語義性、解析慢、重用性
          3.       設計風格統一，保持一致性
          4.       合理拆分樣式，巧妙組合運用
               (1).  樣式拆分組合的理論依據
                        1)       class=“cRed  textLeft ”
                        2)       樣式的繼承覆蓋原則，選擇器優先級算法 

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

1. 能夠應用在不同功能的web系統上(用在哪?)

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

2. 提供給不同專業背景的人使用(給誰用?)

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

二、 公用樣式模板的設計要求

能夠應用在多個web系統上要求

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

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

1)h1,h2,h3,h4,h5,h6 的整體規劃