Bootstrap 與 Foundation 稱霸響應式框架雙雄，卻引發巨大爭議：專業設計師為何需要框架？反對聲音：設計師應自寫框架；框架導致加載慢、千篇一樣、代碼膨脹（無數 div、5000+ 行 CSS、大量 JS）。但框架持續流行自有其不可替代的價值。本文深度剖析框架的優缺點與適用邊界。

一、為什麼需要響應式框架？—— 後端開發的啟示

15 年前後端從零構建一切，如今調用 SurveyMonkey API 10 小時完成曾需 1000 小時的工作。API 經測試驗證、持續迭代、開箱即用，這就是框架對前端的同等價值：預先驗證、可復用、標準化的基礎設施。

構建前端有三條路：

1. 下載主題/模板：低成本、快速、但千篇一樣、綁定特定 CMS。
2. 全定制方案：像素級完美、代碼極致乾淨、但成本極高、依賴核心成員、交接成本大。
3. 框架方案（中間地帶）：利用預寫組件快速搭建骨架，注入定制樣式與業務邏輯，節省數十小時，產出並不低端的產物，有文檔支撐、社區維護、持續迭代。

框架不取代全定制，而是為「預算有限、時間緊迫、需標準化交付」的大多數項目提供最優解。

Paul Rand 官網：基於 Foundation 構建

二、框架優缺點深度對標（聚焦 Bootstrap 3 / Foundation 5）

1. 瀏覽器兼容性：最大隱性成本殺手

框架經大規模多瀏覽器測試驗證，大幅減少調試時間（調試常耗時等同開發）。最新版支援 IE9+、Firefox、Safari、Chrome、移動端瀏覽器。IE8 需小技巧，IE6/7 完全不支援。若目標瀏覽器未被測試，需自行修改測試。

2. 自定義下載：按需精簡，拒絕膨脹

兩框架均提供線上定制器，勾選所需組件（網格、排版、按鈕、JS 插件等）打包下載，極大減小體積與加載時間。建議：先定功能再定外觀，避免反覆重構打包。 版本升級時需重新配置，記錄配置清單可減輕維護負擔。

Grk：基於 Bootstrap 構建

3. 自定義代碼：從「大眾臉」到「品牌臉」

框架非下載即用。需通過 LESS (Bootstrap) / Sass (Foundation) 覆蓋變量、擴展樣式、重寫組件。Bootstrap 內置豐富風格，覆蓋成本低，上手快；Foundation 風格極少，需更強 CSS/Sass 功底，適合追求極致定制的團隊。兩者均支援 jQuery 定制 JS 行為。

CMS Critic：基於 Foundation 構建的預覽文件管理系統

4. 可訪問性：日益關鍵的硬指標

兩框架輸出有效 HTML。Bootstrap 在 Joomla 協作下 v3 版本顯著提升可訪問性（ARIA、語義化結構、鍵盤導航）。Foundation 亦持續改進。實際專案仍需針對 WCAG 2.1 AA 級進行專項審計與補強。

選型建議

• Bootstrap：團隊 CSS 基礎一般、需快速交付、依賴豐富現成組件、偏好 LESS、項目周期短。
• Foundation：團隊具備扎實 Sass/架構能力、追求極致語義化/可訪問性、需高度定制化設計系統、長期產品迭代。
• 自寫框架：頂級團隊、極特殊品牌語言、長期產品線、有資源投入基建維護。

框架是工具，非信仰。理解其本質——經驗沉澱的標準化基礎設施，在正確場景用好它，才是專業設計師的理性選擇。