代码之家 › 专栏 › 技术社区 › Artem Russakovskii

CSS不支持从样式内部应用样式是否有原因?

css3 functional-programming css

2

Artem Russakovskii · 技术社区 · 14 年前

在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本身)。

5 回复 | 直到 10 年前

1

4

Quentin 14 年前

它将使递归成为可能(这意味着解析器需要能够从中恢复)
多个规则集可以使用同一个选择器,那么将应用哪个选择器?或者他们都会?

你可以通过以下方式实现你想要的:

<img â¦ class="awesome-image super-awesome-image">

或

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

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

2

5

SamGoody 14 年前

在CSS中,实现如下:

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

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

样式可以一次应用于多个类,这样可以方便地继承。

关于CSS是否应该被赋予函数式编程技术或层继承,一直存在很多争论,但这种类型的类继承可能会继续存在。

编辑: 如果您可以用PHP生成样式,那么这样的继承应该是非常可行的。查看这些脚本(它们主要处理CSS变量,但可能做得更多):

3

1

David Heggie 14 年前

它确实支持你的建议,通过 Cascade 以及继承权。这些是需要理解的CSS的基本部分,但有时它们有点,呃,特殊性…

4

1

Alex 14 年前

我认为您提到的问题是有效的,但是在那些Web程序员完全独立于Web设计器的情况下,它将责任放在初始项目管理上,以确保两者都按其原意行事。将功能和样式分开显然是一种很好的理念,但是在2和通过指定外部CSS文件来实现的之间总是必须有某种链接。这就是为什么在一定范围内仔细定义ID和类的重要原因,也就是说,不要让您的CSS太笼统,也不要在HTML中为元素定义ID和类,即使您现在不为它们设计样式。在学究和谨慎之间走一条很好的路,但是在未来的6个月/1年/5年中,总是会这样想;)

这一直是我个人的方法。

5

0

Rolf 10 年前

我想“混入” LESS 或 SASS 就这么做。

至于为什么CSS本身不这样做,我不知道。首先,我想知道为什么CSS没有给我一个明智的方法来垂直对齐我的内容,或缩小适合一个容器(带浮动),或覆盖溢出:为选定的元素隐藏剪辑,或做相对边缘的绝对定位,或…还有很多其他的事情。

不过,你的想法听起来不错。