CSS書寫規範及CSS Hack

基本原則：

CSS樣式可細分爲3類：自定義樣式、從新定義HTML樣式、連接狀態樣式。

1. 樣式爲設計師自定義的新 CSS 樣式，影響被使用本樣式的區域，用於完成網頁中局部的樣式設定。
   • 樣式名 「.」+「相應樣式效果描述的單詞或縮寫」例：「 .shadow 」；
   • 文字樣式樣式名「.no」+「字號」+「行距」+「顏色縮寫」例：「 .no12 」 、「 .no12-24 」。
2. 義HTML樣式爲設計師從新定義已有的HTML標籤樣式，影響所有的被設定標籤樣式，用於統一網頁中某一標籤的樣式定義。樣式名「HTML標籤」例：hr { border: 1px dotted #333333 }
3. 態樣式爲設計師對連接不一樣狀態設定特殊樣式，影響被使用本樣式區域中的連接。
   • 該樣式寫法有2種： a.nav:link    nav.a:link  第一種只能修飾<a>標籤中；第二種能夠修飾全部包含有<a>標籤的其餘標籤。
   • 頁面內的樣式加載必須用連接方式<link rel="stylesheet" type="text/css" href="style/style.css">。

注意細則： 

1. 協做開發及分工: i會根據各個模塊, 同時根據頁面類似程序, 事先寫好大致框架文件, 分配給前端人員實現內部結構&表現&行爲; 共用css文件base.css由i書寫, 協做開發過程當中, 每一個頁面請務必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
2. class與id的使用: id是惟一的並是父級的, class是能夠重複的並是子級的, 因此id僅使用在大的模塊上, class可用在重複使用率高及子級中; id原則上都是由我分發框架文件時命名的, 爲JavaScript預留鉤子的除外;
3. 爲JavaScript預留鉤子的命名, 請以 js_ 起始, 好比: js_hide, js_show;
4. class與id命名: 大的框架命名好比header/footer/wrapper/left/right之類的在2中由i統一命名.其餘樣式名稱由 小寫英文 & 數字 & _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 儘可能使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.
5. 規避class與id命名(此條重要, 如有不明白請及時與i溝通):
   • a：經過從屬寫法規避, 示例見d；
   • b：取父級元素id/class命名部分命名, 示例見d；
   • c：重複使用率高的命名, 請以本身代號加下劃線起始, 好比i_clear；
   • d：a、b兩條, 適用於在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面代碼<div id="mainnav"></div>中加入新的div元素。
     • 按a命名法則: <div id="mainnav"><div class="firstnav">...</div></div>； 樣式寫法:  #mainnav  .firstnav{.......}。
     • 按b命名法則: <div id="mainnav"><div class="main_firstnav">...</div></div>； 樣式寫法:  .main_firstnav{.......}。
6. 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等.我所列出的這些屬性只是最經常使用到的, 並不表明所有;
7. 書寫代碼前, 考慮並提升樣式重複使用率;
8. 充分利用html自身屬性及樣式繼承原理減小代碼量, 好比: <ul class="list"><li>這兒是標題列表<span>2010-09-15</span></ul> 定義ul.list li{position:relative}  ul.list li span{position:absolute; right:0}便可實現日期居右顯示
9. 樣式表中中文字體名, 請務必轉碼成unicode碼, 以免編碼錯誤時亂碼;
10. 背景圖片請儘量使用sprite技術, 減少http請求, 考慮到多人協做開發, sprite按模塊製做;
11. 使用table標籤時(儘可能避免使用table標籤), 請不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現, 應儘量的利用table自身私有屬性分離結構與表現, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我會初始化表格樣式)
12. 杜絕使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容ie8;
13. 用png圖片作圖片時, 要求圖片格式爲png-8格式,若png-8實在影響圖片質量或其中有半透明效果, 請爲ie6單獨定義背景: background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
14. 避免兼容性屬性的使用, 好比text-shadow || css3的相關屬性;
15. 減小使用影響性能的屬性, 好比position:absolute || float ;
16. 必須爲大區塊樣式添加註釋, 小區塊適量註釋;
17. 代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 後期優化i會統一處理;

命名規則：

(一)模塊

  頭：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   註冊：regsiter   狀態：status   投票：vote   合做夥伴：partner

(二)註釋的寫法：

  /* Footer */   內容區   /* End Footer */

(三)id的命名：

  (1)頁面結構   容器: container   頁頭：header   內容：content/container   頁面主體：main   頁尾：footer   導航：nav   側欄：sidebar   欄目：column   頁面外圍控制總體佈局寬度：wrapper   左右中：left right center     (2)導航   導航：nav   主導航：mainbav   子導航：subnav   頂導航：topnav   邊導航：sidebar   左導航：leftsidebar   右導航：rightsidebar   菜單：menu   子菜單：submenu   標題: title   摘要: summary     (3)功能   標誌：logo   廣告：banner   登錄：login   登陸條：loginbar   註冊：regsiter   搜索：search   功能區：shop   標題：title   加入：joinus   狀態：status   按鈕：btn   滾動：scroll   標籤頁：tab   文章列表：list   提示信息：msg   當前的: current   小技巧：tips   圖標: icon   註釋：note   指南：guild   服務：service   熱點：hot   新聞：news   下載：download   投票：vote   合做夥伴：partner   友情連接：link   版權：copyright\

基本樣式：

/* CSS Document */ body {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;} div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}   table,td,tr,th{font-size:12px;} li{list-style-type:none;} img{vertical-align:top;border:0;} ol,ul {list-style:none;} h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;} address,cite,code,em,th {font-weight:normal; font-style:normal;} .fB{font-weight:bold;} .f12px{font-size:12px;} .f14px{font-size:14px;} .left{float:left;} .right{float:right;}   a {color:#2b2b2b; text-decoration:none;} a:visited {text-decoration:none;} a:hover {color:#ba2636;text-decoration:underline;} a:active {color:#ba2636;}   重定義的最早，僞類其次，自定義最後，便於本身和他人閱讀！   不一樣瀏覽器上字號保持一致，字號建議用點數pt和像素px來定義，pt通常使用中文宋體的9pt 和11pt，px通常使用中文宋體12px 和14.7px 這是通過優化的字號，黑體字或者宋體字加粗時，通常選用11pt 和14.7px 的字號比較合適。中英文混排時，咱們儘量的將英文和數字定義爲verdana 和arial 兩種字體。

什麼是CSS

   因爲不一樣的瀏覽器，甚至同一瀏覽器的不一樣版本對CSS的解析認識不同，致使生成的頁面效果不一致，寫出針對不一樣瀏覽器CSS code就稱爲CSS hack。

  經常使用的CSS hack有三種方式，CSS內部hack,選擇器hack、HTML頭部，其中第一種最經常使用。

  有關這三種方式請參考：http://www.cnblogs.com/dolphinX/p/3292630.html

  CSS Hack的順序

  使用 Firefox 做爲平臺, 只要代碼寫得夠標準, 其實要 Hack 的地方不會不少的, IE 之外的瀏覽器幾乎都不會有問題, 因此能夠暫時忽略,順序以下：Firefox -> IE6 -> IE7 -> 其餘