團(tuán)隊(duì)高效簡(jiǎn)潔的2023/4/20第1頁，共23頁，2023年，2月20日，星期五現(xiàn)狀A(yù)lice的解決方式Alice介紹內(nèi)容：1232第2頁，共23頁，2023年，2月20日，星期五現(xiàn)狀——混亂的命名myorder和我的信息？3第3頁，共23頁，2023年，2月20日，星期五現(xiàn)狀——低效的寫法重復(fù)的樣式定義，低效！4第4頁，共23頁，2023年，2月20日，星期五現(xiàn)狀——糟糕的維護(hù)相關(guān)聯(lián)的樣式被隔開5第5頁，共23頁，2023年，2月20日，星期五Alice6第6頁，共23頁，2023年，2月20日，星期五解決命名混亂——表意的命名Alice命名要求表意，模塊的命名表示它具體的功能含義ui-button:按鈕

ui-tab:標(biāo)簽頁

ui-paging:分頁

7第7頁，共23頁，2023年，2月20日，星期五解決書寫低效——合并相同屬性樣式Alice要求合并相同的樣式，當(dāng)各個(gè)樣式有單獨(dú)的屬性時(shí)，再分離出另寫。把兩個(gè)樣式的公用部分定義成basebtn，然后針對(duì)它們不同的樣式再單獨(dú)設(shè)置8第8頁，共23頁，2023年，2月20日，星期五提升維護(hù)性——聚攏的樣式塊Alice要求相關(guān)的樣式書寫時(shí)應(yīng)該聚攏在一起，避免不相關(guān)的樣式混雜在一起。把所有相關(guān)的button樣式代碼都寫在一塊，達(dá)到聚攏的樣式效果，從而提升代碼的維護(hù)性。9第9頁，共23頁，2023年，2月20日，星期五提升維護(hù)性——采用繼承通過類似Java繼承的方式對(duì)模塊的樣式進(jìn)行擴(kuò)展通過ui-button-lorange來完成樣式的繼承擴(kuò)展10第10頁，共23頁，2023年，2月20日，星期五Alice介紹11第11頁，共23頁，2023年，2月20日，星期五

Alice簡(jiǎn)介Alice是支付寶樣式解決方案，是一套模塊化的樣式命名和組織規(guī)范。Alice的樣式組織分為兩個(gè)層級(jí)：基礎(chǔ)框架（base.css+iconfont+柵格+animate.css+常用樣式類）通用模塊（alice.css）12第12頁，共23頁，2023年，2月20日，星期五由于不同瀏覽器缺省的樣式各不相同，導(dǎo)致相同的頁面設(shè)計(jì)和實(shí)現(xiàn)在不同的瀏覽器上展現(xiàn)不同——這是最常見的兼容性問題。而base.css的目的就是解決該問題。

Alice基礎(chǔ)框架——base.css13第13頁，共23頁，2023年，2月20日，星期五

Alice基礎(chǔ)框架——iconfont直接引用icon把icon拼接到一張圖上，使用sprite技術(shù)使用iconfont技術(shù)大部分網(wǎng)站的做法是采用雪碧圖（CSSSprites），把這些圖標(biāo)放在一張單獨(dú)的圖中，結(jié)合使用CSS的background和background-position屬性渲染圖標(biāo)。最傳統(tǒng)的方式iconfont提供了一種通過把icon圖標(biāo)打包成矢量化字體的方式對(duì)圖標(biāo)進(jìn)行管理。第14頁，共23頁，2023年，2月20日，星期五優(yōu)點(diǎn)：輕薄：使用icon圖片的大小是字體的4-10倍。百搭：矢量化，在不同的分辨率屏幕上適配縮放不失真！

Alice基礎(chǔ)框架——iconfont的優(yōu)點(diǎn)怎么使用？data-iconfont-family第15頁，共23頁，2023年，2月20日，星期五柵格化開發(fā)為我們提供了標(biāo)準(zhǔn)化的協(xié)作開發(fā)流程，設(shè)計(jì)師按照Grid柵格設(shè)計(jì),開發(fā)人員采用Grid柵格方式高度還原設(shè)計(jì)；柵格化隱藏了復(fù)雜的BOXModal細(xì)節(jié)，為開發(fā)者提供了更加高效容易的布局方式，即使不懂CSS，也能寫出柵格布局。

Alice基礎(chǔ)框架——Grid柵格第16頁，共23頁，2023年，2月20日，星期五通過CSS3的高級(jí)屬性實(shí)現(xiàn)動(dòng)畫交互，沒有使用JavaScript。和CSS3特性相關(guān)的樣式被單獨(dú)剝離為animate.css，解決了瀏覽器的兼容問題。

Alice基礎(chǔ)框架——?jiǎng)討B(tài)樣式第17頁，共23頁，2023年，2月20日，星期五常用功能類以fn為前綴，為了在頁面中更加容易的重復(fù)使用，命名采用了以面向?qū)傩缘拿绞奖热纾篺n-clear，fn-hide等

Alice基礎(chǔ)框架——常用功能類第18頁，共23頁，2023年，2月20日，星期五Alice提供了符合樣式規(guī)范的常用組件樣式庫，通過樣式庫可以有效的規(guī)范代碼的質(zhì)量；Alice的通用樣式庫包括：ui-buttonui-navui-tipboxui-step...

Alice通用模塊——主樣式表第19頁，共23頁，2023年，2月20日，星期五

Alice通用模塊——模塊的組合Head：ui-grid-25Content：ui-grid-8,ui-grid-8,ui-grid-9Head：ui-navContent：ui-boxui-form，ui-list，ui-button第20頁，共23頁，2023年，2月20日，星期五

Alice的使用1，引入Alice樣式文件2，使用Alice提供的HTML代碼第21頁，共23頁，2023年，2月20日，星期五只需引入一個(gè)alice.css樣式，你就能編寫漂亮頁面。重置樣式表讓所有瀏覽器都聽話。iconfont字體代替圖片，節(jié)省流量、矢量化。grid柵格讓布局更為簡(jiǎn)單容易。animate.css讓你隨心使用css3炫酷效果。以常用功能類為輔助讓代碼更加簡(jiǎn)潔?；谀K化讓代