3.1 自定义属性
CSS变量，也叫作自定义属性，是web开发中管理样式的强大工具。它们的使用会影响性能和代码的组织，提高CSS的支持性和灵活性。 让我们更详细地看看自定义属性和继承如何影响这些方面。
什么是自定义属性？
提醒一下，自定义属性（也就是CSS变量）是可以在CSS中设置然后可以在整个样式文件中多次使用的值。它们通过双连字符（--）来声明，
可以使用var()函数。
声明自定义属性：
CSS
:root {
--main-color: #3498db;
--padding: 10px;
}
使用自定义属性：
CSS
background-color: var(--main-color);
padding: var(--padding);
3.2 对性能的影响
1. 优化重复使用
使用CSS变量有助于避免代码重复，因为同一个值可以多次使用，从而减少代码量并简化其维护。
示例：
CSS
:root {
--main-color: #3498db;
}
.header {
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
2. 缓存和渲染
浏览器可以有效地缓存和处理CSS变量，这对性能有积极影响。 当变量的值改变时，浏览器只需要重新计算一次样式，这降低了渲染负担。
3. 动态更新
CSS变量可以通过JavaScript动态改变，这允许更新样式而无需重新计算整个页面。
示例：
JavaScript
document.documentElement.style.setProperty('--main-color', '#e74c3c');
3.3 对代码组织的影响
集中管理样式
通过在一个地方定义CSS变量，可以集中管理样式，简化其维护和更改。
示例
在:root中更改变量的值会自动更新整个文档的所有相关样式：
CSS
:root {
--font-size: 16px;
--line-height: 1.5;
}
body {
font-size: var(--font-size);
line-height: var(--line-height);
}
继承和上下文
CSS变量从父级继承到子元素。这允许在更高的层级设置值，并在更具体的上下文中使用它们。
示例：
CSS
:root {
--base-font-size: 16px;
}
.container {
font-size: var(--base-font-size);
}
.container .heading {
font-size: calc(var(--base-font-size) * 1.5);
}
提高可读性
使用CSS变量提高代码的可读性，因为变量可以根据其功能命名，使代码更为清晰。
示例：
CSS
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
.primary-button {
background-color: var(--primary-color);
}
.secondary-button {
background-color: var(--secondary-color);
}
局部和全局变量
变量可以在全局层级（例如:root）声明，也可以为特定选择器本地声明。这允许创建灵活和自适应的样式。
示例：
CSS
:root {
--global-padding: 10px;
}
.section {
--section-padding: 20px;
padding: var(--section-padding);
}
.item {
padding: var(--global-padding);
}
3.4 完整实现示例
这是一个使用变量进行继承和局部重写的例子：
CSS
:root {
--main-padding: 10px;
--main-margin: 20px;
--primary-color: #3498db;
}
.container {
padding: var(--main-padding);
margin: var(--main-margin);
}
.container .header {
--primary-color: #e74c3c; /* 本地使用的变量重写 */
color: var(--primary-color);
}
.container .content {
color: var(--primary-color); /* 使用来自 root 的变量值 */
}
HTML
<div class="container">
<div class="header">This is the header</div>
<div class="content">This is the content</div>
</div>
解释：
- 在这个例子中，
--primary-color用于在.content元素中进行文本样式化，继承自根值 - 在
.header元素中，变量--primary-color被重写，使用了新的值
GO TO FULL VERSION