選擇手刻,還是用css framework?

客觀

在一個網初期開發,需要一個寫好的style去做基礎,快速把雛形弄出來,多數後端工程師都不喜歡寫css,所以用寫好的style直接用倒是很過癮的。可是用什麼framework,什麼framework好,什麼framework不好,都常引起很多人討論。這個其實很視情況和喜好而定,沒有什麼標準答案。如果你是新手,你可能聽過很多前輩說有關對framework的想法,大致上的觀點有幾個。

用framework每個看起來都很像?

css framework就如一個建築的blueprint,不管你怎麼蓋,都是離不開某種比較常見的結構,除非,除非你的設計很特別,不過再怎麼特別,還是需要有結構,除非除非你不考慮RWD,你不考慮瀏覽器問題,你不考慮UX好不好,你不考慮工程師的感受等。

至於為什麼現在買個網站都看起來很像,其實這不是現在才有的問題的啊,以前用table,你看每個政府網站都長的很像。很像純粹是…….流行、套用、直接上線。我看過不少工程師,就直接用framework的模板直接改一下顏色就上線的,那麼就難怪大家都一樣,所以也說不上誰抄襲誰。到有名的模板網站去選購模板,其實你也會發現,也是大致上是那樣。

用css framework弄出來可能就像飯店套房,小小精緻乾淨還有清潔服務(不少人幫你debug了),你可以可以自己蓋自己的房子,就是蓋到滿身大汗,自己看起來很開心,但是沒有什麼人想進去住。

有錢有時間的,可以自己慢慢規劃,自己蓋自己的當然可以。

1

一堆奇怪的class

這個倒是很奇妙,歷史不夠熟悉,就怪歷史人物太多。

不過的確有很多framework的名字有點怪,不是很好懂,而且一個很全面的framework通常涵蓋的範圍也很多,自然class也多,class奇怪不奇怪,看過很多前端工程師刻的class更奇怪的(舉手),其實覺得奇怪可以自己改,不記得就google或看官方doc。

其實很多framework的官網都很完整的寫了範例和用法、注意事項,甚至,大家應該要深入了解背後是怎麼操作,寫好的背後到底寫了什麼,為什麼會行得通,如果都能了解,接下來的問題,就可以不用看了。

太肥?

有很多人會說bootstrap或foundation這種很肥(說真的現在的網路還介意哪點點M嗎),不過如果說真的,這是一個誤會,之前有提過Bootstrap RWD 使用方法及原理,你可以選擇你要的。

一個完善的framework應該都可以拆成不同的Components,其實沒有必要每個都load,只load你要的就是。既然在一起了,別嫌棄人家肥了。

會衝突?

還是那句,要了解怎麼操作,才知道怎麼避免衝突,最好的方法,就是一直嘗試和練習。只要知道原理就可以避免不必要的衝突。

不是只有grid

很多人用框架都只是用到grid,純粹因為不太熟悉Ui,又或者還沒遇到很複雜的網站結構,甚至沒有看完官網的doc說明,如果只是需要做比較單純的網頁,其實不大需要用framework,倒是沒有什麼問題的,自己寫的結構會比較清楚。而且,也來的比較單純,起碼你不用先熟悉,那個framework就可以開始寫。

不過倒是看多人,用了framework都只是用他們的grid,那就沒有意義了,grid,也只不顧用來設計大架構吧了,當然也會有人把grid當作切割器,全部東西都用grid,到最後就有點像js callback hell那樣一致深入到一個無法估計的境界。

你可以做什麼

假設你是工程師,沒有設計師,需要一個不錯的開始-用它吧
假設你是設計師,不熟悉html和css,需要一個快速的mockup-用它吧
假設你是前端工程師-用它吧

記得曾經有個教授,這樣說

為何我們要唸書?不是常常提倡實際作業,來的比較學習比較快嗎?

書(公開知識,比喻成open source),是已知的知識,是之前就有人發現的事情,我們唸書只是知道前人所花時間做過事情後的心得,我們就有可以節省過去的人所花的時間,就可以擁有基礎知識,然後基於這些基礎,再建立我們的知識。

所以假設你是新手,更應該用它,用它然後了解它是怎麼操作的。何況現在的框架,都是經過很多人debug建議和改版的知識,如果你無法自己做出以一個更厲害的東西,倒是想不出一個理由拒絕使用它,當然你很熟悉它的時候,你可以自己判斷什麼狀況可以用,什麼狀況不需要用,什麼狀況用什麼。

基於framework來學習,是非常有效率的,當然你依然可以自己寫自己,寫一百次都是一樣的話,那麼基本上第一百次,和第一次都是一樣的話,那麼整體來說不會有多大的進步的。

或許我們應該保持開放的心態來學習,覺得適合自己的吸收,不太適合自己的也沒有關係,你知道有這個東西也是不錯,起碼你知道什麼是不適合的。

  • New Chen

    你好~很棒的文章,不過”不他需要”–>是指”不太需要”吧 ?
    給您參酌~

    • nickjazz

      感謝修正

  • Hao LI

    我是一個網頁新手
    因為有興趣所以加入了這一圈
    目前只是觸及表面
    偶爾協助一些親朋好友架設網頁時 使用bootstrap製作
    其實有時候滿心虛的
    CSS自己在切版上 如果沒有bootstrap的那種切版方式
    根本沒有辦法完成 一定會亂跑不受控制
    所以就變成基礎不足的小小網頁小廢物

    • nickjazz

      沒有人一開始就能隨心所欲的控制的
      亂跑,就是你要學習的時候

      如果不亂跑,永遠都學不會

  • Kevin Tseng

    最近要選用Ext JS, Kendo UI…etc 大大可有研究呢?
    或是有沒有什麼推薦的framework呢?

    • nickjazz

      看你的目的和用途是什麼
      每套framework都有自己的學習曲線,所以也沒無法全部都去用。
      每個領域掌握一兩個就夠用了

  • GeorgioWan

    Hello,你的文章都寫得很棒!

    “不是常常提倡實際作業,來的比較學習比較快嗎?” → “不是常常提倡,實際作業比學習來的快嗎?”
    感覺稍微順一點,您參考下 =D