參考：div css命名規(guī)范_Div+CSS教程

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

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

命名規(guī)范

常用的CSS命名規(guī)則：

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

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

常用代碼結(jié)構(gòu)：

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

示例代碼 [hl5o.cn]

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

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

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

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

示例代碼 [hl5o.cn]

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

示例代碼 [hl5o.cn]

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

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

示例代碼 [hl5o.cn]

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

示例代碼 [hl5o.cn]

C #content

S #subcol

M #maincol

X #xcol

這是縱向布局的XHTML結(jié)構(gòu)，c-smx表示網(wǎng)頁有三個縱欄, c-sm表示有兩個縱欄, c-mx表示有兩個縱欄其中一個是附屬的, c-m表示一個縱欄。

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

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

示例代碼 [hl5o.cn]

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

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