我刚刚完成了一个中型网站，我注意到我的 css 组织的一件事是我有很多硬编码的颜色值。这显然不利于可维护性。通常，当我设计一个网站时，我会为一个主题选择 3-5 种主要颜色。我最终在我的主要 css 的开头设置了一些段落、链接等的默认值，但是一些组件会改变颜色（例如图例标签）并要求我用我想要的颜色重新设置样式。你如何避免这种情况？我正在考虑为每种颜色创建单独的规则，并在需要重新设计时使用这些规则。
即
.color1 {
color: #3d444d;
}
【问题讨论】：
标签： css
我在这里做的一件事是将我的调色板声明从其他样式/布局标记中分离出来，将常用颜色的项目分组到列表中，例如
h1 {
padding...
margin...
font-family...
}
p {
...
}
code {
...
}
/* time passes */
/* these elements are semantically grouped by color in the design */
h1, p, code {
color: #ff0000;
}
在预览中，JeeBee 的建议是对此的逻辑扩展：如果处理您的颜色声明有意义（当然，这也适用于其他样式问题，尽管颜色具有不改变布局的独特属性），您可以考虑将其推送到单独的 css 文件中，是的。这也使得热交换仅颜色主题变体变得更容易，只需将一个或另一个 colorxxx.css 配置文件定位为您的包含。
【讨论】：
这正是你应该做的。
您的 CSS 越集中，将来进行更改就越容易。说真的，你将来会想要改变颜色。
您几乎不应该将任何 css 硬编码到您的 html 中，它应该全部在 css 中。
另外，我开始经常做的事情是将你的 css 类分层，以便更轻松地更改颜色一次...代表任何地方。
示例（随机颜色）css：
.main_text {color:#444444;}
.secondary_text{color:#765123;}
.main_color {background:#343434;}
.secondary_color {background:#765sda;}
然后是一些标记，注意我如何将颜色层与 otehr 类一起使用，这样我就可以只更改一个 css 类：
<body class='main_text'>
<div class='main_color secondary_text'>
<span class='secondary color main_text'>bla bla bla</span>
</div>
<div class='main_color secondary_text>
You get the idea...
</div>
</body>
记住...内联 css = 糟糕（大多数时候）
【讨论】：
见：Create a variable in .CSS file for use within that .CSS file
总而言之，您有三个基本选择：
【讨论】：
我有时会使用 PHP，并制作类似于 style.css.php 的文件。 然后你可以这样做：
<?php
header("Content-Type: text/css");
$colour1 = '#ff9';
?>
.username {color: <?=$colour1;?>; }
现在您可以在任何地方使用该颜色，并且只需在一个地方进行更改。当然，这也适用于除颜色以外的值。
【讨论】：
也许将所有颜色信息都放入样式表的一部分。例如改变这个：
p .frog tr.mango {
color: blue;
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
background: green;
color: red;
font-size: small;
float: left;
}
// ...
到这里：
p .frog tr.mango {
color: blue;
}
#eta .beta span.pi {
background: green;
color: red;
}
//...
p .frog tr.mango {
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
font-size: small;
float: left;
}
// ...
【讨论】：
您可以拥有一个 colours.css 文件，其中仅包含每个标签的颜色/图像。 然后，您可以通过替换文件、动态生成的 CSS 文件或提供不同的 CSS 文件并根据网站 URL/子文件夹/属性/等进行选择来更改颜色。
或者您可以在编写时使用颜色标签，但是您的 HTML 会变成：
废话
CSS 应该有一项功能，您可以在其中定义颜色等您希望通过样式保持一致但仅在一个地方定义的值。尽管如此，还是有搜索和替换功能。
【讨论】：
所以您的意思是，如果您发现另一种颜色“主题”可能效果更好，您不想回到 CSS 中更改颜色值？
很遗憾，我没有办法解决这个问题。 CSS 定义了样式，颜色是其中之一，改变它的唯一方法就是进入 css 并改变它。
当然，您可以自己构建一个小程序，允许您通过选择网页上的色轮或其他东西来更改 css 文件，然后使用文件系统对象或其他东西将该值写入 css 文件，但是这肯定比所需的工作量要多得多。
【讨论】：
通常最好只找到并替换您正在更改的颜色。
任何比这更强大的东西都会更复杂，而且好处很少。
【讨论】：
CSS 不是你的答案。您想研究 CSS 之上的抽象，例如 SASS。这将允许您定义常量并通常清理您的 css。
这是CSS Frameworks的列表。
【讨论】：
我在文件顶部保留了我使用过的所有颜色的列表。
【讨论】：
当 CSS 由服务器端脚本提供服务时，例如。 PHP，通常编码人员将 CSS 作为模板文件并在运行时替换颜色。这也可以用来让用户选择颜色模型。
另一种方法，避免每次都解析这个文件（虽然缓存应该处理这个），或者如果你有一个静态站点，是制作这样的模板并在上传到之前用一些脚本/静态模板引擎解析它服务器。
搜索/替换可以工作，除非两个最初不同的颜色最终相同：之后很难再将它们分开！ :-)
如果我没记错的话，CSS3 应该允许这样的参数化。但在 90% 的上网浏览器都可以使用此功能之前，我不会屏住呼吸！
【讨论】：
我喜欢将颜色信息分离到一个单独的文件中的想法，不管我是怎么做的。如果可以的话，我会在这里接受多个答案，因为我也喜欢 Josh Millard 的答案。我喜欢有单独的颜色规则的想法，因为一个特定的标签可能有不同的颜色，具体取决于它出现的位置。也许这两种技术的结合会很好：
h1, p, code {
color: #ff0000;
}
然后还有
.color1 {
color: #ff0000;
}
当你需要重新设计时。
【讨论】：
这就是SASS 来帮助你的地方。
【讨论】：