在最近一次 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 变量：
注意一下，在上述代码中，变量（例如bg-color）如何从其他变量（例如darkPurp）计算出来，从而创建了一个显式依赖的列表。相应的 CSS 代码更容易维护：更容易更改，也更容易限定需要更改的内容。这里，修改深紫色值将自动反映到所有需要修改的地方，而修改黑色肯定不会修改背景颜色。
Tolinski 继续说明 CSS 变量是如何帮助设计整个设计系统的。出于演讲需要，Tolinski 将设计系统简化为使该设计独一无二的关键组件：颜色、类型、间距、字符、高度和元素（例如卡片或手风琴折叠菜单）。
调色板可以用 CSS 变量进行编码。例如，现有的工具可以从一些基本颜色和对比度目标生成自适应调色板。定义好颜色之后，Tolinski 继续介绍他所说的颜色意向（例如--bgColor或lineCo lor）。
在排版方面，Tolinski 建议利用现有的工具来可视化字体及其比例。下面是一个由type-scale.com自动生成的用于复制粘贴的示例代码：
接下来，Tolinski 使用 CSS 变量替换了生成的值：
附加的排版资源包括modularscale、Figma排版建议和vertical-rhythm-reset。
Tolinski 建议使用margin-left或margin-right（margin-up或margin-down）来避免边距重叠的陷阱，但不能同时使用。
设计系统的下一个组件是元素，它是有样式的组件，例如<Card />或<div class="card">。 元素应该简单、明确、难以分开且可扩展。Tolinski 在这里推荐了类似于Heydon Pickering所提倡的技术，即封闭组件以通用的方式将布局属性强加于其子组件。例如，通用Stack布局原语通过元素之间共同的父元素在它们之间加入边距，如下所示：
相关文章详细介绍了这种模式的优点，并介绍了其他可以使用类似通配符的技术实现的通用布局（例如侧边栏、Cover等）。
最后，Tolinski 提出了以下建议：
框架有带宽和加载开销。[……]以变量为基础，只写你需要的。
对于任何颜色、字体、间距都要使用变量，这样你的整个网站就可以一下子更新或配置。如果所有组件都使用自定义属性，则不必为创建独特的组件而担心。
ReactiveConf 是面向开发人员的年度会议，讨论软件开发的最新技术和趋势。由于 Covid-19 的原因，ReactiveConf 2020 被推迟到 2021 年的前三个月。与此同时，演讲亦会定期在网上播放。Tolinski 的演讲已经在网上提供，其中有更多的例子和技术细节。
原文链接：
Why We Don’t Use a CSS Framework - Scott Tolinksi, Reactive Conf
Java 避坑指南：Java 高手笔记代码篇
本迷你书包括 86 个业务开发中常见踩坑点。每一个知识点都相当的实用，是程序员业务开发中的必备避坑指南...
评论