常用css命名規則

(一) 常用的CSS命名規則:

頭:header

內容:content/container

尾:footer

導航:nav

側欄:sidebar

欄目:column

頁面外圍控制整體布局寬度:wrapper

左右中:leftrightcenter

登錄條:loginbar

標志:logo

廣告:banner

頁面主體:main

熱點:hot

新聞:news

下載:download

子導航:subnav

菜單:menu

子菜單:submenu

搜索:search

友情鏈接:friendlink

頁腳:footer

版權:copyright

滾動:scroll

內容:content

標簽頁:tab

文章列表:list

提示信息:msg

小技巧:tips

欄目標題:title

加入:joinus

指南:guild

服務:service

注冊:regsiter

狀態:status

投票:vote

合作伙伴:partner

(二) 注釋的寫法:

/*Footer*/

內容區

/*EndFooter*/

(三) id的命名:

(1)頁面結構

容器:container

頁頭:header

內容:content/container

頁面主體:main

頁尾:footer

導航:nav

側欄:sidebar

欄目:column

頁面外圍控制整體布局寬度:wrapper

左右中:leftrightcenter

(2)導航:

導航:nav

主導航:mainbav

子導航:subnav

頂導航:topnav

邊導航:sidebar

左導航:leftsidebar

右導航:rightsidebar

菜單:menu

子菜單:submenu

標題:title

摘要:summary

(3)功能:

標志:logo

廣告:banner

登陸:login

登錄條:loginbar

注冊:regsiter

搜索:search

功能區:shop

標題:title

加入:joinus

狀態:status

按鈕:btn

滾動:scroll

標簽頁:tab

文章列表:list

提示信息:msg

當前的:current

小技巧:tips

圖標:icon

注釋:note

指南:guild

服務:service

熱點:hot

新聞:news

下載:download

投票:vote

合作伙伴:partner

友情鏈接:link

版權:copyright

(四) class的命名:

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

以下為引用的內容:
.red{color:red;}
.f60{color:#f60;}
.ff8600{color:#ff8600;}

(2)字體大小,直接使用“font 字體大小”作為名稱,如:

以下為引用的內容:
.font12px{font-size:12px;}
.font9pt{font-size:9pt;}

(3)對齊樣式,使用對齊目標的英文名稱,如:

以下為引用的內容:
.left{float:left;}
.bottom{float:bottom;}

(4)標題欄樣式,使用”類別 功能”的方式命名,如:

以下為引用的內容:
.barnews{}
.barproduct{}

(五) 文件名命名:

主要的:master.css

模塊:module.css

基本共用:base.css

布局,版面:layout.css

主題:themes.css

專欄:columns.css

文字:font.css

表單:forms.css

補丁:mend.css

打印:print.css

(六) 注重事項:

(1)一律小寫。

(2)盡量用英文。

(3)不加中杠和下劃線。

(4)盡量不縮寫,除非一看就明白的單詞。

來源:http://www.dugukeji.com/mb/divcssjiaocheng/16660.html

Continue reading “常用css命名規則”

Advertisements
常用css命名規則