HTML&css規范 · CAP開發文檔

# html&css規范瀏覽器兼容ie8+，如要使用動畫，則采用優雅降級處理ie8，9效果。 ## html規范 ### 基礎 - 使用html5文檔申明 - 盡量使用更加語義化的html5標簽，參考：[Sections and Outlines of an HTML5 Document](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document)，考慮到`ie8`不支持html5標簽，可以引入html5.js - 若需支持響應式設計（pc+pad）,則需要為ie8引入[respond.js](https://github.com/scottjehl/Respond) - 一般按照從上至下、從左到右的視覺順序書寫HTML結構，但有時候為了便于搜索引擎抓取或布局考慮，我們也會不按照視覺順序書寫 - HTML標簽名、屬性名必須全部采用小寫，屬性必須加引號，并且必須閉合，單標簽也必須閉合，如：`<input type=”text” />`、`<br />` - 結構(html)，表現(css)，行為(js)相分離，避免直接將css或js寫在標簽結構里 - 標簽掛靠的class不要過多，最多別超過4個 - 請不要在內聯元素中嵌入塊級元素，如span里面有div標簽，a里面包裹h2等(h5 a元素可以嵌套塊級元素) - ul/ol的直接子元素只能是li - 數據類內容，大膽的使用table - a元素提供title屬性，img提供alt屬性，如果img大小固定，請記得使用width和height屬性（如`<img src="" alt="" width="200" height="100" />`） - 頁面中不要使用&nbsp進行縮進，如需縮進，使用CSS的text-indent來控制，如text-indent:2em用于中文的縮進兩個空格 - js操作屬性，請以`data-`為前綴 - i標簽用于圖標 ### 注釋采用類似標簽閉合的寫法，與HTML統一格式；注釋文案兩頭空格。允許只有開始注釋！  <div class="header"> <div class="inner-center"></div> </div>  ### 常用結構 #### PC空白模板 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="format-detection"content="telephone=no,email=no"/> <title>page title</title> </head> <body></body> </html> 如果需要ie8支持html5標簽或者響應式，請引入對應的js，如下面采用html注釋對ie8引入html5標簽支持和響應式支持  #### Mobile空白模板 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta content="yes" name="apple-mobile-web-app-capable"/> <meta content="black" name="apple-mobile-web-app-status-bar-style"/> <meta name="format-detection"content="telephone=no,email=no"/> <title>page title</title> </head> <body></body> </html> #### 常規布局一般來說header和footer可能有全屏背景，所以居中部分添加`.inner-center`，container我們可以設計成全屏或居中，而其余的全屏部分我們可以獨立出來，與header，container等并列，如全屏的滾動圖片 header.header>.inner-center^ [section.featured>.inner-center^] div.container.clearfix>aside.aside-left+main.main.clearfix+aside.aside-right^^ footer.footer>.inner-center #### 區塊邊欄區塊，特殊化區塊請使用`.x-block`或`.aside-block--xxx` .aside-block>.block-hd>h3.block-tt+.block-bd 內容區塊，特殊化區塊請使用`.x-block`或`.section-block--xxx` .section-block>.block-hd>h2.block-tt+.block-bd #### 等分 //兩列等分 .col-half.clearfix>.col-block*2>(.block-hd>h2.block-tt)+.block-bd //三列等分 .col-third.clearfix>.col-block*3>(.block-hd>h2.block-tt)+.block-bd //四列等分 .col-quarter.clearfix>.col-block*4>(.block-hd>h2.block-tt)+.block-bd ### 常用html轉義符 - space空格(` `) - 1個漢字空格(`&emsp;`) - 小于號<(`<`) - 大于號>(`>`) - 連接號&(`&`) - 雙引號"(`"`) - 單引號'(`'`) - 版權?(`©`) - 間隔符·(`&middot`) - 人民幣￥(`¥`) ## scss/css ### 基礎 * scss/css文件開始添加編碼：`@charset "utf-8";` * 簡寫模式，如：`border:1px solid #ccc;` * 請不要直接定義標簽樣式，如`span{},div{}` * 選擇器如無特殊情況最多不要超過4層，請使用高效率選擇器,可參閱：[CSS選擇器的優化](http://www.w3cplus.com/css/css-selector-performance) * 多數值為0時可以省略單位（好像`0deg`要帶單位，某個瀏覽器有bug，然后`@keyframes`的`0%`單位不可省略） * `z-index`一般以5為一個步長（如50,55,60），方便以后增加或修改 * 如果是自己寫前綴，請把所有前綴寫在標準的前面(如`-webkit-transition:0.3s;transition:0.3s;`)，關于前綴情況，可參考[can i use](http://caniuse.com/) * 使用`!important`請小心，確認是否有必要 * 使用`clearfix`或`overflow`或`inline-block`清除子元素的浮動，而不是空標簽 * 不使用影響到頁面性能expression表達式與filter，`opacity`的filter兼容除外 * 禁止使用`.parent *{}`選擇器，即`*{}`選擇器只能單獨使用，絕對禁止在前面再加上父級元素 * ie8只支持`:first-child`選擇器，而不支持`:last-child`選擇器，所以列表類的元素，可以使用`:first-child`對第一個元素進行特殊化處理，如需要對最后一個元素特殊化處理，則先考慮能否轉成第一個元素，如果不能則對最后一個元素添加class`last` * ie8只支持`:before/after`寫法，不支持`::before/after`寫法 ### scss文件注意事項 * 基礎文件名以`_`為前綴，導入時可以省略`_`和后綴名`.scss`，默認不編譯成css文件 * 合理定義變量及使用`@mixin` * 選擇器合理嵌套，最多嵌套不超過四層 * 不要`@extend .class`，因為會產生冗余代碼，如非得使用`@extend`，最好先定義一個`%` * 可以使用自動化工具生成各個瀏覽器前綴 ### class命名 * 小寫英文，單詞之間使用中劃線（-）鏈接，如`line-item` * 列表類的class可采用`.*-list>.*-item>.item-*`,如`ul.line-list>li.line-item>span.item-title` * 特殊化某個類，采用兩個中劃線連接（--），如`.line-list.line-list--arrow`，基礎類是`.line-list`右側沒有箭頭，如需要右側有箭頭的可以追加類`.line-list--arrow` * 圖標的class以`.icon-`為前綴，字體圖標的class為`.icon-font.i-name`，另字體圖標可參考字體圖標規范 ### 常用class關鍵詞： * 布局類：header,footer,container,main,content,aside,page,section * 包裹類：wrap,inner * 區塊類：region,block,box * 結構類：hd,bd,ft,top,bottom,left,right,middle,col,row,grid,span * 列表類：list,item,field * 主次類：primary,secondary,sub,minor * 大小類：s,m,l,xl * 狀態類：active,current,checked,hover,fail,success,warn,error,on,off * 導航類：nav,prev,next,breadcrumb,forward,back,indicator,paging,first,last * 交互類：tips,alert,modal,pop,panel,tab,accordion,slide,scroll,overlay * 星級類：rate,star * 分割類：group,seperate,divider * 等分類：full,half,third,quarter * table類: table,tr,td,cell,row * 圖片類：img,thumbnail,original,album,gallery * 語言類：cn,en * 其他語義類：btn,close,ok,cancel,switch; link,title,info,intro,more,icon; form,label,search,contact,phone,date,email,user; view,loading... ### 選擇器權重 * !important * 行內樣式，指的是html文檔中定義的style * ID選擇器 * 類，屬性選擇器和偽類選擇器 * 元素和偽元素 ### 雪碧圖注意事項： * 單個圖標之間必須保留空隙，空隙大小由容器大小及顯示方式決定。這樣做的好處是既考慮了“容錯性”又提高了圖片的可維護性。 * 圖標的排列方式排列方式分為以下幾種：橫向排列（容器寬度有限）、縱向排列（容器高度有限）、斜線排列（容器寬高不限），靠左排列（容器背景居左）、靠右排列（容器背景居右）、水平居中排列（容器背景水平居中）、垂直居中排列（容器背景垂直居中）。 * 合并后圖片大小不宜超過50K，建議大小在20K-50K之間。 * 請保留雪碧圖片的psd源文件，以方便后來的增刪改，后來的所有的修改請在psd源文件中修改，然后再導出圖片。合并圖片的一些原則（專題頁面除外）： * 按照圖片排列方式，把排列方式一樣的圖片進行合并，便于樣式控制。 * 按照模塊或元件，把同屬于一個模塊或元件的圖片進行合并，方便模塊或元件的維護。以導航模塊為例，整個導航欄的icon為一個雪碧圖片，而不是和其他的混合在一起，方便后來的修改或擴展。 * 按照圖片大小，把大小一致或差不多的圖片進行合并，可充分利用圖片空間。 * 按照圖片色彩，把色彩一致或差不多的圖片進行合并，保證合并后圖片的色彩不過于豐富，可防止色彩失真。最后請不要過度使用sprite背景圖片，而是按照或頁面，或模塊，或元件的方式合并為雪碧圖，更好的考慮到未來的修改或擴展。 ### css注釋 css塊級注釋及單行注釋 /* ------------------------------------------------- * 塊級注釋 * ------------------------------------------------- */ /* 單行注釋 */ scss塊級注釋及單行注釋 // 塊級注釋 //---------------------------------------------------- // 單行注釋 [scss文件中的html結構注釋法](http://imweb.io/topic/558cba8eedd682a62453a6bd) - 以emmet書寫方法為骨架 - ()表示特殊化追加的class，[]表示需要的屬性，｛｝表示標簽內的文本內容 - 單行判斷采用單行注釋法，以if開頭 - 多行判斷采用if,else,end if ### 給各大瀏覽器打hack 請以標準瀏覽器為準書寫css代碼，如遇兼容問題，先考慮換實現方法，在萬不得已的情況下，采用hack解決 **firefox** /* Firefox 3+ */ @-moz-document url-prefix() {} **chrome及safari** /* Chrome, Safari 3+ */ @media screen and (-webkit-min-device-pixel-ratio:0) {} **ie8-** .selector { property: value\9; } filter不可使用該方法 **ie9+及其他高級瀏覽器 ** :root .selector {} **ie10+及其他高級瀏覽器** html[lang='\ en'] .selector {} 更多請查閱：[hack速查英文版](http://browserhacks.com/) / [hack速查中文版](http://www.w3cplus.com/css/browser-hacks.html) ## 更多資料 * [css guideline](http://cssguidelin.es/)