iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 27
3
Modern Web

CSS 實戰心法系列 第 27

CSS 框架自幹心得 - 失敗三次的框架建構經驗

  • 分享至 

  • xImage
  •  

先前提到過有自幹過框架,主要的經驗是兩次,第三次就不再完全重新自幹了,每次到了最後都會發現有些概念不夠完美,然後修正前一版的錯誤再出發一次!?後來發現自幹本身就有很大的風險在...。

第一次

距今約 36 個月以前(這樣說比較久)。

剛開始接觸 Sass 時發現他的 @mixin 真的很神,發現很多樣式可以先準備好 @mixin 等到需要使用的時候在載入,所以當時就以產生 樣式庫 的概念做設計,當時還沒有參考主流的框架,單純以自己的觀念做開發,包含按鈕、表單、jQuery 套件等常見的樣式庫都有設計。

http://ithelp.ithome.com.tw/upload/images/20161227/20083608JZrI9daFXN.png

當時文件只要輸入 +divider($gap: 1.5em) 就可以引用上方的範例樣式。

http://ithelp.ithome.com.tw/upload/images/20161227/20083608ZhujQkVxCP.png

且設計上都是用當時主流的漸層效果在做,只要輸入一個色彩就會運算出各種狀態的漸層,真的是好潮好潮~。當時這些都是自己在維護、使用,久而久之發現每個專案都要重新 @include 這些樣式也真的很麻煩,心想不如直接寫一款都預設 @include 的好了。

第二次

距今約 24 個月以前。

已經經歷過一次的框架歷練的我,等級已經是翻倍再翻倍,這時候是以一個完整可運用的框架去執行,所以執行時也有考慮到框架的文件、運用、擴充等問題。

http://ithelp.ithome.com.tw/upload/images/20161227/20083608M8uMoHkjnP.png

樣式文件,命名還要帶點叛逆。

http://ithelp.ithome.com.tw/upload/images/20161227/20083608FA2xO4P7zj.png

包含延伸運用都有製作在內。

這樣的架構其實並沒有太大問題,但是發現 CSS 檔案大小上升略快 >O<,所以每次加入新元件都要不斷的檢查問題點在哪,後來發現 @extend 的問題以及 OOCSS 的架構。

第三次

後來仔細研究了 Bootstrap 文件原始碼及 OOCSS 的概念,清楚了解到自己開發的框架問題點,所以就很乾脆的將 Bootstrap 給 fork 惹...。現在主要都是以 Bootstrap 作為基底來當作樣式框架開發的底層,並且依據自己喜愛的設計風格、專案需求去做調整。

http://ithelp.ithome.com.tw/upload/images/20161227/20083608vpSCkZENz1.png

色彩相對於當時的 Bootstrap 3 來說更為鮮豔,且圓角更小。

http://ithelp.ithome.com.tw/upload/images/20161227/20083608toUqJoJUZO.png

還有很愛的 outline button,在 Bootstrap 4 的版本也有加入,很開心的是當時很多概念在 Bootstrap 4 都有提供,如 Card、Spacing...。

http://ithelp.ithome.com.tw/upload/images/20161227/20083608CSQpaOCIbn.png

還以 Material Design 為概念的 jQuery UI,當然這是選用的,預設的情況下是不需要載入的。

結語

現在,許多情況下 Bootstrap 4 能滿足基礎的開發需求,再以 Sass 的特性結合需要的元件開發就能節省許多時間。除了公司專案外,我大多情況不會重頭開始寫 CSS 或是另外開發框架。


上一篇
實戰心法 - 應避免的 Sass @extend
下一篇
實戰小技巧 - iOS 表單的使用者體驗優化
系列文
CSS 實戰心法30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言