blog
blog copied to clipboard
yisibl
扩展你的CSS
曾几何时，我们在编写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>;
其中，:--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 难道不是世界上最好的语言吗？
其实偶觉着吧，css还是不要这些功能了，不讨论本身这个语法的写法问题，个人觉得CSS和JS应该各司其职，做自己该做的事情，就像曾经的java web与java的模板语言（freemaker，velocity等）一直想做逻辑与呈现分离，如果css加入了逻辑就会将逻辑与呈现耦合在一起，当然上面这些需求是存在的，但可以需求另外的解决途径，比如sass、less等，css自身没有逻辑也就不需要相应的解析器做额外的开销（css的expression这个奇葩的货)，个人认为轻盈、专注才应该是js和css发展方向！
