原文地址:css wish list
CSS 已经很好了,但是我们可以让它变得更好一些,我们的目标是:
在易用性上达到以下目标:
- 对于初学者来说,CSS将会变得更加容易
- 通过减少代码量来提高整体性能
- 增加更多的浏览器警示以增强语言的健壮性
为了达到上面提到的目标,我们的wish list主要体现在下面几个方面:
Variables - make global changes easier(变量)
在项目中, 经常会有一些颜色值或是高度值, 它们会出现在我们样式表的很多地方, 但是靠使用组定义之后会显得很散乱,而如果使用全局变量来对这些特性进行定义,那改变这些规则会变得很容易,同时又不会影响一个规则的集中定义。[译者注]
变量定义的规则如下:
- @variables <var group name> { <var name>: <value> }
例子:

变量调用:
- <var group name>.<var name>
例子:

prototypes - organize code into logical abstractions ( 原型 )
为了把项目代码写的逻辑结构强一些,我们可以使用原型定义来解决问题,通过原型定义,我们可以方便的定义一个模块,同时也可以很方便的对其进行扩展。[译者注]
原型例子:

定义原型 define prototypes:
- @prototype <class name> {property: value;}
例子:

修改原型 modify prototypes

扩展原型 extend prototypes

通过这样的扩展之后 .weatherMod 拥有了.mod的所有属性,包括子节点。
扩展的实现

普通的样式层级顺序依然是被考虑的
原型的封装特性 prototype encapsulation
例子:

.inner属于mod, 但是 leftCol并没有扩展mod, 所有这条规则是无效的,是会被UA忽略的。
MIXINS - combine small bits of repeating code (混合类型)
使用混合类型,可以把重复的代码合并,从而可以减少代码量,并减少维护成本。[译者注]
定义混合类型
- @mixin <class name> { property: value;}

修改混合类型

任何指向.clearfix的选择器都会修改混合类型
使用混合类型
例子:

这样就会把.clearfix的属性值赋值到当前位置
这样达到的效果就是:

为小段重复代码我们可以使用混合类型, 从而在HTML文档里去除非语义化的class命名,比如clearfix 或者是 rounded7px, 让文档变得更加的标准化.
混合类型不是层级化的,混合类型的属性值被调用的时候就相当于他们被定义在当前位置。
Prototype sub-nodes define the relationship between sub-nodes of the same prototype (原型子节点-定义一个原型子节点之间的关系)
原型里面我们通常会有很多子节点,如果能够将子节点之间的关系表达出来,一些将会工作将会变得很简单。[译者注]
但是这是必要的吗? 对于增加的复杂性这有其相应的价值吗?
我发现我自己经常写一些这样的注释
- /* margin top = bottom height - corner height */
子节点例子:

例子来源于open source project 在.mod原型中corner height被定义为10px
子节点属性值计算:

使用这种语法可以定义同一个对象的各子节点之间的关系,规则如下:
- 只能访问当前对象的节点
- 只能访问已定义的值
- 不推荐用于很灵活的布局
成效
如果方法和语法是对的, 我们的代码是会符合我们之前设定的目标的,使用前景是非常广阔的
例子(yahoo)

在父节点上,如果我们把这些关系表示出来,这个设计的可预测性将会被提升。
成效一:简单
这个设计的实现有些难度,但是使用我们之前的原型实现这个设计是非常简单的
- .gonzalo {extends: .mod}
- .gonzalo,
- .gonzalo .innner,
- .gonzalo b{ backgroud-image:url(gonzaloModule.png); }
只需要两条规则就可以实现这个圆角框
成效二:代码很少,这样新手就很容易上手
总结
Wish list 里面我们通过 Variables(变量) 和 Mixins(混合类型) 提取出了代码中的重复部分, 通过Mixins(混合类型) 和 Prototype(原型) 显著减少了代码量, 提高了整体性能, 通过Variables(变量) 和 Prototype(原型) 子节点之间的关系降低维护成本. 并且通过wish list里面这些属性让css变成了一种更好的声明式语言, 变得更加易学。[译者注]
作者相关信息:
http://stubbornella.org
“stubbornella”on the web… twitter,dopplr,slideshare,everywhere…
http://github.com/stubbornella/oocss/
http://groups.google.com/group/object-oriented-css