1200字范文 > 属性值动态调整_【第1603期】CSS 自定义属性：使用篇

属性值动态调整_【第1603期】CSS 自定义属性：使用篇

时间：2019-08-14 13:33:49

前言

好的文章值得多看两眼。今日早读文章由@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

class="progress-track js-update-background">

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 {