Question

我刚刚完成了一个中等大小的网站，我注意到有关我的css组织的一件事是我有很多硬编码的颜色值。这显然不具备可维护性。通常，当我设计一个网站时，我会为主题选择3-5种主要颜色。我最终在主css的开头为段落，链接等设置了一些默认值，但是一些组件会改变颜色（比如传说标签），并要求我用我想要的颜色重新设置。你怎么避免这个？我正在考虑为每种颜色创建单独的规则，并在我需要重新设置时使用它们。

即

.color1 {
    color: #3d444d;
}

Answer 1

我在这里做的一件事是从其他样式/布局标记中分出我的调色板声明，将列表中常见颜色的项目分组，例如。

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配置文件定位为包含内容，就可以更轻松地热交换仅用于颜色的主题变体。

Answer 2

这正是你应该做的。

您可以更集中地制作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 =坏（大部分时间）

Answer 3

请参阅：Create a variable in .CSS file for use within that .CSS file

总而言之，您有三个基本选项：

使用宏预处理器替换样式表中的常量颜色名称。
使用客户端脚本来配置样式。
对每种颜色使用单一规则，列出应该应用的所有选择器（我的收藏...）

Answer 4

也许将所有颜色信息都拉到样式表的一部分。例如，改变这个：

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;
}
// ...

Answer 5

我有时会使用PHP，并使文件类似于style.css.php。然后你可以这样做：

<?php 
    header("Content-Type: text/css");
    $colour1 = '#ff9'; 
?>
.username {color: <?=$colour1;?>; }

现在您可以在任何地方使用该颜色，只需在一个地方更改它。当然，这也适用于除颜色之外的其他值。

Answer 6

你可以拥有一个colours.css文件，其中只包含每个标签的颜色/图像。然后，您可以通过替换文件，或者使用动态生成的CSS文件，或者使用不同的CSS文件并根据网站URL /子文件夹/属性/等进行选择来更改颜色。

或者您可以在编写时使用颜色标记，但随后您的HTML将变为：

＆lt; p style =“body grey”＆gt; Blah＆lt; / p＆gt;

CSS应该有一个功能，您可以在其中定义颜色等值的颜色，这些颜色希望通过样式保持一致，但仅在一个地方定义。仍然有搜索和替换。

Answer 7

所以你说如果你发现另一种可能更好的颜色“主题”，你不想回到你的CSS来改变颜色值吗？

不幸的是，我没有看到解决方法。 CSS定义样式，并且颜色是其中之一，更改它的唯一方法是进入css并更改它。

当然，你可以自己构建一个程序，它允许你通过在网页上选择一个色轮来改变css文件，然后使用filesystemobject或其他东西将该值写入css文件，但是这比确定的要多得多。

Answer 8

通常最好只找到并替换正在改变的颜色。

任何比这更强大的东西都会变得更加复杂，几乎没有什么好处。

Answer 9

CSS不是你的答案。您希望在SASS之类的CSS上查看抽象。这将允许您定义常量并通常清理您的CSS。

以下是CSS Frameworks的列表。

Answer 10

我保留了我在文件顶部使用的所有颜色的列表。

Answer 11

当CSS由服务器端脚本提供时，例如。 PHP，通常是编码器将CSS作为模板文件并在运行时替换颜色。这也可以用来让用户选择颜色模型。

另一种方法是，为了避免每次都解析这个文件（尽管缓存应该处理它），或者只是你有一个静态站点，就是制作这样的模板并在上传之前用一些脚本/静态模板引擎解析它服务器。

搜索/替换可以工作，除非两个最初不同的颜色最终相同：之后很难再将它们分开！： - ）

如果我没弄错的话，CSS3应该允许这样的参数化。但是，我不会屏住呼吸，直到这个功能在90％浏览网络的浏览器中都可用！

Answer 12

我喜欢将颜色信息分成单独的文件的想法，无论我怎么做。如果可以的话，我会在这里接受多个答案，因为我也喜欢Josh Millard。我喜欢使用单独的颜色规则的想法，因为特定标签可能根据其发生的位置而具有不同的颜色。也许两种技术的结合都会很好：

h1, p, code {
    color: #ff0000;
}

然后还有

.color1 {
    color: #ff0000;
}

当你需要重新开始时。

Answer 13

这是SASS帮助您的地方。

css组织和颜色

13 个答案: