CSS的组织和颜色
我刚完成了一个中等大小的网站，而关于CSS组织的一件事我注意到，我在整个过程中都有很多硬编码的颜色值。这显然对可维护性不好。通常，当我设计站点时，我会为主题选择3-5种主要颜色。我最终在主要CSS的开头设置了一些段落，链接等的默认值，但是某些组件会更改颜色(例如，图例标签)，并要求我用所需的颜色重新设置样式。我们如何避免这种情况？我正在考虑为每种颜色创建单独的规则，并在需要重新设置样式时使用它们。
IE。
.color1 {
color: #3d444d;
}
解决方案
我们可能有一个colours.css文件，其中仅包含每个标签的颜色/图像。
然后，我们可以通过替换文件，具有动态生成的CSS文件或者具有不同的CSS文件并根据网站URL /子文件夹/属性/等进行选择来更改颜色。
或者，我们可以在编写时使用颜色标签，但是HTML变成：
<p style =" body grey">布拉</ p>
CSS应该具有一项功能，我们可以在其中定义希望通过样式保持一致但只能在一个位置定义的颜色之类的值。尽管如此，仍在搜索和替换中。
因此，我们是说如果发现其他可能更好用的颜色"主题"，则不想回到CSS中更改颜色值？
不幸的是，我没有办法解决这个问题。 CSS定义了样式，而颜色是样式之一，更改样式的唯一方法是进入CSS并对其进行更改。
当然，我们可以构建一个小程序，该程序允许我们通过选择网页上的色轮或者其他内容来更改css文件，然后使用filesystemobject或者其他内容将该值写入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类与colors图层一起使用，这样我就可以更改一个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 =不好(大多数情况下)
CSS不是答案。我们想研究像SASS这样的CSS之上的抽象。这将允许我们定义常量并通常清理CSS。
这是CSS框架列表。
我在文件顶部保留了我使用过的所有颜色的列表。
当CSS由服务器端脚本提供服务时，例如。 PHP，通常，编码人员将CSS作为模板文件，并在运行时替换颜色。也可以使用它来让用户选择颜色模型。
另一种避免每次都解析此文件(尽管应该由缓存来做)或者仅在我们拥有静态站点时才解析的方法是，制作这样的模板并在上载到服务器之前用一些脚本/静态模板引擎对其进行解析。
搜索/替换可以工作，除非两个最初不同的颜色最终是相同的：之后很难再次将它们分开！ :-)
如果我没记错的话，CSS3应该允许这样的参数化。但是直到90％的浏览器都可以使用此功能时，我才会屏住呼吸！
请参阅：在.CSS文件中创建变量以在该.CSS文件中使用
总而言之，我们有三个基本选择：
- 使用宏预处理器替换样式表中的常量颜色名称。
- 使用客户端脚本来配置样式。
- 对每种颜色使用一条规则，列出应应用该颜色的所有选择器(我的最爱...)
也许将所有颜色信息提取到样式表的一部分中。例如更改此：
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;
}
// ...
有时我使用PHP，并使文件类似style.css.php。
然后，我们可以执行以下操作：
<?php
header("Content-Type: text/css");
$colour1 = '#ff9';
?>
.username {color: <?=$colour1;?>; }
现在，我们可以在任意位置使用该颜色，而只需在一个位置进行更改。当然，这也适用于颜色以外的其他值。
我喜欢将颜色信息分成一个单独的文件的想法，无论我怎么做。如果可以的话，我会在这里接受多个答案，因为我也喜欢乔希·米勒德(Josh Millard)的答案。我喜欢具有单独的颜色规则的想法，因为特定的标签可能会根据其出现的位置而具有不同的颜色。也许将这两种技术结合起来会很好：
h1, p, code {
color: #ff0000;
}
然后也有
.color1 {
color: #ff0000;
}
用于何时需要重新样式。
