參考：div css命名規范_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

用了一段CSS 布局設計網頁,發現自己的命名有點混亂,完全按照自己的想法命名,雖然沒什么影響,有不給別人看源文件,但是工作室有時候和團隊合作完成項目的時候,就碰到麻煩了,要修改一個地方相當的費事.所以還是有個標準比較好啊!
在網上看到的一個相關的參考,再加上平時也研究別人的代碼,發現這樣的命名使用很廣泛!我再加上自己的經驗,希望對看到這篇文章的人能有用!

命名規范

常用的CSS命名規則：

頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center

命名全部使用小寫字母，假如需要多個單詞，單詞間使用“-”分隔，比如user-list

常用代碼結構：

div：主要用于布局，分割頁面的結構
ul/ol：用于無序/有序列表
span：沒有非凡的意義，可以用作排版的輔助，例如

示例代碼 [www.ghpqjb.com]

<li><span>(4.23)</span>天幻網六周年天幻網六周年天幻網六周年天幻網六</li>

然后在css中定義span為右浮動，實現了日期和標題分兩側顯示的效果

h1-h6：標題
h1-h6 根據重要性依次遞減
h1位最重要的標題

label：為了使你的表單更有親和力而且還能輔助表單排版的好東西，例如：

示例代碼 [www.ghpqjb.com]

fieldset & legend：fildset套在表單外，legend用于描述表單內容。例如：

示例代碼 [www.ghpqjb.com]

<form>
<fieldset>
<legend>title</legend>
<label for="user-password">密　碼</label>
<input type="password" name="password" id="user-password" />
</fieldset>
</form>

dl,dt,dd：當頁面中出現第一行為類似標題/簡述，然后下面為具體描述的內容時應該使用該標簽，例如

示例代碼 [www.ghpqjb.com]

<dl>
<dt>什么是CSS?</dt>
<dd>CSS就是一種叫做樣式表（stylesheet）的技術。也有的人稱之為層疊樣式表（Cascading Stylesheet）。<dd>
<dt>什么是XHTML？</dt>
<dd>XHTML是一個基于XML的置標語言，看起來與HTML有些想像，只有一些小的但重要的區別。可以這樣看，XHTML就是一個扮演著類似HTML的角色的XML。本質上說，XHTML是一個橋接（過渡）技術，結合了XML（有幾分）的強大功能及HTML（大多數）的簡單特性。</dd>
</dl>

示例代碼 [www.ghpqjb.com]

C #content

S #subcol

M #maincol

X #xcol

這是縱向布局的XHTML結構，c-smx表示網頁有三個縱欄, c-sm表示有兩個縱欄, c-mx表示有兩個縱欄其中一個是附屬的, c-m表示一個縱欄。

其中在三縱欄的布局需要分為兩層第一層是#subcol與#main第二層是#main中的#maincol與#xcol。

自定義命名：
根據w3c網站上給出的,最好是用意義命名
比如：是重要的新聞高亮顯示（像紅色）
有兩種

示例代碼 [www.ghpqjb.com]

.red{color:red}
.important-news{color:red}

很顯然第二種傳達的意義更加明確,所以盡量不要用意義不明確的作為自己自定義的名字。