2010-01-19 49 views
2

在CSS2,甚至在即将到来的CSS3,我无法找到的东西,是完全自然的和节省时间 - 从其他样式中应用CSS样式,而不是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本身访问)。

+2

你可能想看看“.LESS”为.NET或‘少’的回报率在箱体框架您正在使用这些技术方面的工作。他们启用提到的行为。 – 2010-01-19 10:51:17

+0

至于你的编辑,它不是一个单一的边界半径声明和选择器中的大量类,但有一个单一类选择器并将它应用到每个需要这些样式的元素。因此每个元素有多个类,而不是每个选择器。 – 2010-01-19 11:41:26

+0

是的,它会很棒。但是,为什么要等待css本身改进才能使用预处理器?对于像这样的mixins来说,较少是很好的,你可以在rails之外使用它 - 你需要的只是ruby。 – ozan 2010-01-19 11:47:50

回答

4
  • 它将使递归可能的(这将意味着解析器需要能够恢复fr OM吧)
  • 多规则集可以使用相同的选择,所以哪一个会申请?还是会全部?

你可以达到你想要什么:

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

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

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

这绝对是我们必须诉诸的东西,但如果您考虑定义类似.border5 {border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px} 。我宁愿不把每一个想要在同一个定义中具有边界半径的班级堆积起来。唉,这是需要无功能的支持,做什么(我提到了很多次这里只有CSS文件,而不是HTML本身访问)。 – 2010-01-19 10:37:45

+0

至于你的其他评论,我无法想象它会太难支持检测递归循环 - 大多数其他语言能够做到这一点)。这些规则将按照他们看到的顺序进行应用,这是对我有意义的。 – 2010-01-19 10:44:57

5

在CSS中,这如下实现:

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

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

样式可以一次施加到多个类,其允许容易继承。

已经有很多的争论,以CSS是否应给予函数式编程技术或层继承,但这种风格类继承的可能依然存在。

编辑: 如果你可以用PHP生成的风格,这样的继承应该是相当可行的。 看看这些脚本(这主要是处理CSS变数,但可以做更多):

  1. http://www.shauninman.com/archive/2005/08/05/css_variables
  2. http://www.joesapt.net/2005/09/03/08.46.34
  3. http://interfacelab.com/variables-in-css-via-php/
  4. http://www.conditional-css.com/
1

它种不支持你所建议,通过Cascade和继承。这些是CSS要理解的重要部分,但他们有时是有点,呃,特质...

+0

+1。 “(在一个有大量基数的数字系统中)给出了具体情况。” - http://www.w3.org/TR/CSS2/cascade.html – 2010-01-26 02:08:12

1

我认为你提到的问题是有效的,但在web程序员是完全独立于网络设计师,它把责任放在最初的项目管理上,以确保他们做到他们的意图。将函数和样式分开显然是一种很好的理念,但是通过指定外部CSS文件可以实现2和之间的某种连接。这就是为什么认真定义Id和Class的重要性,并始终考虑某个变化的范围,即不要让CSS过于笼统,并且始终在HTML中为元素定义ID和Class,即使您现在不是样式化元素。这是一条很好的路线,虽然在迂腐和小心之间走,但后来试图想到6个月/ 1年/ 5年前总是会;)

这一直是我自己的个人方法。

0

我觉得“混入”在LESSSASS这样做。

至于为什么CSS本身并没有做到这一点,我不知道。首先,我想知道为什么CSS没有给我一种理智的方式来垂直对齐我的内容,或者缩小容器(使用浮点数),或者重写溢出:为所选元素隐藏裁剪或执行与相对边缘相关的绝对定位,或...以及许多其他事物。

虽然你的想法听起来不错。