RWD-AM,CSS只下載你需要的

自從RWD慢慢變得普及,處理介面和css的問題就越來越多,其中一個問題就是,css好肥。

話說之前執行過數個案子,案子的內容都是負責全站的UI,整個網站的UI元件和介面都是RWD,並且有四種介面,包括手機、平板/大手機,桌面,非常大桌面。話說這種情況應該不會變少,反而會越來越多。假設在那麼多UI元件和必須應付那麼多介面的情況下,一般作法,我們會用media queries,在sass/less/scss/下用nesting code的寫法處理掉,我們都愛nesting code,我知道,我也不會改變這種寫法,所以一下分享的是在不改變你的nesting code習慣下,優化你的css輸出,而我們輸出的最大的終極目標,就是只載入,當下瀏覽器所需的css,而我們也是會用css media queries來處理掉。先來說一下nesting code 和 oocss的狀況。

css nesting code的問題

這是最常見的「習慣」,正如所說的,這裏沒有所謂對或錯,不過我們可以來看看狀況時這樣的。假設你同時用BEM的命名方法,更是一個水龍般的長…header .header__logo .header__logo-a

最常見的,就是我們會習慣把東西,不管有沒有關係,都包起來

compiles出來是這樣的

假設html是這樣

css就會寫成這樣

compiles出來就會這樣

即便多小心,你都會情不自禁的寫成這樣,有時候nesting在source file看的確是很整齊,所以經常會忽略compiles出來的結果,視乎看起來,是一個坑,日後要再修改或更動,看來是像在玩踩地雷的遊戲。

如果還需要加入media queries,會變成這樣,這裏只是一個小小的header,在真實執行上,會複雜很多。

oocss的問題

適用oocss的場景唯獨一個,就是前端的外觀完全由class控制,那就另當別論。不然若是前端外觀掌握在前端工程師的手裏時候,也會有一些尷尬的場面。

什麼是oocss,就是物體導向css,例子:

沒有oocss的Html和css

如果有oocss大概會這樣

css則會修改這樣,甚至會有更詳細的分類

html selector 有可能會變成 class="header color-green bg-black no-padding no-margin mb-50",這樣的模板實在用起來有點麻煩,假設有數十個selector,每個都有七八個class,看起來真的很疲憊,但是oocss的觀念的確是很好的,但是我們會把preprocess的階段使用。

最後產出的css會是比較單純的selector。後來,為了優化過程和增加效率,提取了以上手法的優點,把它弄成一個流程,這個流程姑且叫它RWD-AM

RWD-AM 環境設定

RWD-AM, 意識就是Responsive webdesign – adaptive & modules的縮寫,概念非常單純,就是減少css的累贅,同時也增加css原始碼的重用性,和保持結構的單純。這個gulp的環境可以用其他東西代替,這都不重要,你可以用grunt或app取代設定的流程,但是步驟依然不變:

1,css會先開始全部寫在temp.sass上,完成後,再開一個對應的新文件 modules/_filename,例如 _box.sass
2,desk.csshd.cssmobile.csstablet.css是特定對不同瀏覽器的css,你可以依個人喜好分,一般上,有四個已經足以應付全部介面,假設超過或針對太細微的裝置來調整,可能需要考慮一下是不是設計錯誤。
3,頁面會用js控制載入哪一個css,在js disable情況下,用media query載入。

最終會得到以下的目錄結構:
Screen Shot 2015-06-14 at 9.53.23 AM
打開你的Terminal,輸入npm init,全部都按enter,待會直接修改也可以,之後會出現一個package.json,修改裡面的項目以符合你的專案。

然後同時也新增兩個文件,一個gulpfile.coffee,這個文件是運行全部文件的中心檔案,裡面先載入我們要的模組,如果你有個人偏好的模組耶可以同時載入,這設定只是參考。共有七個task,分別負責,markup(html)、styles(sass\scss\less\stylus)、scripts(js\jsx\coffee)、file(圖片優化或文件優化的工具放這),最後三個task,一個是browserSync,是一個讓你可以livereload,同時讓你的手機或行動裝置能在內網區域上透過ip瀏覽local網站的變化。一個task是watch,最後一個就是default task,所以你最後只需要輸入gulp就可以執行。

修改package.json

修改你的packjson如上的內容,然後輸入npm install

然後新增gulp文件

接下來然後輸入gulp,應該會出現
Screen Shot 2015-06-14 at 10.55.33 AM
網址輸入http://localhost:3000,就可以看到網頁,手機輸入http://192.168.0.106:3000也可以馬上看到手機版。

最後,我們要新增一個index.jade,你可以用slim、haml、html或其他都可以,Layout有個id#size-stylesheet的,會用來替換我們要的css。

在app.coffee稍微做一下測試

最後你可以在網頁上,測試一下,我們只load一個css,當然如果你的專案很小,全部import或concat成一個檔案都是可以的,輸出是情況決定,沒有一定的規則遵守。你可以用很多方法來篩選自己要的css,例如針對不同的瀏覽器或不同的裝置ua parser.js,用modernizr檢查支援行篩選,依照不同需求可以做不同的過濾。

SYqqOEonan

stylus和less的設定是一樣的,只是gulpfile記得require進去就好,然後修改對應的styles參數即可。前置作業大致如此

你可以在github下載範例

接下來請繼續看
RWD-AM css的寫法