CSS (样式表)组织和颜色
我刚刚完成了一个中等大小的网站，我注意到我的css组织的一件事是我有很多硬编码的颜色值贯穿始终。这显然不利于可维护性。一般来说，当我设计一个网站时，我会为一个主题挑选3-5种主要颜色。我最终为段落、链接等设置了一些默认值。在我的主要css的开始，但一些组件会改变颜色(如图例标签)，并要求我重新使用我想要的颜色。如何避免这种情况？我正在考虑为每种颜色创建单独的规则，并在需要重新设计样式时使用这些规则。
即
.color1 {
color: #3d444d;
}回答 13
Stack Overflow用户
发布于 2008-09-19 15:26:52
这正是你应该做的。
css的集中化程度越高，将来进行更改就越容易。让我们认真地说，你将来会想要改变颜色。
你几乎不应该硬编码任何css到你的html，它应该在css中。
另外，我开始经常做的一件事就是把你的css类层叠在一起，这样一次更改颜色就更容易了。无处不在。
示例(随机颜色) css：
.main_text {color:#444444;}
.secondary_text{color:#765123;}
.main_color {background:#343434;}
.secondary_color {background:#765sda;}然后是一些标记，注意我是如何使用colors层和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 =错误(大多数情况下)
Stack Overflow用户
发布于 2008-09-19 15:25:12
我在这里做的一件事是将我的调色板声明从其他样式/布局标记中分离出来，将常用颜色的项目分组到列表中，例如
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配置文件作为您的include来热交换仅限颜色的主题变体变得更容易。
Stack Overflow用户
发布于 2008-09-19 15:31:05
请参阅：Create a variable in .CSS file for use within that .CSS file
总而言之，您有三个基本选择：
- 使用宏预处理器替换stylesheets.
- Use客户端脚本中的常量颜色名称以配置样式。
- 对每种颜色使用单个规则，并列出应应用该规则的所有选择器(我最喜欢的...)
https://stackoverflow.com/questions/102720
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号