css編寫規範

規範的編寫，有助於代碼的閱讀性；
無論對於後端開發人員，仍是之後的維護都有很好的，便利性！因此在此總結，在總結我的書寫習慣。但願對朋友們有所幫助！

一：經過w3c 標準
二：css樣式一概小寫
三：使用Reset但並不是全局Reset（Reset並非一成不變的，具體還須要根據項目的不一樣 需求作適當的修改）
四：良好的命名習慣
1：面向對象命名（navgation,blaner,footer.....）
2：面向功能性命名(float_right,float_left....)
3：「_」連接命名：
4：私有樣式命名規範：」前綴_位置縮寫/功能/」 
如：該模塊是屬於產品就能夠用product爲前綴，
上中下就能夠依次是。product_t,product_m,product_b，
中間又分爲左右結構，那就是product_m_l,product_m_r。
五：代碼縮寫 font：normal small-caps bold 110%/1.3 serif;
六：利用CSS繼承（如已經繼承上級樣式則再也不重寫，故衡量全局共一樣式，寫出全局公共樣式）
七：使用多重選擇器
八：適當的代碼註釋
九：給你的CSS代碼排序，按字母排序
建議遵循：佈局定位屬性–>自身屬性–>文本屬性–>其餘屬性
此條可根據自身習慣書寫, 但儘可能保證同類屬性寫在一塊兒. 
屬性列舉：
佈局定位屬性主要包括：margin＆padding＆float（包括clear）＆position（相應的 top,right,bottom,left）＆display＆visibility＆overflow等；
自身屬性主要包括：width & height & background & border; 
文本屬性主要包括：font＆color＆text-align＆text-decoration＆text-indent等；
其餘屬性包括：list-style(列表樣式)＆vertical-vlign＆cursor＆z-index(層疊順序)  ＆zoom等
十：保持CSS的可讀性
1：屬性多的分行寫，屬性少於3個能夠寫一行
2：分個樣式間用空格隔開
3：多重選擇器間用class隔開
.nav, .nav_left, .content_right{
float:left;
margin:10px 5px;
padding:5px 0 10px 5px;/*佈局*/

background-color:#3399cc
border:1px solid #FFF;/*自身*/

color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;/*文本*/

z-index:10;/*其它*/
}
.nav, .nav_left, .content_right{background-color:#3399cc; color:#666; height:300px;}
十一：選擇更優的樣式屬性值 border：0變爲border：none
十二：使用<link>代替@import
十三：使用外部樣式表
十四：避免使用CSS表達式（Expression）
十五：代碼壓縮
十六：值爲0的不加單位H1{margin：0px; padding：0px;} = H1{margin：0;padding：0;}
十七：顏色值簡寫：#333333-------#333;
十八：主要文件命名與html項目名稱對應(如：yunzhi.css)-----全小寫，英文「-」分開（與html文件名同樣方式）；
十九：
二十：樣式以class爲主，不用id
二十一：重置樣式reset：
/** 清除內外邊距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 結構元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表單元素 */
th, td, /* table elements 表格元素 */
img/* img elements 圖片元素 */{
border:medium none;
margin:0;
padding:0;
}
/** 設置默認字體 **/
body,button, input, select, textarea {
font:12px/1.5 '宋體',tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size:100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style:none; }
/** 重置超連接元素 **/
a { text-decoration:none; color:#333;}
a:hover { text-decoration:underline; color:#F40; }
/** 重置圖片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse:collapse; border-spacing:0;
二十二：經常使用命名
(1)頁面結構類容器： container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制總體佈局寬度：wrapper
(2)導航類
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
位置導航： crumb
菜單：menu
子菜單：submenu
麪包屑：breadcrumb(即頁面所處位置導航提示)
(3)網頁內容類
標題： title
摘要： summary
箭頭： arrow
商標： label
網站標誌： logo
轉角/圓角： corner
橫幅廣告： banner
欄目： column
子菜單： subMenu
搜索： search
搜索框： searchBox
登陸： login
工具條： toolbar
下拉： drop
標籤頁： tab
當前的： current
列表： list
滾動： scroll
服務： service
提示信息： msg
新聞： news
小技巧： tips
下載： download
欄目標題： title
熱點： hot
加入： joinus
註冊： regsiter
指南： guide
友情連接： friendlink
狀態： status
版權： copyright
按鈕： btn
合做夥伴： partner
投票： vote
頭：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