Html 是否有一种方法可以将值引用为；变量“；在CSS中？

我正在尝试为一个内部webapp正确地编写HTML和CSS。在技术上尽可能多地使用HTML标记来定义页面的内容，并且完全独立于需要的布局

显然，这是不可能做到完美的。每次我必须添加一个额外的嵌套div，唯一的目的就是让布局工作，我都会在里面死一点

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

是否有方法将颜色等值指定给名称，然后在CSS属性中引用该名称？

我知道继承在CSS中是如何工作的，我知道实现这一目标的一种方法是在我的很多元素上使用多个类名，然后我可以让

backgroundClean

成为所有对象都使用的样式。但这需要让HTML意识到更多的数据，这些数据只与页面的风格布局有关，而与数据无关，正如我所提到的，我希望避免这些数据

---

附加问题：做这类事情的最佳实践是什么？当HTML+CSS还没有准备好时，我是否愚蠢地试图让它像MVC一样工作？我知道CSS一直朝着这个方向发展，但也许它还没有实现。

为什么是的，有新的方法来实现这一点

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

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

因此，在PHP中，您可以执行以下操作：

styles.php---------------------
.警告{
颜色：；
}
.错误{
颜色：；
}
index.html----------------------

---

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

.warning { color: #f00; }

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

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

无效的用户名。

需要注意的一点是，为类使用颜色名称被认为是不好的做法，例如，您不应该定义一个名为“blue”的类。您应该尝试使用该颜色所代表的名称，以防将来更改它

---

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

目前没有任何浏览器支持。尽管如果你用类似的方式预处理CSS，那么你可以这样做，甚至做更多。SASS几乎从每一个方面改进了CSS。它使编写样式表变得更容易、更有趣。我再也不会回去写普通的CSS了。

我认为实现这一点的最好方法是从服务器端开始。让你的CSS由服务器处理，这样你就可以输出你想要的内容

例如，如果您使用的是C#，那么将使用脚本块引用变量

width: <%= Width %>

宽度：

是--它被称为jQuery。使用JavaScript和一个好的JavaScript库（jQuery非常优秀），并以这种方式处理您需要的内容。

使用普通HTML和CSS是不可能做到这一点的

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

---

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

如果您不想或无法访问服务器端脚本，一种解决方法是在客户端使用JavaScript。 只要使用document.write（）就可以了。唯一的问题是线路断了

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

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

不太容易写或读（IMHO），维护起来也很简单。。。

---

就个人而言，我更喜欢服务器端语言。这样你就能完全控制正在发生的事情。或者至少多一点。；-）

另一种可能的解决方案是为每个样式包含多个定义

.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提到的服务器端方法也值得考虑，但与我建议的方法一样，很容易出现缓存问题。

我刚刚发现了这一点（在StackExchange播客中提到）：

---

是javascript让您可以在CSS中添加变量（和其他功能）。

哦，我没有意识到打开社区wiki会使我没有资格获得代表奖励。：（这总是值得的

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