Question

在CSS2中，即使在即将推出的CSS3中，我找不到一些完全自然且节省时间的东西 - 从其他样式而不是HTML中应用CSS样式。

例如：

.awesome-image {
  border: 1px #000 solid;
  margin: 2px;
}

.super-awesome-image {
  .alwesome-image; // or something like that - this is similar to a function call in a functional language
  padding: 2px; 
}

通常，人们无法访问生成的HTML，因此修改CSS是唯一的选择。

这种继承支持将使生活变得更加容易，因为我们能够将CSS规则视为“函数”并重用代码而不是复制代码。

或者我错过了什么，CSS确实支持这个（我以前从未见过它？）或计划支持它？请赐教。

修改：考虑另一个显示声明.awesome-image, .super-awesome-image {common rules}不优雅的示例：

.border5 {
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px
}

我宁愿不把所有想要在同一个定义中拥有边界半径的类堆积起来。唉，这就是没有功能支持需要做的事情（我曾多次提到只能访问CSS文件，而不是HTML本身）。

Answer 1

在CSS中，实现如下：

.super-awesome-image, .awesome-image {
  border: 1px #000 solid;
  margin: 2px;
}

.super-awesome-image {
  padding: 2px; 
}

样式可以同时应用于多个类，这样可以轻松继承。

关于CSS是否应该被赋予函数式编程技术或层继承，存在很多争论，但这种类继承的风格可能仍然存在。

编辑：如果你可以使用php生成样式，那么这种继承应该是非常可行的。看看这些脚本（主要处理CSS变量，但可能会做更多）：

Answer 2

这会使递归成为可能（这意味着解析器需要能够从中恢复）
多个规则集可以使用相同的选择器，哪一个适用？或者他们都会吗？

您可以通过以下方式实现目标：

<img … class="awesome-image super-awesome-image">

或

.awesome-image,
.super-awesome-image {
  border: 1px #000 solid;
  margin: 2px;
}

.super-awesome-image {
  padding: 2px; 
}

Answer 3

通过Cascade和继承，它确实支持您的建议。这些是CSS要理解的重要部分，但它们有时候有点呃，特殊......

Answer 4

我认为你提到的问题是有效的，但是在网络程序员与网页设计师完全分开的情况下，它将责任放在初始项目管理上，以确保他们都能做到他们想要做的事情。分离函数和样式显然是一个很好的哲学，但是在2之间必须存在某种联系，并且通过指定外部CSS文件来实现。这就是为什么仔细定义Id和Class的重要因素，并且总是考虑到变化的范围，即永远不要让你的CSS过于笼统，并且总是在HTML中为元素定义ID和Class，即使你现在还没有设置样式。在迂腐和小心之间行走是一条很好的路线，但是那时候想到6个月/ 1年/ 5年的时间总是如此;）

这一直是我个人的做法。

Answer 5

我认为LESS或SASS中的“mixins”就是这么做的。

至于为什么CSS本身不这样做，我不知道。首先，我想知道为什么CSS没有给我一个理智的方式来垂直对齐我的内容，或者缩小容器（使用浮动），或者覆盖溢出：隐藏剪裁所选元素，或者做相对于相对边缘的绝对定位，或......以及许多其他事物。

但你的想法听起来不错。

有没有理由CSS不支持在样式中应用样式？

5 个答案: