css的组织和颜色

我刚刚完成了一个中等规模的网站，我注意到我的css组织的一件事是，我有很多硬编码的颜色值。这对于可维护性来说显然不是很好。一般来说，当我设计一个网站时，我会为主题选择3-5种主色。我最终设置了一些段落，链接等的默认值...在我的主CSS的开始，但一些组件会改变颜色（例如像传说标签），并要求我restet与我想要的颜色。你如何避免这种情况？我正在考虑为每种颜色创建单独的规则，并在需要恢复时使用这些规则。css的组织和颜色

即

.color1 { 
    color: #3d444d; 
}

来源

2008-09-19 dbrien

这正是你应该做的。

越集中，你可以让你的CSS，越容易在将来做出改变。让我们认真的，你会想在未来改变颜色。

你应该几乎从不硬编码到你的html的任何CSS，它应该所有在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 =错误（大部分时间）

来源

2008-09-19 15:26:51 naspinski

你可以有只用颜色/图像colours.css文件中的每个标签。然后你就可以替换该文件，或者具有动态生成CSS只是改变颜色文件，或有不同的CSS文件可用，并根据网站URL /子文件夹/属性/等选择。

或者你也可以有颜色的标签，你写的，但那么你的HTML变成：

< P类=“身灰色” >胡说</P >

CSS应该有一个功能，您可以定义颜色等值，您希望通过样式保持一致，但只能在一个位置定义。仍然有搜索和替换。

来源

2008-09-19 15:24:13 JeeBee

Downvoted ...将颜色名称放入课堂是一种不好的做法，因为下周的“灰色”将需要“蓝色”，并且您被困在一个糟糕的命名约定中。 – y0mbo 2008-09-19 15:35:51

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

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

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

来源

2008-09-19 15:24:13 Kolten

一般来说，最好找到并替换你正在改变的颜色。

任何比这更强大的功能将会更加复杂，而且几乎没有什么好处。

来源

2008-09-19 15:24:27

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

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配置文件作为包含对象，就可以更轻松地热插拔仅用于纯色主题的变体。

来源

2008-09-19 15:25:12

CSS不是你的答案。你想看看像在SASS这样的CSS之上的抽象。这将允许你定义常量，并通常清理你的CSS。

这里是一个CSS Frameworks的列表。

来源

2008-09-19 15:27:17

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

来源

2008-09-19 15:27:44 Terhorst

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

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

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

如果我没有弄错，CSS3应该允许这样的参数化。但是我不会屏住呼吸，直到90％的浏览器上网才能使用此功能！

来源

2008-09-19 15:30:17 PhiLho

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

总之，你有三个基本选项：

使用宏预处理器在你的样式表来代替恒定的颜色名称。
使用客户端脚本来配置样式。
使用单一规则每一种颜色，它列出了应适用于所有的选择（我最喜欢的......）

来源

2008-09-19 15:31:04 Shog9

也许把所有的颜色信息到您的样式表的一部分。例如更改此：

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

来源

2008-09-19 15:33:02 rampion

我有时用PHP，使文件像style.css.php。然后，你可以这样做：

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

现在你可以使用色彩，无论你想，只需要改变它在一个地方。当然，这也适用于其他颜色的值。

来源

2008-09-19 17:27:32

这可能是一个很好的策略，并且可以很容易地对gss和gzip进行压缩（输出缓冲区和正则表达式，空格，声明等） – Buzz 2008-09-19 19:24:14

我喜欢将颜色信息分离为单独文件的想法，无论我如何操作。如果可以的话，我会在这里接受多个答案，因为我也喜欢Josh Millard的。我喜欢分离颜色规则的想法，因为特定的标签可能会根据其出现的位置而具有不同的颜色。也许这两种技术的结合将是一件好事：

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

，然后也有

.color1 { 
    color: #ff0000; 
}

因为当你需要再整。

来源

2008-09-19 18:15:00 dbrien

css的组织和颜色

回答

相关问题