我们为什么不使用CSS框架

作者 | 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布局原语 通过元素之间共同的父元素在它们之间加入边距，如下所示：

.stack > * + * {
margin-top: 1.5rem;
}

相关文章详细介绍了这种模式的优点，并介绍了其他可以使用类似通配符的技术实现的通用布局（例如侧边栏、Cover等）。最后，Tolinski 提出了以下建议：

框架有带宽和加载开销。[……] 以变量为基础，只写你需要的。 对于任何颜色、字体、间距都要使用变量，这样你的整个网站就可以一下子更新或配置。如果所有组件都使用自定义属性，则不必为创建独特的组件而担心。

ReactiveConf 是面向开发人员的年度会议，讨论软件开发的最新技术和趋势。由于 Covid-19 的原因，ReactiveConf 2020 被推迟到 2021 年的前三个月。与此同时，演讲亦会定期在网上播放。Tolinski 的演讲已经在网上提供，其中有更多的例子和技术细节。

参考阅读：

https://www.infoq.com/news/2020/06/css-variables-design-systems/