CSS命名的語義化和html5為語義和體驗而生

文章簡介：html5–為語義和體驗而生。

開篇前的一些YY

曾幾何時，一個人出設計稿，出完設計稿開啟DW用拖出一個頁面，再苦逼一點拖完頁面後自己還要寫後台，武林人稱：美工。更苦逼的是當每一次需求變更後，去修改一大堆發麻的

，於是"div+css"被搬上了互連網時代的舞台，一夜間N多的《DIV+CSS》葵花寶典橫空出世，那時，我們活在了div+css的年代，那時，我們用上了

之後，腰不酸，腿不痛，加班也帶勁了。

YY結束，切入正題

Ghost曾在2年前就以《頁面重構中的語義化》一文對語義化做過講解，還有碼頭的《語義化的HTML結構到底有什麼好處？》

重構曆經7年，也許時至今日，我們可以熟練地寫出一個頁面，但對於寫好一個頁面又談何容易？讓我們梳理一下思路，重溫下基礎，並結合現在的趨勢，再來談一下語義化這個話題，神馬是語義化？為何要語義化？

重構中的語義化基本可以分為2塊：(x)html標籤的語義化和css命名的語義化。

(x)html標籤的語義化

不廢話上案例：

(圖1)

圖1非語義化的實現方式：no_emantic_html 語義化的實現方式：emantic_html

你對

情有獨鐘嗎？拿到一個設計稿之後，不經意間無數的已經在你的彈指神功下落在螢幕？如 果是no_emantic_html那 樣，恭喜你得了戀癖。

"用合理HTML標記以及其特有的屬性去格式化文檔內容"—這是舒克對語義化標籤的解釋，能不用

的地方不用，因為是無語義的標籤，原本單詞是division，為分隔、區塊的意思，一般只用在架構html的地方，在(x)html以前的版本。

不過怎樣才能寫出語義化的標籤？從基礎入手吧，每天跟我們打交道的最多的就是div h1-h6 ul-li p之類的標籤了 ，不知大家有沒有對這些標籤做過深入的理解，來看下面這張表

標籤	原單詞	說明	語義化(Y/N)
h1-h6	head	定義 HTML 標題	Y
p	paragraph	定義段落	Y
ul	unordered list	定義無序列表	Y
ol	ordered list	定義有序列表	Y
li	list item	定義列表的項目	Y
dl	definition list	定義定義列表	Y
dt	definition term	定義定義列表中的項目	Y
dd	definition description	定義定義列表中項目的描述	Y
table	table	定義表格	Y
thead	table head	定義表格中的表頭內容	Y
tbody	table body	定義表格中的主體內容	Y
th	table head cell	定義表格中的表頭儲存格	Y
tr	table row	定義表格中的行	Y
td	table data cell	定義表格中的單元	Y
a	anchor	定義錨	Y
img	image	定義映像	Y
div	division	定義文檔中的節	N
span	span	定義文檔中的節	N

以上只是列出了我們常用的一些標籤，更多的標籤請查閱w3c ，基本所有的html標籤都是一個單詞或者片語的縮寫，這樣其實本意是更便於我們對語義化的理解。其實所有的(x)html標籤中，除了

和2個無語義的標籤，其他標籤都有它存在的意義，只有知道有哪些標籤，以及對各個標籤的本義做一個瞭解才能知道去用它。你不知道何時用

定義列表標籤？又如果你不知道有 標籤？

如果在一個頁面中看到的基本全是div，那麼說明你對語義化標籤的使用還不是很明白：明明是一個標題，可以用標籤來實現，卻非要用無語義的

標籤來實現，又或者一個段落，用

標籤是否更語義？

大家都知道每年的CSS裸奔節吧？如果選用的標籤幾乎全是不帶語義的，那麼在去樣式後網頁中幾乎看不到任何結構資訊，可讀性非常差；如果選用的都是語義適合的標籤，去樣式後網頁依然具有非常好的可讀性；各個瀏覽器有自己的預設樣式，預設的樣式給予了各個標籤不同的顯示，標籤使用的正確與否能體現網站的可用性，這也是檢驗一個網站可用性的最簡單的方法之一。

這個推薦大家去看W3C官網的標籤的使用，用web developer禁掉它的CSS看看如何？

CSS命名的語義化

CSS語義化的命名是指用易於理解的名稱對html標籤附加的class或id命名。語義化的命名這裡就涉及到了團隊的命名規範，只有在團隊的規範的基礎之上進行更好的語義化命名才是王道。

在我的理解，一個語義化的CSS命名至少應遵守如下約定：

盡量規避拼音命名，用英文單詞去命名

單詞之間串連用三種方式：底線_ 、間隔符-、駝峰命名。具體使用哪種方式請根據團隊的規範，但個人建議不要同時使用2種以上的串連方法同時命名

單詞後不要跟無意義的數字，如logo1234 (團隊約定好的除外)

對於過長單詞的串連命名可採取縮寫形式，但應確保成員都能看懂

一些約定好的單詞可以迅速的協助大家命名：

頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
登入條：loginbar
標誌：logo
廣告：banner
輪轉：promo
頁面主體：main
熱點：hot
新聞：news  
下載：download
子導航：subnav
菜單：menu
子功能表：submenu
搜尋：search
友情連結：friendlink
著作權copyright

這個太多了，這裡就不一一列出了，遇到不會的單詞大家再去補一下英文哈！

[1] [2]  下一頁