首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我们为什么不使用CSS框架

在最近一次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 变量:

代码语言:javascript
复制
.oled-mode {
  --bg-color: var (--darkPurp)
  --sheetHover: var (--black-20)
  --sheetTextColor: var (--white)
  ...
}

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

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

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

代码语言:javascript
复制
@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 变量替换了生成的值:

代码语言:javascript
复制
  --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-leftmargin-rightmargin-upmargin-down)来避免边距重叠的陷阱,但不能同时使用。

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

代码语言:javascript
复制
.stack > * + * {  
margin-top: 1.5rem;  
}

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

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

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

原文链接:

Why We Don’t Use a CSS Framework - Scott Tolinksi, Reactive Conf

  • 发表于:
  • 本文为 InfoQ 中文站特供稿件
  • 首发地址https://www.infoq.cn/article/I2l4wcdSTK8XjoDVOUGg
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券