简化样式：可维护代码的 CSS 变量

以下是有关 CSS 变量如何简化对可重用和可自定义组件的支持的一些见解。无论您使用什么框架，这种方法仍然与框架无关。

样品组件

假设我需要将进度条组件添加到我的 UI 工具包中。以 React 为例，这是一个简单的实现。

import "./ProgressBar.css";

export function ProgressBar({percentage} : {percentage: number} ){
  return ( 
    <div className="progress-bar">
      <div className="fill"
        style={{ width: percentage + "%"}}
      />
    </div>
  )
}

以及用于添加颜色和基本规则的 CSS

.progress-bar{
  width: 200px;
  height: 20px;
  border: 1px solid black;
}

.progress-bar .fill{
  height: 100%;
  background: black;
}

默认是黑色的，看起来像这样

该组件应该在我的应用程序的各个部分中重用。我希望每个消费者都应该能够灵活地定制条形图及其边框的颜色，以符合他们的特定需求和配色方案。

我希望消费者提供自己的 CSS 规则来覆盖默认颜色。例如，消费者可以编写以下 CSS 以使上传部分中的进度条变为绿色。

#upload .progress-bar{
  border-color: green
}
#upload .progress-bar .fill {
  background-color: green;
}

此定制按预期工作。

每个消费者都可以采用相同的方法，乍一看，这似乎是一个可靠的解决方案。

问题

但是，这种定制方式有几个缺点

❌未来的bug：从长远来看，进度条组件将会被更新或重构。如果重命名类或更改标签的层次结构，自定义将会中断。
？ 消费者的认知负荷：使用我的组件的开发人员需要检查其 HTML 结构，以确定覆盖默认值所需的 CSS 规则。
⚒️ 繁琐的自定义代码：修改栏的颜色及其边框需要编写两个单独的规则。

当然，对于像我们的 ProgressBar 这样的简单情况来说，这并不是什么大问题。然而，大型 UI 套件中更复杂的组件，尤其是当许多开发人员使用时，可能会带来重大挑战。

CSS 变量作为解决方案

为了简化定制并缓解这些问题，我们可以利用 CSS 变量。

在我的示例组件中，仅在 CSS 文件中进行更改

.progress-bar{
  --progress-bar-color: black;
  width: 200px;
  height: 20px;
  border: 1px solid var(--progress-bar-color);
}

.progress-bar .fill{
  height: 100%;
  background: var(--progress-bar-color);
}

请注意，我声明了变量 --progress-bar-color 来设置颜色。消费者现在可以轻松定制组件

#upload .progress-bar{
  --progress-bar-color: green;
}

通过这种新方法，让我们重新审视自定义问题列表

❌未来的bug：作为进度条的开发者，我可以根据需要修改类名和层次结构。但是，只要我将 CSS 变量正确应用到更新的元素，消费者所做的颜色自定义就保持不变。
？ 消费者的认知负荷：消费者不再需要检查我的组件的代码来自定义颜色。 CSS 变量充当“接口”或“抽象”，允许他们简单地设置所需的颜色，而无需深入研究实现细节。
⚒️ 繁琐的自定义代码： 现在，单个 CSS 规则就可以自定义填充和边框元素。

额外福利

在颜色定制方面，依靠CSS变量简化了通用配色方案的应用。您可以使用定义整个页面变量的简单 CSS 文件来管理所有颜色设置。

现在，页面上的所有颜色都可以从一个位置控制。要更新整个页面的颜色，只需用新的集合替换 CSS 变量定义即可。

这种方法还有助于实现浅色/深色主题或用户定义的颜色首选项等功能。

结果

？ 更好的可维护性：通过采用CSS变量的定制，代码库变得更易于维护，使以后的更新更简单、更省时。

？ 减少容易出现错误的代码：组件内部与其自定义接口之间的清晰分离最大限度地降低了错误风险，因为内部实现的更改不会影响组件的自定义方式。

？ 代码变得更容易理解：CSS变量的使用使解决方案更直观、更容易理解。开发者可以快速掌握如何修改样式，而无需深入研究复杂或不透明的代码。

♾️ 与框架无关：您可以在任何地方应用此方法，因为它仅依赖于浏览器功能。

以上是简化样式：可维护代码的 CSS 变量的详细内容。更多信息请关注PHP中文网其他相关文章！