CSS命名規範

(此爲轉發的CSS命名規範,記錄下方便日後學習)

 

CSS命名規範

一、頁面結構

容器: container

頁頭:header

內容:content/container

頁面主體:main

頁尾:footer

導航:nav

側欄:sidebar

欄目:column

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

左右中:left right center

二、導航

導航:nav

主導航:mainnav

子導航:subnav

頂導航:topnav

邊導航:sidebar

左導航:leftsidebar

右導航:rightsidebar

菜單:menu

子菜單:submenu

標題: title

摘要: summary

三、功能

標誌:logo

廣告:banner

登陸:login

登錄條:loginbar

註冊:register

搜索:search

功能區:shop

標題:title

加入:joinus

狀態:status

按鈕:btn

滾動:scroll

標籤頁:tab

文章列表:list

提示信息:msg

當前的: current

小技巧:tips

圖標: icon

註釋:note

指南:guild

服務:service

熱點:hot

新聞:news

下載:download

投票:vote

合作伙伴:partner

友情鏈接:friendlink

版權:copyright 

清除浮動:clearfix

四、顏色

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

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

五、字體大小

直接使用"font+字體大小"作爲名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

六、對齊樣式

使用對齊目標的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }

七、標題欄樣式

使用"類別+功能"的方式命名,如

.barnews { }

.barproduct { }

八、注意事項

1.一律小寫;

2.儘量用英文;

3.不加中槓和下劃線;

4.儘量不縮寫,除非一看就明白的單詞.

九、樣式文件命名

主要的 master.css

模塊 module.css

基本共用 base.css

佈局,版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補丁 mend.css

打印 print.css

 

 

發佈了27 篇原創文章 · 獲贊 11 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章