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

作為一名資深的建站愛好者，對(duì)DIV+CSS技術(shù)，筆者是十分癡迷的，如果發(fā)現(xiàn)哪一個(gè)頁(yè)面做的十分漂亮，會(huì)第一時(shí)間查看原代碼，看一下它是怎么設(shè)計(jì)的，當(dāng)然時(shí)間久了，你就會(huì)發(fā)現(xiàn)一些有關(guān)CSS很有趣的現(xiàn)象，比如他們的命名規(guī)則哦。

網(wǎng)頁(yè)設(shè)計(jì)中常用的CSS命名規(guī)則：

      頭：header

      內(nèi)容：content/container

      尾：footer

      導(dǎo)航：nav

      側(cè)欄：sidebar

      欄目：column

      頁(yè)面外圍控制整體布局寬度：wrapper

      左右中：left right center

      登錄條：loginbar

      標(biāo)志：logo

      廣告：banner

      頁(yè)面主體：main

      熱點(diǎn)：hot

      新聞：news

      下載：download

      子導(dǎo)航：subnav

      菜單：menu

      子菜單：submenu

      搜索：search

      友情鏈接：friendlink

      頁(yè)腳：footer

      版權(quán)：copyright

      滾動(dòng)：scroll

      內(nèi)容：content

      標(biāo)簽頁(yè)：tab

      文章列表：list

      提示信息：msg

      小技巧：tips

      欄目標(biāo)題：title

      加入：joinus

      指南：guild

      服務(wù)：service

      注冊(cè)：regsiter

      狀態(tài)：status

      投票：vote

      合作伙伴：partner

注釋的寫法:

      /* Footer */

      內(nèi)容區(qū)

      /* End Footer */

id的命名:

      (1)頁(yè)面結(jié)構(gòu)

      容器: container

      頁(yè)頭：header

      內(nèi)容：content/container

      頁(yè)面主體：main

      頁(yè)尾：footer

      導(dǎo)航：nav

      側(cè)欄：sidebar

      欄目：column

      頁(yè)面外圍控制整體布局寬度：wrapper

      左右中：left right center

      (2)導(dǎo)航

      導(dǎo)航：nav

      主導(dǎo)航：mainbav

      子導(dǎo)航：subnav

      頂導(dǎo)航：topnav

      邊導(dǎo)航：sidebar

      左導(dǎo)航：leftsidebar

      右導(dǎo)航：rightsidebar

      菜單：menu

      子菜單：submenu

      標(biāo)題: title

      摘要: summary

      (3)功能

      標(biāo)志：logo

      廣告：banner

      登陸：login

      登錄條：loginbar

      注冊(cè)：regsiter

      搜索：search

      功能區(qū)：shop

      標(biāo)題：title

      加入：joinus

      狀態(tài)：status

      按鈕：btn

      滾動(dòng)：scroll

      標(biāo)簽頁(yè)：tab

      文章列表：list

      提示信息：msg

      當(dāng)前的: current

      小技巧：tips

      圖標(biāo): icon

      注釋：note

      指南：guild

      服務(wù)：service

      熱點(diǎn)：hot

      新聞：news

      下載：download

      投票：vote

      合作伙伴：partner

      友情鏈接：link

      版權(quán)：copyright

      (四)class的命名:

      (1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如

      .red { color: red; }

      .f60 { color: #f60; }

      .ff8600 { color: #ff8600; }

      (2)字體大小,直接使用"font+字體大小"作為名稱,如

      .font12px { font-size: 12px; }

      .font9pt {font-size: 9pt; }

      (3)對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱,如

      .left { float:left; }

      .bottom { float:bottom; }

      (4)標(biāo)題欄樣式,使用"類別+功能"的方式命名,如

      .barnews { }

      .barproduct { }

注意事項(xiàng):

      1.一律小寫;

      2.盡量用英文;

      3.不加中杠和下劃線;

      4.盡量不縮寫，除非一看就明白的單詞，如：

      主要的 master.css

      模塊 module.css

      基本共用 base.css

      布局，版面 layout.css

      主題 themes.css

      專欄 columns.css

      文字 font.css

      表單 forms.css

      補(bǔ)丁 mend.css

      打印 print.css

是不是很有意思呢，當(dāng)然了，以后再寫CSS時(shí)能夠注意到這些的話，不僅會(huì)顯著你的頁(yè)面正規(guī)，還會(huì)增加搜索引擎的好感的哦。