2、學什麼技術之CSS程式碼規範
阿新 • • 發佈：2019-02-07
學什麼技術之CSS程式碼規範
CSS程式碼規範
語言規範
樣式檔案中不要出現大寫的標籤定義, 不要對 JS 鉤子進行樣式定義。
避免出現
.a.b之類的定義, 如果做hack使用請註明。 ( ie6 不支援此定義 )稀奇古怪的
hack請加註釋。避免使用
!important, 如果必須請加註釋。縮排以4個空格為基本單位。
樣式使用豎排, 不要使用橫排以及 n 級縮排等。
對於所有
hack請放到每個樣式定義的最後邊。class selector 層級儘量控制在 5 層以內。
嚴格控制
important關健字的使用場景，儘量少用。
CSS 命名規則
樣式類名全部用小寫，首字元必須是字母，禁止數字或其他特殊字元。由以字母開頭的小寫 字母
（a-z）、數字（0-9）、中劃線（-）組成。可以是單個單詞，也可以是組合單詞，要求能夠描述清楚模組和元素的含義，使其具有語義 化。避免使用
123456…,red,blue,left,right之類的（如顏色、字號大小等）向量命名 ，如class="left-news"、class="2"，以避免當狀態改變時名稱失去意義。儘量用單個 單詞簡單描述class名稱。雙單詞或多單詞組合方式：形容詞-名詞、名稱空間-名次、名稱空間-形容詞-名詞。例如：
news-list、mod-feeds、mod-my-feeds、cell-title
通用命名
- 頁面框架命名，一般具有唯一性，推薦用ID命名
ID名稱|命名|ID名稱 |命名 :---------------|:---------------|:---------------|:--------------- 頭部|header|主體| main 腳部|footer|容器|wrapper 側欄|sidebar|欄目|column 佈局|layout||
- 模組結構命名
Class名稱|命名|Class名稱|命名
:---------------|:---------------|:---------------|:---------------
模組(如：新聞模組) |mod (mod-news) |標題欄 |title
內容 |content |次級內容 |sub-content
- 導航結構命名
Class名稱|命名|Class名稱|命名 :---------------|:---------------|:---------------|:--------------- 導航 |nav |主導航 |main-nav 子導航| sub-nav |頂部導航 |top-nav 選單 |menu |子選單 |sub-menu
- 一般元素命名
Class名稱|命名|Class名稱|命名
:---------------|:---------------|:---------------|:---------------
二級| sub |麵包屑| breadcrumb
標誌 |logo |廣告 |bner(禁用banner或ad)
登陸 |login |註冊 |register/reg
搜尋 |search |加入 |join
狀態 |status |按鈕 |btn
滾動 |scroll |標籤頁 |tab
文章列表 |list| 短訊息| msg/message
當前的 |current |提示小技巧 |tips
圖示 |icon| 註釋| note
指南 |guide |服務 |service
熱點 |hot |新聞 |news
下載 |download |投票 |vote
合作伙伴 |partner |友情連結 |link
版權| copyright| 演示| demo
下拉框 |select |摘要 |summary
翻頁 |pages| 主題風格| themes
設定 |set |成功| suc
按鈕 |btn| 文字| txt
顏色 |color/c| 背景 |bg
邊框 |border/bor| 居中| center
上 |top/t |下| bottom/b
左 |left/l |右 |right/r
新增 |add |刪除 |del
間隔 |sp| 段落 |p
彈出層 |pop |公共 |global/gb
操作| op |密碼 |pwd
透明 |tran| 資訊 |info
重點 |hit |預覽 |pvw
單行輸入框| input| 首頁 |index
日誌 |blog |相簿| photo
留言板 |guestbook| 使用者| user
確認 |confirm |取消 |cancel
報錯 |error||
- 全域性面板樣式
文字顏色(名稱空間text-xxx)
```
text-c1, text-c2,text-c3……
```
背景顏色(名稱空間bg -xxx)
```
bg-c1,bg-c2,bg-c3……
```
邊框顏色(名稱空間border-xxx)
```
border-c1,border-c2,border-c3……
```
屬性使用
- z-index
```
//右側導航: 100-109
//彈窗: 110-119
//頂部: 90-99
//搜尋: 80-89
//導航: 70-79
//主內容: 50-59
//底部: 40-49
```
- css屬性使用縮寫。
**(╳)**
```css
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
```
**(√)**
```css
padding: 1px 2px 3px 4px;
```
- 0不帶單位 (動畫0%除外)。
**(√)**
```css
margin: 0;
font-size: 0;
```
**(╳)**
```css
margin: 0px;
font-size: 0px;
```
- 使用簡寫的十六進位制值。
**(√)**
```css
color: #edf;
```
**(╳)**
```css
color: #eeddff;
```
border以width, style, color的順序書寫,width單位使用px/rem, 例如:
```css
border: 1px solid #000;
border-top: 1px solide #000;
border-top-color: red;
border: 0;
```
background:以color, image, repeat, position的順序來書寫,url省略引號, 例如:
```css
background:#003 url(http://www.taobao.com/loading.png) no-repeat 0 0;
background-color:red;
```
儘量不使用 CSS expression, 大量使用時效能較差, 應儘量避免使用。
CSS屬性書寫順序參考:
```
位置屬性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)
display
float
position
z-index
width
height
overflow
left(right)
top(bottom)
text-xxx
font-xxx
color
border
background
cursor
```
- 為了節省圖片的開銷，有時候小三角形可以用css border來生成, 看看本規範裡面小三角按鈕[參考]:
註釋規範
- 檔案頭註釋:
```css
/**
* Style for module header.
* @author djune
* @version 1.0.0 build 2010-12-8
* @modified xxx 2011-2-18
*/
```
對於html模組需要加註釋。
奇葩點的 hack 要加註釋。
```css
background-color: transparent; /* flexible background gradient */
font-family: serif; /* text floating bug in ie6 */
```
- 修改別人的 CSS 請添加註釋
```css
/* 主要修改IE8瀏覽器相容性問題 djune 2013-09-26 13:21 */
```
CSS Module (模組定義)
通常我們的頁面模組html結構可以寫成這樣(.hd, .bd, .ft):
通過語義化含義判斷我們的結構具體怎麼分配到這三個基本結構。
html:
```html
<div id="mod-xxx" class="mod-xxx">
<div class="hd">Module Title</div>
<div class="bd">
Module body inner html constructs
</div>
<div class="ft">just a footer</div>
</div>
```
scss
```css
.mod-xxx {
border: 1px solid #ccc;
.hd { font-weight: bold; }
.bd { paddinig: 3px; }
.ft { margin-botto: 3px; }
}
```
css:
```css
.mod-xxx { border: 1px solid #ccc; }
.mod-xxx .hd { font-weight: bold; }
.mod-xxx .bd { paddinig: 3px; }
.mod-xxx .ft { margin-botto: 3px; }
```