[翻译]CSS wish list
原文地址：css wish list
CSS 已经很好了,但是我们可以让它变得更好一些,我们的目标是:
- 将CSS打造成一个更好的declaractive language（声明式语言）
- 提取出代码里面重复的部分
- 不会使得CSS成为a programming language (一种程式化语言)
在易用性上达到以下目标:
- 对于初学者来说，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
