架构决策记录: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 框架

摘要

问题

决策

状态

详情

假设

约束

立场

论证

影响

相关内容

相关决策

相关需求

相关制品

相关原则

备注