前言

好的文章值得多看两眼。今日早读文章由@kmokidd翻译分享。

正文从这开始～～

可读性更高的 CSS 代码

在读过 【第1596期】CSS 自定义属性：基础篇后，我们可以开始着手优化代码了，通过 CSS 变量能够提高代码的可读性，为后续维护打下良好的基础。

注意：为叙述简洁，自定义属性的兼容方案将不再在下文中赘述，但在实际项目中大家别忘了加上，像下面这样：

.foo {/* For browsers that don't understand custom properties */  color: black;/* `black` used as fallback if `--color` isn't defined */  color: var(--color, black);}

DRY 原则

坚守 DRY 原则，你不仅能够逃脱不断重复写值的噩梦，当调整属性值要做的搜索、替换和调试等重复的工作都能得以缓解。也就是：DRY 原则能降低代码维护的成本。

我们来看一个例子，下面这段代码相当糟糕，多次重复了 gray 这个值：

.button {  background-color: gray;}.title {  color: gray;}.image-grid > .image {  border-color: gray;}.caption {  color: gray; /* Should always be gray, regardless of theme. */}

如果你希望更改主题色的话，需要调整三个地方的属性值，还要注意不要错改了 .caption 的 color 值。

那么 CSS 变量能派上什么用场呢？一处定义，处处使用！在引入 —theme-color 之后：

:root {--theme-color: gray;}.button {  background-color: var(--theme-color);}.title {  color: var(--theme-color);}.image-grid > .image {  border-color: var(--theme-color);}.caption {  color: gray;}

用 CSS 自定义属性作为主题色的变量后，一旦要调整，只需要改动一个地方就能全局生效。不止如此，—theme-color 这个变量名已经带上了语义，之前只是用 gray 的时候，我们并不知道当主题色发生变化的时候，特定元素的字体颜色是否也需要随之改变。使用该变量后，就没有了这样的困扰。

最好也用自定义属性控制标题的字色 (caption text)：

:root {--theme-color: gray;--caption-text-color: gray;}.button {  background-color: var(--theme-color);}.title {  color: var(--theme-color);}.image-grid > .image {  border-color: var(--theme-color);}.caption {  color: var(--caption-text-color);}

旅途才刚刚开始，让我们继续吧！

是时候放下计算器了

在 CSS 自定义属性：基础篇中，我们提到了自定义属性和 calc() 结合实现运行时的计算。在这个前提下，想想看下面这个网格布局要如何实现呢：

.image-grid {  padding: 8px;}.image-grid > .image {  margin: 8px;}

熟悉 CSS 盒模型的你应该很熟悉上面的代码吧：16px 宽的边距，.image 间有 16px 宽的间隔。但从 CSS 角度来看，这段代码还不够直观足以代表最终的网格效果，我们真正关心的东西也不能从代码中凸显出来。

从设计的角度来看，格子间距和容器边缘宽度都是 16px，这一点是最重要的。我们的目标是直观地反馈出设计意图，直接得到结果对我们来说没有实现以外的意义。而且分开设置这两个值也有维护成本。

如果将自定义属性和 calc() 结合，代码就会变得更加直观：

:root {--image-grid-spacing: 16px;}.image-grid {  padding: calc(var(--image-grid-spacing) / 2);}.image-grid > .image {  margin: calc(var(--image-grid-spacing) / 2);}

现在，我们可以直接看到计算过程，如果想要调整数值也很方便。甚至，你还能将变量变成页面级的，将 —page-grid 的值作为其他元素的基础值：

:root {--page-grid: 4px;--image-grid-spacing: calc(4 * var(--page-grid));}.title {  font-size: calc(5 * var(--page-grid));}.paragraph {  margin: calc(4 * var(--page-grid));}.image-grid {  padding: calc(var(--image-grid-spacing) / 2);}.image-grid > .image {  margin: calc(var(--image-grid-spacing) / 2);}

在上面的例子中，我们需要在 calc() 中做一些中间计算，让最终代码更清晰。

注意： Safari/WebKit 目前在 calc() 中的计算还有一些问题，这些问题在 Safari 10.1 中有望得到解决。

可读的变化

到目前，我们都关注在 CSS 自定义属性的一处定义处处使用，但它的威力不止如此，如果你想在特定的情况下改变变量值，也是可以做到的。

让我们来看看一个用 flexbox 实现的响应式网格：

.image-grid {  display: flex;  flex-wrap: wrap;  padding: 8px;}.image-grid > .image {  margin: 8px;  width: calc(100% - 16px);}@media (min-size: 600px) {/* 3 images per line */.image-grid > .image {    width: calc(100% / 3 - 16px);}}@media (min-size: 1024px) {/* 6 images per line */.image-grid > .image {    width: calc(100% / 6 - 16px);}}

上面这段代码实现的是一组响应式布局，但乍看上去，一头雾水。默认情况下，图片排成一列，也就是一行只显示一张图片；如果屏幕尺寸是600px、1024px…相应的，图片排列变成了三列或者是六列。和上一段代码例子中一样，此处容器边缘宽度和网格间距都是16px。

calc() 中的计算内容比较复杂，我们需要加上注释解释。但如果用上了自定义变量，情况就不同了：

:root {--grid-spacing: 16px;--grid-columns: 1;}.image-grid {  display: flex;  flex-wrap: wrap;  padding: calc(var(--grid-spacing) / 2);}.image-grid > .image {  margin: calc(var(--grid-spacing) / 2);  width: calc(100% / var(--grid-columns) - var(--grid-spacing));}@media (min-size: 600px) {:root {--grid-columns: 3;}}@media (min-size: 1024px) {:root {--grid-columns: 6;}}

可以看出，所有的计算都是在一处完成的。在媒体查询中需要改变的只有自定义属性的值。现在即使是刚看到这段代码的人，也能很快读懂它。而且不再需要不断使用 calc() 做各种计算了，也规避了因为打错而造成的问题。

注意：上面某些用法对于 CSS 预处理器来说可能太复杂了，在实际使用中可能不会按照预期生成代码。

CSS 自定义属性在存值取值方面有很大作用。接下来我们将探索自定义属性作为 CSS 和 JavaScript 间桥梁的使用。接下来，让我们看看 CSS 自定义属性和 JS 结合能发挥的作用吧！

通过 CSS Class 保证 CSS 和 JavaScript 的独立性

在大部分情况下，我们都希望 CSS 和 JavaScript 可以解耦。最简单并利于维护的方式就是使用语义化良好的 CSS class。通过 JS 动态添加或移除 class，改变视觉效果：

.button {  position: relative;  transform: scale(1);}.button.js-toggled {  transform: scale(1.5);}

const button = document.querySelector('.button');button.addEventListener('click', () => {  button.classList.toggle('js-toggled');});

这样做就不再需要通过 JS 添加行内样式，它只负责触发视觉的变化，真正改变视觉的是 CSS。反之，如果需要更改触发事件但依旧使用同一个视觉变化效果，只用修改 JS 代码。

注意：建议将通过 JS 控制的 CSS class 和默认的 class 区分开来。比如加上 js- 的前缀(见上段代码片段)就是个不错的选择。

在 CSS 和 JavaScript 中传值

class 的添加或移除在非黑即白的场景下很合适，但往往情况很复杂，可能还需要动态地传入一些值。比如，在和用户输入有关的场景中，根据用户的输入决定某些视觉展现。

假设现在有一个容器元素，我们希望当用户点击它的时候可以移动到最后一位。如果在该容器中设置一个辅助性元素，我们可以这样移动它：

.container {  position: relative;}.container > .auxElement {  position: absolute;}

document.querySelector('.container').addEventListener('click', evt => {const aux = document.querySelector('.container > .auxElement');  aux.style.transform = `translate(${evt.clientX}px, ${evt.clientY}px)`;});

虽然上面这段代码能实现我们想要的效果，但 JS 不仅需要直接操作那个辅助性元素(理想情况下，它甚至不应该知道这个元素的存在)，还需要通过内联样式修改这个元素的 transform 属性值。

直到现在，这个问题还是没有完美解决的方式。但有了自定义属性之后，我们至少可以将这个解决方法抽象化一些了：

.container {  position: relative;--clickX: 0;--clickY: 0;}.container > .auxElement {  position: absolute;  transform: translate(var(--clickX, 0), var(--clickY, 0));}

const container = document.querySelector('.container');container.addEventListener('click', evt => {  container.style.setProperty('--clickX', `${evt.clientX}px`);  container.style.setProperty('--clickY', `${evt.clientY}px`);});

现在又回到了用 CSS 处理视觉表现上了，不再需要通过 JS 更改内联样式。事实上，连辅助元素都能用 ::after 伪元素替代：

.container {  position: relative;--clickX: 0;--clickY: 0;}.container::after {  position: absolute;  transform: translate(var(--clickX, 0), var(--clickY, 0));}

提示： 直接通过 JS 修改伪元素(比如 ::after)的样式不大容易，可以考虑在父元素上使

用自定义属性作为 JavaScript 和 CSS 之间的桥梁。这是个简单又容易维护的解决方案！

一个变量，多处使用

逻辑上的变化可能伴随着大面积视觉表现上的更改，典型的例子就是选择主题，更换主题时可能引起大部分元素视觉上的变化。

以音乐播放器为例，如果你希望界面颜色随着当前收听专辑的更改而变化，从前你需要维护一系列会出现颜色变化的元素以及属性，需要的时候依次更改：

const thingsToUpdate = new Map([['playButton', 'background-color'],['title': 'color'],['progress': 'background-color']]);for (let [id, property] of thingsToUpdate) {  document.getElementById(id).style.setProperty(property, newColor);}

HTML 结构如下：

 class="title js-update-color">Song title class="play-button js-update-background">Play

const colorList = document.querySelectorAll('.js-update-color');for (let el of colorList) {  el.style.setProperty('color', newColor);}const backgroundList = document.querySelectorAll('.js-update-background');for (let el of backgroundList) {  el.style.setProperty('background-color', newColor);}

不管怎么样，都要常常更新跟随主题变化的元素和属性，所以这个方法会让后续维护变得艰难。

还有一种解决方式是引入一个新样式，它将会覆盖旧样式。这个方法相对好一些(虽然比较 hacky)，但还是避免不了要覆盖一系列的样式，这其中依然有着维护成本：

.play-button {  background-color: ${newColor} !important;}.title {  color: ${newColor} !important;}.progress-track {  background-color: ${newColor} !important;}

但通过自定义属性，问题能得到不小的简化：只要改变位于 DOM 结构中最高点的元素，接着让浏览器去改变该节点之下的节点：

.player {--theme-color: red;}.play-button {  background-color: var(--theme-color);}.title {  color: var(--theme-color);}.progress-track {  background-color: var(--theme-color);}

document.querySelector('.player').style.setProperty('--theme-color', newColor);

JavaScript 根本不需要知道哪些元素哪些属性会发生变化，也不需要开发者维护受影响的元素列表。使用自定义元素，明显比前文中的方案都好！

意义

减少对 CSS class 的操作，让 CSS 自定义属性帮助你构建出一个 JS 和 CSS 解耦的页面。

CSS 自定义属性能让运行时的任何更改都将局限在一组明确定义的实体中，这组实体就是为了交互而存在的。这样，也降低了开发者定位 bug 的难度，还能让样式和行为分离。

既然样式和逻辑独立于彼此，样式只有 CSS 来实现，逻辑也只由 JS 来完成，维护也变得更加容易。

关于本文
译者：@kmokidd
译文：https://zhuanlan.zhihu.com/p/26654544
作者：@Sérgio
原文：https://sgom.es/posts/2017-02-03-more-readable-css-with-css-custom-properties/
https://sgom.es/posts/2017-02-10-bridging-css-and-js-with-custom-properties/

为你推荐

【第1600期】如何学习 CSS

【第1596期】CSS 自定义属性：基础篇