團(tuán)隊高效簡潔的CSS-周煒

《團(tuán)隊高效簡潔的CSS-周煒》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、團(tuán)隊高效簡潔的CSS周煒2014年04月現(xiàn)狀A(yù)lice的解決方式Alice介紹內(nèi)容：1232現(xiàn)狀——混亂的命名myorder和我的信息？3現(xiàn)狀——低效的寫法重復(fù)的樣式定義，低效！4現(xiàn)狀——糟糕的維護(hù)相關(guān)聯(lián)的樣式被隔開5Alice6解決命名混亂——表意的命名Alice命名要求表意，模塊的命名表示它具體的功能含義ui-button:按鈕ui-tab:標(biāo)簽頁ui-paging:分頁7解決書寫低效——合并相同屬性樣式Alice要求合并相同的樣式，當(dāng)各個樣式有單獨的屬性時，再分離出另寫。把兩個樣式的公用部分定義成basebtn，然后針對它們不同的樣式再單

2、獨設(shè)置8提升維護(hù)性——聚攏的樣式塊Alice要求相關(guān)的樣式書寫時應(yīng)該聚攏在一起，避免不相關(guān)的樣式混雜在一起。把所有相關(guān)的button樣式代碼都寫在一塊，達(dá)到聚攏的樣式效果，從而提升代碼的維護(hù)性。9提升維護(hù)性——采用繼承通過類似Java繼承的方式對模塊的樣式進(jìn)行擴(kuò)展通過ui-button-lorange來完成樣式的繼承擴(kuò)展10Alice介紹11Alice簡介Alice是支付寶樣式解決方案，是一套模塊化的樣式命名和組織規(guī)范。Alice的樣式組織分為兩個層級：基礎(chǔ)框架（base.css+iconfont+柵格+animate.css+常用樣式類）通用

3、模塊（alice.css）12由于不同瀏覽器缺省的樣式各不相同，導(dǎo)致相同的頁面設(shè)計和實現(xiàn)在不同的瀏覽器上展現(xiàn)不同——這是最常見的兼容性問題。而base.css的目的就是解決該問題。Alice基礎(chǔ)框架——base.css13Alice基礎(chǔ)框架——iconfont直接引用icon把icon拼接到一張圖上，使用sprite技術(shù)使用iconfont技術(shù)大部分網(wǎng)站的做法是采用雪碧圖（CSSSprites），把這些圖標(biāo)放在一張單獨的圖中，結(jié)合使用CSS的background和background-position屬性渲染圖標(biāo)。最傳統(tǒng)的方式iconfont提

4、供了一種通過把icon圖標(biāo)打包成矢量化字體的方式對圖標(biāo)進(jìn)行管理。優(yōu)點：輕?。菏褂胕con圖片的大小是字體的4-10倍。百搭：矢量化，在不同的分辨率屏幕上適配縮放不失真！Alice基礎(chǔ)框架——iconfont的優(yōu)點怎么使用？data-iconfont-family柵格化開發(fā)為我們提供了標(biāo)準(zhǔn)化的協(xié)作開發(fā)流程，設(shè)計師按照Grid柵格設(shè)計,開發(fā)人員采用Grid柵格方式高度還原設(shè)計；柵格化隱藏了復(fù)雜的BOXModal細(xì)節(jié)，為開發(fā)者提供了更加高效容易的布局方式，即使不懂CSS，也能寫出柵格布局。Alice基礎(chǔ)框架——Grid柵格通過CSS3的高級屬性實現(xiàn)動

5、畫交互，沒有使用JavaScript。和CSS3特性相關(guān)的樣式被單獨剝離為animate.css，解決了瀏覽器的兼容問題。Alice基礎(chǔ)框架——動態(tài)樣式常用功能類以fn為前綴，為了在頁面中更加容易的重復(fù)使用，命名采用了以面向?qū)傩缘拿绞奖热纾篺n-clear，fn-hide等Alice基礎(chǔ)框架——常用功能類Alice提供了符合樣式規(guī)范的常用組件樣式庫，通過樣式庫可以有效的規(guī)范代碼的質(zhì)量；Alice的通用樣式庫包括：ui-buttonui-navui-tipboxui-step...Alice通用模塊——主樣式表Alice通用模塊——模塊的組合

6、Head：ui-grid-25Content：ui-grid-8,ui-grid-8,ui-grid-9Head：ui-navContent：ui-boxui-form，ui-list，ui-buttonAlice的使用1，引入Alice樣式文件2，使用Alice提供的HTML代碼只需引入一個alice.css樣式，你就能編寫漂亮頁面。重置樣式表讓所有瀏覽器都聽話。iconfont字體代替圖片，節(jié)省流量、矢量化。grid柵格讓布局更為簡單容易。animate.css讓你隨心使用css3炫酷效果。以常用功能類為輔助讓代碼更加簡潔?；谀K化讓代碼

7、規(guī)范可移植。......不管你是資歷深厚的大牛，還是剛剛起步的菜鳥，Alice絕對能夠滿足你！Alice的優(yōu)勢感謝聆聽