扩展你的CSS

[yisibl]

曾几何时，我们在编写CSS的时候，经常会遇到一些重复的功能，在一次次的复制粘贴中，挥洒着我们码农的液体。

场景一：

在全局的 reset.css 中为标题元素指定了统一的样式。

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

在实际页面中发现，还需要为标题设置颜色，我们不得不再写一遍。

h1, h2, h3, h4, h5, h6 {
    color: #333;
}

场景二：特定的媒体查询可能会在很多地方会重复使用。

@media (min-device-width : 320px) and (max-device-width : 568px) {
  /* iPhone5 横屏和竖屏样式 */
}

这种重复的书写，使 CSS 产生了很多冗余，难以阅读，而且还影响维护，当每次有改动时需要重复改动很多地方，很痛苦而且很容易出错。

现在，规范小王子Tab Atkins 给我们带来了最新的《CSS Extensions》规范。在这份规范中，遇到这样的较长或重复使用的选择器可以指定一个简短、容易理解的名字来代替。

规范的语法是：

@custom-selector = @custom-selector <selector>;

其中， 以两个连字符 U+002D(--) 开头。例如场景一中，所有标题的集合可以取名为 heading，甚至可以把它作为一个伪类:--heading，然后根据规范中的语法应该这样写：

/* 全局 reset.css */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:--heading { 
  font-weight: normal;
}

/* 页面中的 CSS */
:--heading { 
  color: #333;
}

还可以配合其他选择器使用：

/* 排版时希望标题后面的段落没有上边距 */
:--heading + p { 
  margin-top: 0;
}

CSS2.1 的 4.1.3 节中提到：标识符（包括选择器中的元素名，类名和ID名）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码 U+00A1 及以上，再加连字符（-）和下划线（_）；它们不能以 数字，或一个连字符后跟数字为开头。这保证了两个连字符开头的自定义选择器不会被当做其他选择器。

实际上，现在所有的自定义名称都改为了两个连字符(--)。在之前的《CSS Custom Properties for Cascading Variables Module Level 1》规范中，使用 var-来定义一个变量：

:root {
  var-main-color: #06c;
  var-accent-color: #006;
}

#foo h1 {
  color: var(main-color);
}

单从语法上来看，调用变量时与定义的变量名称不统一，这很容易让人困惑。Tab Atkins 在这份邮件中也说明了改变语法的缘由。Firefox 31 已经支持新的语法，改进后的语法是这样的：

:root {
  --main-color: #06c;
  --accent-color: #006;
}

#foo h1 {
  color: var(--main-color);
}

再看看场景二，在Media Queries Level 4 第十一节Custom Media Queries中提到了自定义媒体查询的方法，我们可以这样复用：

@custom-media --iPhone5 (min-device-width : 320px) and (max-device-width : 568px);

@media (--iPhone5) {
  /* iPhone5 横屏和竖屏样式 */
}

@media (--iPhone5) and (orientation: landscape) {
  /* iPhone5 横屏 */
}

@media (min-device-width : 320px) and (max-device-width : 568px) {
  /* iPhone5 横屏和竖屏样式 */
}

怎么样，一切是不是很酷，这就是全部吗？NO~NO，规范中还将扩展：

• 自定义属性(Custom Properties)
• 自定义函数(Custom Functions)
• 自定义选择器组合器(Custom Selector Combinators)
• 自定义 @ 规则(Custom At-Rules)，在Media Queries Level 4规范里面有更详细的描述。

更多请阅读该规范，订阅 www-style 邮件组或者 @前端快爆 微博，参与讨论。

未来，CSS 将会更容易阅读，并且越来越强大。开发者可以直接扩展CSS本身的功能，而不是等待标准为他们定义新的功能。

CSS 难道不是世界上最好的语言吗？

[nicyxiao]

Great！比个赞，感谢一丝大大的分享，都是比较常用而且好用的功能，简化代码，而且与开发者互动，给予其自由发挥的空间。

[woaixiangbao]

maybe

[xfdipzone]

學習。

[imsobear]

除了两个连字符 U+002D(--) 开头这一点看起来比较蛋疼，功能什么的倒是很赞。

[kmvan]

这是css3的变量功能吗？

[zxw5775]

挺好的

[catboy1006]

嗯，试试

[wangweiwei]

其实偶觉着吧，css还是不要这些功能了，不讨论本身这个语法的写法问题，个人觉得CSS和JS应该各司其职，做自己该做的事情，就像曾经的java web与java的模板语言（freemaker，velocity等）一直想做逻辑与呈现分离，如果css加入了逻辑就会将逻辑与呈现耦合在一起，当然上面这些需求是存在的，但可以需求另外的解决途径，比如sass、less等，css自身没有逻辑也就不需要相应的解析器做额外的开销（css的expression这个奇葩的货)，个人认为轻盈、专注才应该是js和css发展方向！

[kmvan]

不同意楼上，css能进行罗辑判断是一种好事情，不然连个calt都要用js，太麻烦

[ldong]

有點意思。

[sandmanman]

我靠我靠我靠！

[whitekyo]

mark一下

[happycloud123]

less