我们为什么不使用CSS框架

2020 年 7 月 24 日 InfoQ

作者 | Bruno Couriol

在最近一次 ReactiveConf 会议上，Scott Tolinski 为这样一种观点做了辩护：考虑到 CSS 语言最近增加的东西，开发人员可能不再需要使用成熟的 CSS 框架。Tolinski 进一步演示了不需要支持 IE11 的开发人员如何利用 CSS 变量来实现一个自定义设计系统，而其开销明显小于使用框架。

CSS 变量使开发人员可以表示生成目标布局的 CSS 属性之间的动态关系。CSS 变量，也称为 CSS 自定义属性，是通过在它们的名字前面加上—（比如--background ）来声明的。CSS 变量有一个值，可以使用var()函数在其他 CSS 声明中使用。变量可以通过 CSS 或 JavaScript 进行更新。当发生这样的更新时，所有的因变量都会相应的更新。CSS 变量的作用域限定在声明它们的元素上并参与级联。

借助显式的、命名的、限定范围的变量和用户定义的函数计算（var()），开发人员可以用更接近于图灵完备语言（如 JavaScript）的方式表达自定义算法。虽然 CSS 最初被设计用来描述静态数据（标记语言）而不是计算（编程语言），但是，由于需要采用一种经济的方式描述布局的动态变化，使得 CSS 越来越接近于一种常规编程语言，同时保持了其声明性本质。

Tolinski 给出了一个具体的演示。该演示是对一个教程网站的完全重新设计，用户可以从六个主题中选择一个，使用户界面的外观发生相应的改变。实现该功能所需的 JavaScript 只包含对一个类的更改。例如，oled主题与oled-mode类关联，该类配置了以下 CSS 变量：

.oled-mode {  --bg-color: var (--darkPurp)  --sheetHover: var (--black-20)  --sheetTextColor: var (--white)  ...}

注意一下，在上述代码中，变量（例如bg-color）如何从其他变量（例如darkPurp）计算出来，从而创建了一个显式依赖的列表。相应的 CSS 代码更容易维护：更容易更改，也更容易限定需要更改的内容。这里，修改深紫色值将自动反映到所有需要修改的地方，而修改黑色肯定不会修改背景颜色。Tolinski 继续说明 CSS 变量是如何帮助设计整个设计系统的。出于演讲需要，Tolinski 将设计系统简化为使该设计独一无二的关键组件：颜色、类型、间距、字符、高度和元素（例如卡片或手风琴折叠菜单）。

调色板可以用 CSS 变量进行编码。例如，现有的工具可以从一些基本颜色和对比度目标生成自适应调色板。定义好颜色之后，Tolinski 继续介绍他所说的颜色意向（例如--bgColor或lineCo lor）。

在排版方面，Tolinski 建议利用现有的工具来可视化字体及其比例。下面是一个由type-scale.com自动生成的用于复制粘贴的示例代码：

@import url('https://fonts.googleapis.com/css?family=Poppins:400|Poppins:400');html {font-size: 100%;} /*16px*/body {  background-color: white;  font-family: 'Poppins', sans-serif;  font-weight: 400;  line-height: 1.65;  color: #333;}p {margin-bottom: 1.15rem;}h1, h2, h3, h4, h5 {  margin: 2.75rem 0 1.05rem;  font-family: 'Poppins', sans-serif;  font-weight: 400;  line-height: 1.15;}h1 {  margin-top: 0;  font-size: 3.052em;}h2 {font-size: 2.441em;}h3 {font-size: 1.953em;}h4 {font-size: 1.563em;}h5 {font-size: 1.25em;}small, .text_small {font-size: 0.8em;}

接下来，Tolinski 使用 CSS 变量替换了生成的值：

--baseFontSize: 1rem  --baseNavSize: 0.64rem  ...  --xtra-big-ass-heading: 3.052rem  --xtra-heading: 2.441rem  ...  --heading-one: 1.953rem  ...  --heading-four: var(--baseFontSize)  --heading-five: var(--smallFontSize)  ...  --headingFont: 'Poppins', sans-serif;  --bodyFont: 'Raleway', sans-serif;  ...

附加的排版资源包括modularscale、Figma排版建议和vertical-rhythm-reset。Tolinski 建议使用margin-left或margin-right（margin-up或margin-down）来避免边距重叠的陷阱，但不能同时使用。

设计系统的下一个组件是元素，它是有样式的组件，例如<Card />或<div class="card">。元素应该简单、明确、难以分开且可扩展。Tolinski在这里推荐了类似于Heydon Pickering所提倡的技术，即封闭组件以通用的方式将布局属性强加于其子组件。例如，通用Stack布局原语通过元素之间共同的父元素在它们之间加入边距，如下所示：