代码之家 › 专栏 › 技术社区 › neuroguy123

CSS组织和颜色

css

neuroguy123 · 技术社区 · 16 年前

我刚刚完成了一个中等大小的网站,我注意到关于我的CSS组织的一件事是我有很多硬编码的颜色值。这显然不利于维护性。通常,当我设计一个网站时,我会为一个主题选择3-5种主要颜色。最后我为段落、链接等设置了一些默认值…在我的主要CSS的开头,但是一些组件会改变颜色(例如,图例标签),并要求我用我想要的颜色重新设置样式。你如何避免这种情况?我正在考虑为每种颜色创建单独的规则,并在需要重新设计时使用这些规则。

即

.color1 {
    color: #3d444d;
}

12 回复 | 直到 16 年前

naspinski 16 年前

这正是你应该做的。

你越能集中化你的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>

记得。。。inline css=坏(大多数时候)

Josh Millard 16 年前

我在这里做的一件事是从其他样式/布局标记中分解调色板声明,对列表中常见的有色项进行分组,例如。

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配置文件作为您的包含,这也使得仅热交换颜色的主题变体变得更容易。

Community CDub 8 年前

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

总而言之,您有三个基本选项:

使用宏预处理器替换样式表中的常量颜色名称。
使用客户端脚本配置样式。
对每种颜色使用一个规则,列出它应该应用的所有选择器(我的fav…)

Matthew Rapati 16 年前

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

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

现在你可以随心所欲地使用这种颜色,只需要在一个地方改变它。当然,这也适用于除颜色以外的其他值。

thanksd thibaut noah 9 年前

可能将所有颜色信息拉入样式表的一部分。例如,更改:

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

JeeBee 16 年前

您可以有一个colors.css文件,其中只包含每个标签的颜色/图像。然后,您可以通过替换文件、动态生成的CSS文件、使用不同的CSS文件并根据网站url/subfolder/property/etc进行选择来更改颜色。

或者你可以在写作的时候使用彩色标签,但是你的HTML会变成:

CSS应该有一个特性,在这个特性中,您可以为希望通过样式保持一致但只在一个地方定义的颜色等内容定义值。不过,还有搜索和替换。

Kolten 16 年前

所以你是说,如果你发现另一种颜色“主题”效果更好,你不想回到你的CSS中去改变颜色值?

不幸的是,我看不出解决这个问题的办法。CSS定义了样式,而颜色就是其中之一,唯一改变样式的方法就是进入CSS并改变它。

当然,你可以为自己建立一个小程序,让你通过在网页上或其他东西上选择一个色轮来更改CSS文件,然后用文件系统对象或其他东西将这个值写入CSS文件,但这比确定需要的工作要多得多。

Allain Lalonde 16 年前

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

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

Aaron Jensen 16 年前

CSS不是你的答案。你想在类似CSS的基础上研究抽象 SASS . 这将允许您定义常量,并通常清理您的CSS。

这是一张清单 CSS Frameworks .

Terhorst 16 年前

我把我用过的所有颜色的清单放在文件的顶部。

PhiLho 16 年前

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

另一种方法是,避免每次分析此文件(尽管缓存应该注意这一点),或者只是在您有一个静态站点的情况下,在上载到服务器之前,使用一些脚本/静态模板引擎制作此类模板并对其进行分析。

搜索/替换可以工作,除非两种最初不同的颜色最终相同:之后很难再将它们分开!-)

如果我没有弄错,CSS3应该允许这样的参数化。但我不会屏住呼吸,直到这项功能在90%的网络浏览器上可用!

thanksd thibaut noah 9 年前

我喜欢把颜色信息分成一个单独的文件,不管我怎么做。如果可以的话,我会在这里接受多个答案,因为我也喜欢乔希·米拉德的答案。不过,我喜欢有单独的颜色规则的想法,因为一个特定的标签可能有不同的颜色,这取决于它出现的位置。也许这两种技术的结合会很好:

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

然后还有

.color1 {
    color: #ff0000;
}

当你需要重新设计的时候。