Question

我正在尝试正确编写内部webapp的HTML和CSS。尽可能在技术上，我希望HTML标记定义页面的内容，并且完全独立于布局所需的内容。

显然，不可能完美地做到这一点。每次我必须添加一个额外的嵌套div时，我会在内部死一点，其唯一目的是使布局工作。

我一直在努力解决的最新问题是如何减少.css文件中重复文本的数量。主要是颜色。在我的整个应用程序中，我使用颜色来表示“干净”，“错误”，“警告”和“赦免”，到目前为止，几乎每个使用颜色的地方都需要明确定义它们。有时它们用于文本颜色，有时用于背景颜色，有时用于边框颜色。

有没有办法为名称赋予颜色等值，然后在CSS属性中引用该名称？

我知道继承如何在CSS中工作，我知道实现这个目标的一种方法是在我的很多元素上使用多个类名，然后我可以让backgroundClean成为一种风格所有类型的对象都使用。但这需要让HTML知道更多的数据，这些数据只与页面的风格布局有关，而不是数据，正如我所提到的那样，我会喜欢来避免。

奖金问题：做这种事情的最佳做法是什么？我是不是很愚蠢，试图让HTML + CSS就像MVC一样，还没准备好呢？我知道这是CSS一直以来的方向，但也许它还没有。

Answer 1

为什么是，有新引入css variables来执行此操作！

不幸的是......它还没有进入浏览器，所以你还不能使用它们。

要获得相同的行为，您需要使用某种服务器端语言将颜色动态输出到CSS文件中。（你也可以使用大量的javascript，但这太可怕了）

所以在PHP中你可以这样做：

styles.php---------------------
<?php
$warningColor = "#f00";
?>

.warning {
     color: <?=$warningColor?>;
}
.error {
     color: <?=$warningColor?>;
}

index.html----------------------

<link rel="stylesheet" src="styles.php" />

Answer 2

没有任何当前的浏览器支持。虽然如果您使用SASS之类的东西预处理CSS，那么您可以执行此操作以及更多内容。 SASS改进CSS几乎是每一种方式。它使编写样式表变得更容易，更有趣。我永远不会回去写香草CSS。

Answer 3

我不确定我是否完全理解您的问题，但您可能只想考虑为颜色指定一个特定的类。例如，如果“警告”的所有text / divs / etc都是鲜红色，那么你可以在css中执行此操作：

.warning { color: #f00; }

然后，只要你有一个div，即使它已经有了额外的类，你只需添加这个类，空格分隔类：

<div class="message warning">Invalid username.</div>

有一点需要注意的是，为类使用颜色名称并不是一种好习惯，例如，您不应该定义名为“blue”的类。如果您希望将来更改它，您应该尝试使用该颜色代表的名称。

编辑：你在这个问题中确实提到了这一点，但据我所知，这将是目前最好的方式，所以我只是想稍微扩展一下。

Answer 4

我刚刚发现了这个（在StackExchange Podcast中提到）： http://lesscss.org/

这是一个javascript，可以让你把变量（和其他功能）放在你的CSS中。

Answer 5

我认为实现这一目标的最佳方式是从服务器端。让服务器处理您的CSS，以便输出您想要的内容。

例如，如果您使用的是C＃，则可以使用脚本块

引用变量

width: <%= Width %>

Answer 6

使用纯HTML和CSS无法做到这一点。

当你要求获得类似的效果时，你可以动态生成CSS;但是，您必须非常小心地控制此类CSS的缓存，以找到输出的总控制和最小化用户的带宽使用之间的平衡点。

您也可以使用jQuery或任何其他JavaScript框架来实现它，但这会在浏览器上投入更多工作，如果没有限制地使用，可能会使您的页面无法响应用户。

Answer 7

另一种可能的解决方案是为每种风格添加多个定义......

.error{ text-decoration: underline; font-weight: bolder}

.cancelled{ text-decoration: line-through; font-style: italic;}

.warning{font-weight: bold}

.comment{font-size: smaller; font-style: italic}
.
.
.

.error, .cancelled { color: red };

.warning, .comment {color: green};

这里的关键是你已经确定错误和取消应该是彼此相同的颜色，警告和评论应该是彼此相同的颜色。要使用的实际颜色与其他样式属性分开定义，如果需要更新颜色，则允许更改单个值。

我给出的警告是，你的风格定义分为两个地方，所以有人可能会更新主要的一个使用不同的颜色，然后花费很长时间在他们意识到为什么之前挠头没有效果 - 即因为第二个定义会覆盖它。

@Bob和Tom Ritter提到的服务器端方法也值得考虑，但与我建议的方法一样，容易受到缓存问题的影响。

Answer 8

是的 - 它叫做jQuery。使用JavaScript和一个好的JavaScript库（jQuery很棒）并以这种方式操作你需要的东西。

Answer 9

如果您不想或无法访问服务器端脚本，一种解决方法是在客户端上使用Javascript。只需使用document.write（）即可。唯一的问题是换行......

<script type="text/javascript">
<!--
var sColor = "#f0000";
var myCSS = ".red {" +
             "    color: " + sColor+
              "}" +
             ".error { " +
                  color: " + sColor +
             "}";

document.write(myCSS);
-->
</script>

写作或阅读（恕我直言）并不太费劲，维护起来相当简单...... 就个人而言，我更喜欢服务器端语言。通过这种方式，您可以完全控制正在发生的事情。或者至少多一点。 ; - ）

有没有办法在CSS中引用值作为“变量”？

9 个答案: