架構決策記錄:CSS 框架

目錄:

• 摘要
  • 問題
  • 決策
  • 狀態
• 詳情
  • 假設
  • 約束
  • 立場
  • 論證
  • 影響
• 相關內容
  • 相關決策
  • 相關需求
  • 相關製品
  • 相關原則
• 備註

摘要

問題

我們想使用 CSS 框架來建立我們的 Web 應用:

• 我們希望在所有主流瀏覽器和螢幕尺寸上,使用者體驗都快速而可靠。

• 我們希望在設計、佈局、UI/UX 等方面快速迭代。

• 我們希望應用具有響應式,尤其是適配手機等較小的螢幕、4K 寬屏等較大的螢幕,以及可旋轉顯示器等動態螢幕。

決策

決定採用 Bulma。

狀態

已決定採用 Bulma。對新出現的 CSS 框架選擇持開放態度。

詳情

假設

我們希望建立現代、快速、可靠、響應式等的 Web 應用。

出於多種原因,典型的現代 Web 應用正在減少或消除對 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。

相關原則

易於撤銷。

追求速度。

備註

此處填寫任何備註。