- 2.1 規范
1）樣式類名全部用小寫，首字符必須是字母，禁止數字或其他特殊字符，由以字母開頭的小寫字母（a--z）、數字（0--9）、下劃線（_）組成，
2）可以是單個單詞，也可以是組合單詞，要求能夠描述清楚模塊和元素的含義，使其具有語意化，避免使用123456...red，blue，left，right之類的（如顏色、字號大小等）矢量命名，
3）盡量用單個單詞簡單描述class名稱，
4）雙單詞或多單詞組合方式：形容詞_名詞、命名空間_名次、命名空間_形容詞_名詞， - 2.2Class和ID的使用方法
把id留給后臺開發和JS使用，除此之外頁面的page id（如首頁的外層需要一個ID id=“page_index”），頁面結構（header main footer）允許用id命名，其他禁止id使用在樣式表CSS命名中，一律使用class命名， - 2.3命名空間
在編碼思想上，我們可以將頁面拆分成不同的層級（布局、模塊、元件）， - 2.4添加檔案樣式
1）參考外部檔案方式添加樣式
2）嚴禁撰寫標記內代碼，比如就應該寫成,然后在樣式表中去完成樣式代碼撰寫，
3）嚴禁在檔案中使用<style type="”text/css”"></style>代碼塊
4）分割樣式表，降低代碼復雜性，方便管理和維護，但不分割的太細碎，應考慮以后的維護和管理， - 2.5屬性簡寫
為了節省位元組數及檔案大小，以下屬性請使用簡寫方式：
padding ：top right bottom left； margin ： top right bottom right；
border ： style width color； border-top ：style width color；
Border-bottom ：style width color； Border-left ：style width color；
Border-color ：top right bottom left； Border-style ：top right bottom left；
Border-width ：top right bottom left； Background ：color url（image）repeat posotion；
List-style ：type position url（image）； Font-weight：400/700； - 2.6縮寫16進制色值
Color和background-color的屬性值如果使用的是16進制色值，當6個數字兩兩相等時，使用縮寫方式撰寫，如：#996600縮寫成#960 - 2.7字體
1）全域定義字體：body{font：12px arial，helvetica，sans-serif；line-height：1.5；}
2）font-family：
A）等寬字體組合：Arial，Helvetica，sans-serif；
B）不等寬（寬扁）字體組合：Verdana，Trebuchet MS，sans-serif；
C）中文字體：除非內容文本需要，不推薦強制定義 - 2.8頁面采用固定流式布局，使用像素（px）固定元素尺寸，
- 2.9添加必須的注釋
可根據全域、布局、區塊、功能等進行分類和添加注釋，方便維護和代碼搜索， - 2.10CSS通用命名
（1）頁面框架命名，一般具有唯一性，推薦用ID命名
（2）模塊結構命名
（3）導航結構命名
（4）一般元素命名 - 2.11.圖片命名
1）背景圖片：bg001，bg002，bg003......
2）一般圖片：img001，img002，img003......
3）特定圖片：如banner，logo按照具體情況命名
4）按鈕圖片：btn_submit，btn_cancel.....
本文由博客一文多發平臺 OpenWrite 發布！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/499463.html
標籤：其他
上一篇：BUCK 電路PSIM仿真模型搭建之一 (PI模塊穩定性分析)
下一篇：深入剖析多重背包問題（下篇）