Functional programming CSS没有'；不支持从样式中应用样式？

在CSS2中，甚至在即将到来的CSS3中，我找不到完全自然和省时的东西——从其他样式中应用CSS样式，而不是从HTML

例如：

.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确实支持这一点（我以前从未见过它？），或者计划支持它？请开导我

<强>编辑：< /强>考虑另一个例子，表明声明<代码>可怕的图像，超级可怕的图像{公共规则}\代码>不优雅：

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

---

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

在CSS中，这是通过以下方式实现的：

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

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

样式可以一次应用于多个类，这允许轻松继承

关于CSS应该采用函数式编程技术还是层继承，已经有很多争论，但是这种类型的类继承可能会保留下来

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

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

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

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

---

它确实支持您的建议，通过和继承。这些是CSS需要理解的基本部分，但它们有时有点，呃，特殊性…

我认为您提到的问题是正确的，但在web程序员与web设计师完全分离的情况下，它将责任放在最初的项目管理上，以确保两者都能完成其本意。很明显，分离功能和样式是一个很好的理念，但是在2和2之间总会有某种联系，这是通过指定外部CSS文件来实现的。这就是为什么仔细定义Id和类很重要，并且总是考虑到一些变化的范围，也就是说，永远不要让CSS过于通用，总是在HTML中为元素定义Id和类，即使您现在没有对它们进行样式设置。在学究和谨慎之间，这是一条很好的界线，但是，试着提前6个月/1年/5年思考总是如此；）

这一直是我个人的做法。

我认为“混入”或正是这样做的

至于CSS本身为什么不这么做，我不知道。首先，我想知道为什么CSS没有给我一个合理的方法来垂直对齐我的内容，或者缩小容器（带有浮动），或者覆盖溢出：为选定元素隐藏剪辑，或者相对于相对边进行绝对定位，或者。。。还有很多其他的事情

---

你的想法听起来不错。

这绝对是我们必须诉诸的东西，但是如果你考虑定义一些东西，它就不优雅了。边界5{边界半径：5px；-MOZ边界半径：5px；-WebKIT边界半径：5px}。我宁愿不要把所有其他想要在同一定义中有边界半径的类都堆起来。唉，如果没有功能支持，这就是需要做的事情（我提到过很多次，只能访问CSS文件而不能访问HTML本身）。至于你的其他评论，我无法想象要支持检测递归循环会太难——大多数其他语言都能做到这一点）。这些规则将按照它们被看到的顺序应用，深度优先-这对我来说是有意义的。如果您正在使用这些技术，您可能想查看.NET的“.less”或RoR的“less”框架。它们支持上述行为。关于编辑，这不是一个在选择器中包含无数类的单一边界半径声明，而是一个单一的类选择器，并将其应用于需要这些样式的每个元素。因此，每个元素有多个类，而不是每个选择器。是的，那太好了。但是，当您可以只使用预处理器时，为什么还要等待css本身的改进呢？Less对于这样的mixin是非常好的，您可以在rails之外使用它-您所需要的只是ruby。+1。“[…]（在基数较大的数字系统中）给出了特定性。”-

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

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