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

筆記作者：ruijie