使用自定义属性修改组件

我认为，我们应该使用自定义属性来定制和修改微小的组件，而不是使用它们来为网站界面的整个部分设置样式。原因如下。

每当有人提到 CSS 自定义属性时，他们常常会谈论到一蹴而就地为网站界面设置主题的能力。例如，如果您在大型新闻机构工作，我们可能希望为财经版块和体育版块指定不同的视觉设计——按钮、标题、引用和文本颜色都可以动态更改。

自定义属性将使这种主题设置变得容易，因为我们不必向每个组件添加大量类。我们只需编辑 :root 中的单个变量即可，此外，我们还可以使用 JavaScript 编辑这些自定义属性，而这在使用 Sass 变量时是无法做到的。

不久前，Chris 在一篇关于 自定义属性和主题设置 的文章中介绍了这种用例，他给出的示例如下所示

:root {
  --mainColor: #5eb5ff;
}

header {
  background: var(--mainColor);
}

footer {
  background: var(--mainColor);
}

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 使用 CSS 自定义属性设置网站主题。

但是，我对使用 CSS 构建大型系统的了解越多，我就越认为更改全局样式这种方式在长期维护代码的整洁和一致性方面非常困难。而且，如果您正在处理任何大型 Web 应用程序，那么您可能正在使用 React 之类的东西，其中所有内容都是由微小的可重用组件构成的，尤其是在这种规模下， 级联可能会变得可怕且危险。

如果我们在处理更大、更复杂的系统，那么我们应该如何使用自定义属性呢？我认为最好的选择是将它们保留在组件级别，以帮助使我们的 CSS 非常简洁。因此，我们可以将它们绑定到组件而不是添加到根元素，如下所示

.btn {
  --btnColor: #5eb5ff;
}

之后，我们可以将 color 或 border 等属性设置为使用此变量

.btn {
  --btnColor: #5eb5ff;
  border: 1px solid var(--btnColor);
  color: var(--btnColor);
  
  &:hover {
    color: white;
    background-color: var(--btnColor);
  }
}

到目前为止一切顺利！然后我们可以添加修饰符类，这些类仅更改自定义属性的值

.btn-red {
  --btnColor: #ff6969;
}

.btn-green {
  --btnColor: #7ae07a;
}

.btn-gray {
  --btnColor: #555;
}

查看 CodePen 上 Robin Rendle (@robinrendle) 的笔 自定义属性。

看看这有多么简洁？只需几行 CSS 代码，我们就创建了一个完整的按钮系统——我们可以轻松更改字体大小或添加动画或任何其他内容，并保持类的简洁性，而不会干扰 CSS 的全局范围。尤其是在所有这些代码都可能位于单个文件中（如 buttons.scss）的情况下，所有逻辑都存在于一个位置非常有用。

无论如何，当然，这种在组件级别使用自定义属性的方法不如使用单个变量来为网站的每个部分设置样式那样令人兴奋或时尚，但我不完全确定这种主题设置到底有多有用。很多时候，设计需要对每个组件进行大量微小的调整以满足可用性要求，因此将所有内容分解到组件级别是有意义的。

您认为自定义属性最有用的是什么？我很想知道大家对这些内容的看法，请在下面的评论中分享。