css命名規(guī)則

CSS書寫順序

創(chuàng)新互聯(lián)建站于2013年開始，先為橋東等服務建站，橋東等地企業(yè)，進行企業(yè)商務咨詢服務。為橋東企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

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等)

CSS書寫規(guī)范使用CSS縮寫屬性

CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。

去掉小數點前的“0”

簡寫命名

很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦!

16進制顏色代碼縮寫

有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗為主。

連字符CSS選擇器命名規(guī)范

1.長名稱或詞組可以使用中橫線來為選擇器命名。

2.不建議使用“_”下劃線來命名CSS選擇器，為什么呢?

輸入的時候少按一個shift鍵;

瀏覽器兼容問題 (比如使用_tips的選擇器命名，在IE6是無效的)

能良好區(qū)分JavaScript變量命名(JS變量命名是用“_”)

不要隨意使用Id

id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復使用，另外id的優(yōu)先級優(yōu)先與class，所以id應該按需使用，而不能濫用。　

為選擇器添加狀態(tài)前綴

有時候可以給選擇器添加一個表示狀態(tài)的前綴，讓語義更明了，比如下圖是添加了“.is-”前綴。

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

頭：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

狀態(tài)：status

投票：vote

合作伙伴：partner

注釋的寫法:

/* Header */

內容區(qū)

/* End Header */

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

功能區(qū)：shop

標題：title

加入：joinus

狀態(tài)：status

按鈕：btn

滾動：scroll

標簽頁：tab

文章列表：list

提示信息：msg

當前的: current

小技巧：tips

圖標: icon

注釋：note

指南：guild

服務：service

熱點：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權：copyright

注意事項::

1.一律小寫;

2.盡量用英文;

3.不加中槓和下劃線;

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

CSS樣式表文件命名

主要的 master.css

模塊 module.css

基本共用 base.css

布局、版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補丁 mend.css

打印 print.css

css的命名規(guī)范

1.基本命名

頭：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

狀態(tài)態(tài)：status

投票：vote

合作伙伴：partner

注釋的寫法

/* Footer */

內容區(qū)

/* End Footer */

id的命名

容器: container

頁頭：header

內容：content/container

頁面主體：main

頁尾：footer

導航：nav

側欄：sidebar

欄目：column

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

左右中：left right center

id的命名

頁面結構

容器: container

頁頭：header

內容：content/container

頁面主體：main

頁尾：footer

導航：nav

側欄：sidebar

欄目：column

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

左右中：left right center

導航

導航：nav

主導航：mainbav

子導航：subnav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

菜單：menu

子菜單：submenu

標題: title

摘要: summary

功能

標志：logo

廣告：banner

登陸：login

登錄條：loginbar

注冊：regsiter

搜索：search

功能區(qū)：shop

標題：title

加入：joinus

狀態(tài)：status

按鈕：btn

滾動：scroll

標簽頁：tab

文章列表：list

提示信息：msg

當前的: current

小技巧：tips

圖標: icon

注釋：note

指南：guild

服務：service

熱點：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權：copyright

2.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 { }

3.注意事項

1.一律小寫;

2.盡量用英文;

3.不加中杠和下劃線;

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

主要的 master.css

模塊 module.css

基本共用 base.css

布局，版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補丁 mend.css

打印 print.css

css命名規(guī)范

把id留給后臺開發(fā)和JS使用，除此之外頁面的page id(如首頁的外層需要一個ID id="pageIndex")，頁面結構（header main footer）允許用id命名(ID命名建議使用駝峰命名)。其他禁止id使用在樣式表CSS命名中，一律使用class命名。

在編碼思想上，我們可以將頁面拆分成不同的層級（布局、模塊、元件）。

什么是CSS命名空間？

通過統(tǒng)一的命名規(guī)范定義命名的范圍，成為CSS class id命名空間。

布局: 以語義化的單詞layout作為命名空間，例如主欄布局命名 layout-main，只改變layout-命名空間后面的命名，layout始終保留。布局的命名空間為layout-xxx。

模塊：頁面是由一個或多個模塊組成，模塊的英文單詞是module，規(guī)范簡寫成mod，如新聞模塊mod-news，照片展示模塊mod-photo-show。模塊的命名空間為mod-xxx 。

元件：元件是屬于模塊內部的，也可以說模塊是由元件和它內部的自有元素組成。如用戶照片信息元件cell-user-photo。元件的命名空間為cell-xxx 。

文字顏色(命名空間text-xxx)

text-c1, text-c2,text-c3……

背景顏色(命名空間bg -xxx)

bg-c1,bg-c2,bg-c3……

邊框顏色(命名空間border-xxx)

border-c1,border-c2,border-c3……

參考自文章 CSS命名規(guī)則

分享題目：css樣式命名規(guī)范,前端css命名規(guī)范
網站路徑：http://chinadenli.net/article17/dsididj.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站營銷、網站制作、軟件開發(fā)、外貿建站、營銷型網站建設、自適應網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)