CSS

前端精神時光屋:蕃茄鐘

Demo(本頁開啟) | 我的設計稿

撰寫 CSS 的過程中,都會搭配 SASS 預處理器,之前一直有聽過 CSS IN JS,不知該如何寫起?剛好今年六角學院的前端精神時光屋切了第一週的版(蕃茄鐘),想說用 Vue 來練習 CSS Modules,其實是看到 Vue Loader 官方文件的介紹,動手做做看,再 google 大大們的文章吸收一下日月精華,整理在此。


CSS IN JS(JavaScript)

閱讀我吧!

Bulma

講到 CSS Framework,應該無人不知 Bootstrap。最近在 State of CSS 2019 的問卷結果中看到全球 CSS 使用數據,包含知名度、感興趣程度及使用滿意度,Bootstrap 的滿意度極低,而 Bulma 在使用滿意度算表現得很好,高達 74%,居於第二名,滿意度的第一名是 Taiwlind。CP 值好高,所以想來試試看 Bulma!

知名度:**50%**| (全部受測數 - 從沒聽過的人) / 全部受測數
感興趣:**41%**|有興趣 / (有興趣 + 沒興趣)
滿意度:**74%**|想再使用 / (想再使用 + 不想再使用)

本篇文章純粹紀錄如何使用,方便自己日後忘記可以快速上手,不會與其他 CSS Framework 進行比較唷。

Bulma 的 Responsive Web Design 跟 Bootstrap 4 一樣,也是利用 flexbox 來實現的,這篇記錄的 Bulma 版本是 0.7.5

閱讀我吧!

CSS

剛開始學習容易上手
往後卻難以維護

CSS 較鬆散, 非常仰賴攥寫的順序
但這些都比不上不懂 Specificity 的恐怖!XDDD

Specificity 看不懂?

閱讀我吧!