简化样式：可维护代码的 CSS 变量-css教程-PHP中文网

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

王林

发布： 2024-08-22 08:32:03

原创

881 人浏览过

以下是有关 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;
}

登录后复制

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

Streamlining Styles: CSS Variables for Maintainable Code

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

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

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

登录后复制

此定制按预期工作。

Streamlining Styles: CSS Variables for Maintainable Code

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

问题

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

❌未来的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 规则就可以自定义填充和边框元素。