關於團隊合作的css命名規範

來源:互聯網
上載者:User

常用的css命名規則

頭:header

內容:content/container

尾:footer

導航:nav

側欄:sidebar

欄目:column

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

左右中:left right center

登入條: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 */

內容區

/* End Footer */

(三)id的命名:

(1)頁面結構

容器: container

頁頭:header

內容:content/container

頁面主體:main

頁尾:footer

導航:nav

側欄:sidebar

欄目:column

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

左右中:left right center

(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 { }

注意事項::

1.一律小寫;

2.盡量用英文;

3.不加中杠和底線;

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

主要的 master.css

模組 module.css

基本共用 base.css

布局,版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補丁 mend.css

列印 print.css

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.