4

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

显然不可能完美地做到这一点。每次我不得不添加一个额外的嵌套 div 以使布局工作的唯一目的时，我都会在里面死去一点。

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

有没有办法为名称分配诸如颜色之类的值，然后在 CSS 属性中引用该名称？

我知道继承在 CSS 中是如何工作的，并且我知道实现这一目标的一种方法是在我的许多元素上使用多个类名，然后我就可以backgroundClean成为各种对象使用的样式。但这需要让 HTML 了解更多仅与页面风格布局相关的数据，而不是与我提到的数据相关的数据，正如我所提到的，我想避免这种情况。

额外问题：做这种事情的最佳实践是什么？当 HTML+CSS 还没有准备好时，我试图让 HTML+CSS 表现得像 MVC 一样愚蠢吗？我知道这是 CSS 一直在发展的方向，但也许还没有。

4

9 回答 9

9

为什么是的，有新引入的css 变量可以做到这一点！

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

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

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

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

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

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

<link rel="stylesheet" src="styles.php" />
于 2009-02-19T18:13:27.317 回答
5

没有任何当前的浏览器支持。虽然如果你用SASS之类的东西预处理你的 CSS，那么你就可以做到这一点，甚至更多。SASS 改进 CSS 几乎是每一种方式。它使编写样式表变得更加容易和有趣。我永远不会回去写 vanilla CSS。

于 2009-02-19T18:15:41.933 回答
1

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

.warning { color: #f00; }

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

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

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

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

于 2009-02-19T18:14:12.700 回答
1

I"ve just discovered this (mentioned on the StackExchange Podcast): http://lesscss.org/

It's javascript that lets you put variables (and other capabilities) in your CSS.

于 2011-08-29T04:52:20.970 回答
0

我认为您完成此任务的最佳方法是从服务器端。让服务器处理你的 CSS，这样你就可以输出你想要的任何东西。

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

width: <%= Width %>
于 2009-02-19T18:16:13.290 回答
0

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

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

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

于 2009-02-19T18:23:28.407 回答
0

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

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

这里的关键是你已经决定 error 和 cancelled 应该是彼此相同的颜色，而 warning 和 comment 应该是彼此相同的颜色。要使用的实际颜色与其他样式属性分开定义，如果需要颜色更新，则允许更改单个值。

我要给出的警告是，您的样式定义分为两个地方，因此有人可能会更新主要的样式以使用不同的颜色，然后花很长时间挠头才意识到为什么它没有效果- 即因为第二个定义覆盖它。

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

于 2009-06-18T09:28:37.557 回答
-1

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

于 2009-02-19T18:19:17.330 回答
-1

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

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

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

写或读（恕我直言）不太繁琐，维护起来也很简单......就个人而言，我更喜欢服务器端语言。这样你就可以完全控制正在发生的事情。或者至少多一点。;-)

于 2009-02-19T18:36:16.150 回答