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

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

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

命名規(guī)范

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

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

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

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

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

示例代碼 [www.hl5o.cn]

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

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

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

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

示例代碼 [www.hl5o.cn]

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

示例代碼 [www.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：當(dāng)頁面中出現(xiàn)第一行為類似標(biāo)題/簡述，然后下面為具體描述的內(nèi)容時(shí)應(yīng)該使用該標(biāo)簽，例如

示例代碼 [www.hl5o.cn]

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

示例代碼 [www.hl5o.cn]

C #content

S #subcol

M #maincol

X #xcol

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

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

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

示例代碼 [www.hl5o.cn]

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

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