架構決策記錄：CSS 框架

內容：

• 摘要
  • 問題
  • 決策
  • 狀態
• 詳情
  • 假設
  • 限制
  • 立場
  • 論據
  • 影響
• 相關
  • 相關決策
  • 相關需求
  • 相關工件
  • 相關原則
• 備註

摘要

問題

我哋想用 CSS 框架嚟建立我哋嘅網頁應用程式：

• 我哋想用戶體驗快速而可靠，喺所有主流瀏覽器同螢幕尺寸上都一樣。

• 我哋想喺設計、版面、UI/UX 等方面快速迭代。

• 我哋想應用程式具響應式，尤其係細螢幕（例如流動裝置）、大螢幕（例如 4K 闊螢幕）同動態螢幕（例如可旋轉嘅顯示器）。

決策

決定用 Bulma。

狀態

決定用 Bulma。如果有新嘅 CSS 框架選擇出現，我哋持開放態度。

詳情

假設

我哋想建立現代、快速、可靠、響應式等嘅網頁應用程式。

典型嘅現代網頁應用程式正在減少或者避免使用 jQuery，原因有好幾個：

• 現代 JavaScript 逐步加入好多 jQuery 一直提供嘅功能，所以對 jQuery 嘅需求減少，而且有更好／更快／更細嘅模組提供特定實作

• jQuery 廣泛嘅做法係直接操作 DOM，對於現代 JavaScript 框架（例如 React、Vue、Svelte）嚟講係反模式

• jQuery 如果被載入兩次，會同自己產生衝突，等等

限制

如果我哋揀選使用 jQuery 嘅 CSS 框架，咁我哋就被迫要匯入 jQuery。例如，Semantic UI 使用 jQuery，而 Tachyons 就冇。

如果我哋揀選極簡嘅 CSS 框架，咁我哋就要放棄現時或者不久將來可能想要嘅框架組件。例如，Semantic UI 提供圖片輪播，而 Tachyons 就冇。

立場

我哋考慮過唔用框架。呢個做法似乎仍然可行，尤其因為 CSS grid 提供咗我哋項目所需嘅大部分功能。

我哋用快速短名單篩選，考慮過好多 CSS 框架：Bootstrap、Bulma、Foundation、Materialize、Semantic UI、Tachyons 等。我哋揀選咗兩個作深入審視：Semantic UI（因為佢最語義化）同 Bulma（因為佢最輕量，而且提供我哋現時想要嘅組件）。

我哋考慮過 Semantic UI。佢提供好多組件，包括我哋項目想要嘅組件：分頁標籤、網格、按鈕等。我哋用兩種方式對 Semantic UI 做咗試行：用一般 CDN 檔案，以及用 NPM 儲存庫。我哋喺靜態 HTML 頁面成功使用 Semantic UI，但喺時限內建置 JavaScript SPA 時並未成功（主要因為 jQuery 載入問題）。我哋發現其他程式設計師亦因同樣原因，一直要求 Semantic UI 開發者製作無 jQuery 版本。其他程式設計師已經請求無 jQuery 版本多年，但開發者表示唔會做，並指任何無 jQuery 版本都太難寫，例如大意係「Semantic UI 項目有超過 22,000 個接觸點使用 jQuery」。

Semantic 例子：

<div class="ui top attached tabular menu">
  <a class="item">Alpha</a>
  <a class="item">Bravo</a>
</div>

我哋考慮過 Bulma。Bulma 有許多同 Semantic UI 相似嘅功能，雖然精密組件冇咁多。Bulma 用現代技術建構，例如冇 jQuery。Bulma 有一些第三方組件，當中部分我哋可能會想用。

Bulma 例子：

<div class="tabs">
  <ul>
    <li><a>Alpha</a></li>
    <li><a>Bravo</a></li>
  </ul>
</div>

論據

如上。

具體嚟講，Semantic UI 喺技術方面（即係有咁多 jQuery 接觸點）同領導方面（即係拒絕無 jQuery 係斷然拒絕，而唔係嘗試制定路線圖、持續改進或者籌款捐助等），似乎都有警示旗號。

影響

如果我哋搵到好嘅無 jQuery CSS 框架，整體上一般都有幫助，亦係好事。

相關

相關決策

我哋揀選嘅 CSS 框架可能會影響可測試性。

相關需求

我哋想快速推出純粹現代化嘅應用程式。

我哋唔想花時間處理使用舊依賴項（尤其係 jQuery）嘅舊框架（尤其係 Semantic UI）。

相關工件

影響所有會用到該 CSS 嘅典型 HTML。

相關原則

容易回復。

需要速度。

備註

呢度寫任何備註。