# CSS-畫骨-書寫規范
## 通用寫法
- 調用:
* 用<link>的方法調用css樣式
* 盡量避免使用@import調用方法
* 避免使用行內樣式
* 避免在html頁面中書寫樣式
- css rest
- 盡量避免使用css hack
* hack for IE6 _color:red;
* hack for IE7 IE6: +color:red;
* hack for IE8 IE7 IE6 : color:red\9;
* hack for IE9 IE8 IE7 IE6 : color:red\0;
- 注意瀏覽器私有屬性的書寫
- 建議書寫順序:
a、顯示屬性
display | list-style | position | float | clear | cursor …
b、盒模型(自身屬性)
width | height | margin | border | padding
c、文字
color | font
d、文本屬性
vertical-align | white-space | text-decoration | text-align | content …
e、背景
background
f、內容管理、層級
overflow | z-index | zoom
- 在制作頁面時,需先去basic文件中查詢是否已經存在設計圖中的組件,如果有,直接調用;如果沒有,添加相應組件。
- 若遇到高度重復的組件,則提取至公共組件文件中,若只是本頁面組件,則提取至當前頁面css。組件用common注釋。
## MIRROR CSS
- 預設
- 標簽重置
- 預設方法 .f-
- 布局 .g-
- UI .ui-
- 通用模塊 .m-
- 詳細
- 其他class名 id名 全部用“英文小寫”或“小駝峰命名法”。
- js通過js屬性進行調用 : 盡量脫離標簽,樣式名等
- z-index:
* 置頂,側漂: 100 - 150
* 常規定位:10-50
- margin 向下寫
一般情況下,盒子之間的上下間距,使用margin-bottom進行定位。
- text-index:
取值盡量小,禁止出現-9999px類似情況
- 基本規范
- 申明及解釋
- 項目的構建及維護
- 項目構建
- 項目自測
- 項目維護
- 書寫規則
- 圖片規范
- html書寫規范
- CSS書寫規范
- JAVASCRIPT編寫規范
- 注釋書寫規范
- 場景分類
- PC站-固定寬度
- PC站-響應式
- 移動端網站
- 移動端活動
- 模塊的創建和管理
- 附件A 網站命名列表
- 附件B 常用技術列表
- 實例代碼
- 前端框架
- 布局
- 柵格化布局
- 響應式布局
- 常規組件
- 面包屑
- 選項卡
- 分頁
- 表單-模擬單選
- 表單-模擬多選
- 表單-模擬下拉菜單
- 篩選-simple
- 評分
- 導航-浮動導航
- 滾動到頂部
- 網站通用代碼
- 客服代碼
- 常見問題解決方案
- 兼容性問題
- 移動端通用
- andorid常見問題
- IOS常見問題
- 多媒體-視頻
- 瀏覽器判斷
- 動畫庫
- 寬高問題
- JQUERY常用組件
- 彈出層
- 多媒體-視頻音頻
- 幻燈片
- 時間與日期
- 分頁
- 多級聯動
- 表單美化
- 繪圖及動畫插件
- 前端工具及網站
- H5生成
- 圖片處理
- 在線代碼
- web字體
- 手冊資料
- 其他工具
- 牛人blog
- 前端園地
- 交互網址
- 前端優化
- 元素動畫