[TOC]
## 前言
本文就css代碼規范進行簡單的整理,不完善以及不正確之處歡迎大家批評指正。
## 選擇器
* 選擇器命名
選擇器命名,class命名時選擇語義化的,不建議使用直接樣式效果,比如.red,.fontBold,另外整體的樣式文件中命名建議使用統一的規則,或者駝峰式,或者中劃線分割,命名注意縮寫,避免與id重名,不建議通過1 2 3等序號命名。關于命名規則以及常見類名可以本站搜索相關文章
* 選擇器選擇原則
基本的選擇器中,盡量使用類選擇器;復雜選擇器中,盡量少使用層次、屬性的相關選擇器。
* 樣式重用
樣式重復可以一定程度的避免,用類樣式來提煉公共樣式,建議多用樣式的預處理,比如less。基本使用類選擇器實現重用最簡單實用。
* 合理的避免id的使用
原因有二:一個是id修飾權重比較高,不容易被class修改重定義;第二個,id一般被用來定義特定模塊的。如果該模塊是可重用的,或者不具有特殊意義的不建議使用。
* 篩選出同時具有
中間沒有任何間隔,與群組選擇器,后代選擇器區分開
* 非主流選擇器
主要包括:偽類選擇器,結構選擇器,偽元素,屬性選擇器,語言選擇器等。可以本站搜索選擇器攻略查看所有的選擇器分類以及使用。基于兼容性考慮,建議大家慎用。
* 選擇器層級
層級關系確定在3層以內,去除不必要的層級關系,簡化dom結構或者樣式組件結構。
## 樣式分類
* 全局樣式
顧名思義,沒有任何限制條件的樣式,可以任何位置使用并達到其顯示效果。如果可能有樣式代碼沖突的,建議寫在樣式組合中最后。定義全局樣式的時候,注意樣式污染的問題。一般建議用`.c- `來區分。
* 布局樣式
一般用于頁面布局,我們經常會把頁面布局和模塊混合起來,或者根本就不區分。這實際是因為我們對樣式理解不夠深刻。實際。從視圖分析,很多模塊在寬高以及整體布局上都是基于整體布局的。而一些整體布局又是可以重用的,所以這部分建議單獨分出來,提高開發效率。一般建議用`.g- `來區分。
* 模塊樣式
以模塊的思維去寫樣式代碼,按照層級關系依次展開樣式,保證模塊清晰同時使得一些樣式名稱可復用,比如title,price等。其中模塊樣式頂級也可以理解為命名空間,模塊子樣式可以追加模塊樣式前綴,比如header-nav。模塊樣式是樣式代碼中占據比例最多的部分,針對具體樣式,希望既能做到針對業務,又能提煉出可復用、耦合度低的優質模塊。一般建議用`.m- `來區分。
* 組件樣式
頁面中總有一部分常規組件是我們經常用的,定義好他們對我們開發工作有事半功倍的效果。這些組件常見的有,按鈕,單選框,多選框,下拉框,時間選擇控件等。一般建議用`.u- `來區分。
* 功能樣式(交互樣式)
有些頁面中的元素是有額外的含義的,涉及到這類樣式時,有時有特定的交互,或者功能,或者內容,我們針對這部分定義為功能樣式,比如刪除,查看詳情,增加,搜索,這些在涉及具體功能時追加的效果,我們會寫在功能樣式中。一般建議用`.f- `來區分。
* 皮膚樣式
任何一個網站或者頁面都有其布局思想,在這個整體的布局當中,顏色自然是不可缺少的,針對主色,交互色,響應顏色,配色等,我們都會把這一類歸到皮膚樣式中。一般建議用`.s- `來區分。
## 樣式優化
* 合理利用繼承和默認
1. 可繼承的樣式如果是正確的,不用重寫;如果是不對的,糾正;
2. 任何樣式都有默認值。或者是繼承來的默認值,針對默認值要清楚,決定是否調整
* 抽離公共樣式
代碼中有超過2個類超過3行以上公用代碼,建議抽離公共樣式到公共區或者提煉公共樣式
* 復合屬性縮寫
比如font,border,margin,padding,background等
* 減少層級關系
層級關系越多,代碼量越大,同時訪問越慢
* 使用高效能的選擇器
多使用class選擇器,css的查詢順序為從右向左,所以最后一個選擇器基本決定了你第一次匹配得到的整體數量。
* 重繪與重排
影響標簽顯示樣式的叫重繪;影響標簽大小-盒模型,位置關系的稱為重排。盡量減少這兩種,如果有需要,優先選擇用重繪代替重排。
* 待補充
## 書寫規范
1. 規則完成一組之后換行,
2. 選擇器開始語法之前大括號前面加空格。
3. 只有單行樣式時放一行,兩行以上每行樣式一行,每一行添加分號,最后一行也加。
4. 每個樣式屬性值前添加空格而屬性名之后不加空格。
5. 數值為0的不用加單位,數值小于1的前面的0可以省略。
6. 沒有邊框的時候寫border:none
7. 減少使用低性能的選擇器,比如標簽,*,多層
8. 除了顏色以及字體外,所有的代碼小寫,如果有引號使用單引號
9. 字體名稱請映射成對應的英文名
10. 背景圖片請合理使用csssprites,按照模塊、業務、頁面來劃分均可
11. css背景圖片的文件類型,請按照以下原則來保存:如果背景圖片有動畫,則保存成gif,如果沒有動畫,也沒有半透明效果,則保存成png-8,如果有半透明效果,則保存成png-24
12. 清除浮動采用樣式,不使用增加空標簽的方式
13. 避免過小的背景圖片平鋪
14. 減少使用important
15. 待補充...
## 編寫順序
1. 顯示屬性
display/list-style/position/float/clear
2. 盒子模型
width/height/margin/padding/border
3. 背景
background
4. 行高 文本屬性其他
line-height,color/font/text-decoration/text-align/,
text-indent/vertical-align/white-space/content,
cursor/z-index/zoom
5. css3屬性
transform/transition/animation/box-shadow/border-radius
6. 鏈接的樣式請嚴格按照如下順序添加
a:link -> a:visited -> a:hover -> a:active
## 注釋規范
注釋長度要求:注釋中的每一行長度不超過40個漢字,或者80個英文字符
* 文件頂部注釋
``` css
/*
* @description: xxxxx中文說明
* @author: zhifu.wang
* @update: zhifu.wang (2012-10-17 18:32)
*/
```
* 模塊注釋,模塊注釋必須單獨寫在一行
``` css
/* module: module1 by zhifu.wang */
```
* 單行注釋,單行注釋可以寫在單獨一行,也可以寫在行尾
``` css
/* this is a short comment */
```
* 多行注釋 :多行注釋必須寫在單獨行內
``` css
/*
* this is comment line 1.
* this is comment line 2.
*/
```
* 特殊注釋 :用于標注修改、待辦等信息
``` css
/* TODO: xxxx by zhifu.wang 2012-10-18 18:32 */
/* BUGFIX: xxxx by zhifu.wang 2012-10-18 18:32 */
```
## 瀏覽器hack
* 瀏覽器的hack :能少用就少用hack ,瀏覽器的hack如下,注意按照一定的順序書寫:
-webkit-,-moz-,-o-,-ms-,通用的,針對ie不同版本的,歸納如下:
``` css
IE6 _property: value
IE7 +property: value
IE6/7 *property: value
IE6/7/8/9 property: value\9
```
## 其他
待補充...
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi