Who the hell are you

前言

各位是否覺得 CSS 只是到此為止呢？如果我說各位的 CSS 還能更加精進呢？沒錯，今天要來介紹大家敲碗已久的 CSS 框架！它是一種 CSS 工具，是一組預先編寫且隨時可用的 CSS 樣式和樣式表。

一般在寫 CSS 時，需要建立一個 CSS 檔案並將程式碼寫在裡面。使用框架後，你只需要在 HTML 檔案的標籤中加上工具預設的簡短英文單字便能達到效果，不僅讓開發更加方便，還能加快開發速度。

fun fact

框架很多，但還有更多。

麻瓜解釋

時光回到 2024.09.17，平行時空的小銘已把房屋（網站）架構建置完成，可是只有架構，還欠缺美化。由於這個時空的小銘想要迅速完工，便請來一間 CSS 框架系統櫃公司來設計。這間公司的特色是所有設計（例如網頁按鈕、選單）都已經模組化，櫃子、床架、廚具等等，只需要幾個簡單的步驟就能快速組裝完成。

過了一段時間後，小銘想要搬家（手機開啟網頁，大小不同），他想到搬家還要重新設計頁面很麻煩。這時系統櫃公司的產品就發揮了它的厲害之處，那就是它的家具與設計可以針對房屋大小進行自動縮放，這項技術叫做 RWD（回應式網頁設計，英語：Responsive Web Design），所以當他搬到小房子時，所有的東西都會自適應地呈現在室內。

歷史

早期 CSS 剛出現時一片混亂，因為大多數瀏覽器並不符合 CSS 規範，導致有些瀏覽器支援，有些則不支援。

後來出現了一個組織，叫做 Web Standards Project。他們逐步改善了這種狀況，使得大部分瀏覽器都能成功運行 CSS。隨著 W3C 的標準化，情況越來越好。

約在 2000 年中期左右，CSS 框架開始出現，最初引入了 Grid 系統，大大幫助了設計師在網頁布局和開發速度上的進步。重要的是，大多數瀏覽器都支援這些框架。

隨著時間推移，智慧型手機問世，開發者們對這項劃時代產品的突然出現措手不及，無法立即重設網站以適應手機大小。於是 CSS 支父 Håkon Wium Lie 提出了 Acid，主要是為了針對 Opera 自家網站進行設計，使網站重新格式化以適應小螢幕裝置。

2007 年，第一代 iPhone 發布，智慧型手機開始普及，手機瀏覽器需求大增。

2011 年，Twitter 發布了 Bootstrap 框架，成為針對行動裝置優先設計的框架。

CSS 框架仍在持續進步中～

後記

我最早接觸的 CSS 框架是 Bootstrap，很快就上手了。雖然框架的確加快了專案開發進度，但也有缺點，那就是自由度相對降低，可塑性減少。

成品不差，但可能會顯得有些死板。因此，我通常會自己再寫一些 CSS 來輔助設計，使網站更加美觀。如果各位了解木工與系統櫃的差別，這大概就是那樣的感覺。

參考

History of front-end frameworks - LogRocket Blog
Acid2 - 維基百科