【CSS】CSS自定义属性进阶使用（一）
进阶使用CSS自定义属性
在之前一篇介绍CSS自定义属性的文章中，我们介绍了什么是CSS自定义属性，
var()、calc()。本篇文章中，为了进一步使用它，我们将介绍CSS自定义属性的其他用法。
自定义原则
在传统的CSS中，通常我们需要写重复的属性值，而自定义原则能让我们避免这种情况。做到“一处定义，处处使用”。
:root {
--theme-color: gray;
}
.button {
background-color: var(--theme-color);
}
.title {
color: var(--theme-color);
}以后，一旦要调整，只需要改动--theme-color这个属性的值。
进一步发挥calc()计算
我们知道，calc()与自定义属性结合能实现属性值的计算。
现在，有这样一个场景：实现一个3列的网格布局，其中：内边距8px，网格中的box外边距为8px。
原有的代码：
.image-grid {padding: 8px;}
.image-grid > .box {margin: 8px;}下面使用calc()改进：
:root {
--image-grid-spacing: 16px;
}
.image-grid {
padding: calc(var(--image-grid-spacing)/2);
}
.image-grid > .box {
margin: calc(var(--image-grid-spacing)/2);
}注意： Safari/WebKit 目前在 calc()中的计算还有一些问题，这些问题在 Safari 10.1 中有望得到解决。
再来看一个例子：用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;
}
}可以看出，所有的计算都是在一处完成的。在媒体查询中需要改变的只有自定义属性的值。
CSS 与 Javascript之间的桥梁：自定义属性
假设现在有一个容器元素，我们希望当用户点击它的时候可以移动到最后一位。如果在该容器中设置一个辅助性元素，我们可以这样移动它：
.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 更改内联样式。
一次定义，处处使用
逻辑上的变化可能伴随着大面积视觉表现上的更改，典型的例子就是选择主题，更换主题时可能引起大部分元素视觉上的变化。
以音乐播放器为例，如果你希望界面颜色随着当前收听专辑的更改而变化，从前你需要维护一系列会出现颜色变化的元素以及属性，需要的时候依次更改：
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 结构如下：
<span class="title js-update-color">Song title</span>
<button class="play-button js-update-background">Play</button>
<div class="progress-track js-update-background"></div>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);
}这种方式，不管怎么样，都要常常更新跟随主题变化的元素和属性，所以这个方法会让后续维护变得艰难。
还有一种解决方式是引入一个新样式（!important），它将会覆盖旧样式。这个方法相对好一些（虽然比较 hacky），但还是避免不了要覆盖一系列的样式，这其中依然有着维护成本。
- 通过自定义属性处理
只要改变位于 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和JS分别独立实现样式和逻辑部分，维护起来更加容易。
腾讯云开发者
