css書寫規範的詳細講解

本篇文章給大家帶來的內容是關於css書寫規範的詳細講解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

1、書寫順序

根據屬性的重要性按順序書寫

只遵循橫向順序即可，先顯示定位布局類屬性，後盒模型等自身屬性，最後是文本類及修飾類屬性。

→→→	顯示內容	自身屬性	文字屬性和其他修飾
	display	width	font
	visibility	height	text-align
	position	margin	text-decoration
	float	padding	vertical-align
	clear	border	white-space
	list-style	overflow	color
	top	min-width	background

1.位置屬性

(position, top, right, z-index, display, float等)

2.大小

(width, height, padding, margin)

3.文字系列

(font, line-height, letter-spacing, color- text-align等)　　

4.背景

(background, border等)

5.其他

(animation, transition等)

2、選取器等級

a = 行內樣式style。b = ID選取器的數量。c = 類、偽類和屬性選取器的數量。d = 類型選取器和虛擬元素選取器的數量。

選取器	等級(a,b,c,d)
style=””	1,0,0,0
#wrapper #content {}	0,2,0,0
#content .dateposted {}	0,1,1,0
p#content {}	0,1,0,1
#content p {}	0,1,0,1
#content {}	0,1,0,0
p.comment .dateposted {}	0,0,2,1
p.comment p {}	0,0,1,2
.comment p {}	0,0,1,1
p.comment {}	0,0,1,1
.comment {}	0,0,1,0
p p {}	0,0,0,2
p {}	0,0,0,1

3、書寫規範、縮寫屬性

屬性縮寫

去掉小數點前的0

簡寫命名，但前提是要讓人看懂你的簡寫

16進位顏色代碼縮寫

連字號CSS選取器命名規範

1.長名稱或片語可以使用中橫線來為選取器命名。2.不建議使用“_”底線來命名CSS選取器，為什麼呢?輸入的時候少按一個shift鍵;瀏覽器安全色問題 (比如使用*tips的選取器命名，在IE6是無效的)能良好區分JavaScript變數命名(JS變數命名是用“*”)

不要輕易使用id

id在JS是唯一的，不能多次使用，而使用class類別選取器卻可以重複使用，另外id的優先順序優先與class，所以id應該按需使用，而不能濫用。

為選取器添加狀態首碼

有時候可以給選取器添加一個表示狀態的首碼，讓語義更明了，比如是添加了“.is-”首碼。

image

4、 命名規範

1 布局文檔  doc doc頭部  head    hd主體  body    bd尾部  foot    ft主欄  main    mn主欄子容器   mainc   mnc側欄  side    sd側欄子容器   sidec   sdc盒容器 wrap/box    wrap/box導航  nav nav2 模組子導航 subnav  snav麵包屑 crumb   crm菜單  menu    menu選項卡 tab tab標題區 head/title  hd/tt內容區 body/content    bd/ct列表  list    lst表格  table   tb表單  form    fm熱點  hot hot排行  top top登入  login   log標誌  logo    logo廣告  advertise   ad搜尋  search  sch幻燈  slide   sld提示  tips    tips協助  help    help新聞  news    news下載  download    dld註冊  regist  reg投票  vote    vote著作權  copyright   cprt結果  result  rst標題  title   tt按鈕  button  btn輸入  input   ipt3 功能浮動清除    clearboth   cb向左浮動    floatleft   fl向右浮動    floatright  fr內聯塊級    inlineblock ib文本置中    textaligncenter tac文本居右    textalignright  tar文本居左    textalignleft   tal垂直置中    verticalalignmiddle vam溢出隱藏    overflowhidden  oh完全消失    displaynone dn字型大小    fontsize    fs字型粗細    fontweight  fw4 皮膚字型顏色    fontcolor   fc背景  background  bg背景顏色    backgroundcolor bgc背景圖片    backgroundimage bgi背景定位    backgroundposition  bgp邊框顏色    bordercolor bdc5 狀態選中  selected    sel當前  current crt顯示  show    show隱藏  hide    hide開啟  open    open關閉  close   close出錯  error   err不可用 disabled    dis

1、class

頭：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　　標籤：tags　　文章列表：list　　提示資訊：msg　　小技巧：tips　　欄目標題：title　　加入：joinus　　指南：guide　　服務：service　　註冊：regsiter　　狀態：status　　投票：vote　　夥伴：partner

2、id

(1)頁面結構　　    容器: container　　    頁頭：header　　    內容：content/container　　    頁面主體：main　　    頁尾：footer　　    導航：nav　　    側欄：sidebar　    欄目：column　　    頁面外圍控制整體佈局寬度：wrapper　　    左右中：left right center(2)導航　　    導航：nav　　    主導航：mainnav　　    子導航：subnav　　    頂導航：topnav　　    邊導航：sidebar　　    左導航：leftsidebar　　    右導航：rightsidebar　　    菜單：menu　　    子功能表：submenu　　    標題: title　　    摘要: summary(3)功能　　    標誌：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　　    友情連結：link　　    著作權：copyright

3、檔案

    主要的 master.css　　    模組 module.css　　    基本共用 base.css　　    布局、版面 layout.css　　    主題 themes.css　　    專欄 columns.css　　    文字 font.css　　    表單 forms.css　　    補丁 mend.css　　    列印 print.css

5、注意事項

/* Header */　　內容區　　/* End Header */

    1.一律小寫;　　    2.盡量用英文;　　    3.不加中槓和底線;　　    4.盡量不縮寫，除非一看就明白的單詞。