谈谈PostCSS

什么是CSS

css，是一种样式脚本，好像和编程语言有着一定的距离，我们可以将之理解为一种描述方法。这似乎导致css被轻视了。不过，css近几年来正在经历着一次巨变——CSS Module。

我记得js的井喷期应该可以说是node带来的，它带来了Module的概念，使得JS可以被工程化开发项目

CSS预处理器的介绍

目前，在工程化开发中，使用最多的应该就是Less、Sass和Stylus。

首先，还是介绍一下它们吧。它们有个统一的名字——css预处理器。何为CSS预处理器？应该就是一种可以将你根据它的规则写出来的格式转成css的东西(还是讲的通俗一点)。它们的出现可以说是恰逢其时，解决了css的一些缺憾：

• 语法不够强大，不能够嵌套书写，不利于模块化开发
• 没有变量和逻辑上的复用机制，导致在css的属性值中只能使用字面量形式，以及不断重复书写重复的样式，导致难以维护。

面对以上问题，css预处理器给出了非常可行的解决方案：

1.变量：就像其他编程语言一样，免于多处修改。

• Sass：使用「$」对变量进行声明，变量名和变量值使用冒号进行分割
• Less：使用「@」对变量进行声明
• Stylus：stylus中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有『等号』。但需要注意的是，如果用“@”符号来声明变量，Stylus会进行编译，但不会赋值给变量。就是说，Stylus不要使用『@』声明变量。Stylus 调用变量的方法和Less、Sass完全相同。

2.作用域：有了变量，就必须得有作用域进行管理。就像js一样，它会从局部作用域开始往上查找变量。

• Sass：它的方式是三者中最差的，不存在全局变量的概念
• Less：它的方式和js比较相似，逐级往上查找变量
• Stylus：它的方式和Less比较相似，但是它和Sass一样更倾向于指令式查找

3.嵌套：对于css来说，有嵌套的写法无疑是完美的，更像是父子层级之间明确关系

• 三者在这处的处理都是一样的，使用「&」表示父元素

有了这些方案，会使得我们可以在保证DPY、可维护性、灵活性的前提下，编写css样式。

回到话题中，之所以会出现像预处理器这样子的解决方案，归根结底还是css标准发展的滞后性导致的。同时，我们也应该考虑一下，真的只要预处理器就够了吗？

往往在项目过大时，由于缺乏模块的概念，全局变量的问题会持续困扰着你。每次定义选择器时，总是要顾及到其他文件中是否也使用了同样的命名。毕竟项目是团队的，而不是个人的。那是否有方式可以解决这些问题呢？

前人的方法

对于css命名冲突的问题，由来已久，可以说我们前端开发人员，天天在苦思冥想，如何去优雅的解决这些问题。css并未像js一样出现了AMD、CMD和ES6 Module的模块化方案。

那么，回到问题，如何去解决呢？我们的前人也有提出过不同的方案：

1. Object-Oriented CSS
2. BEM
3. SMACSS

方案可以说是层出不穷，不乏有团队内部的解决方案。但是大多数都是一个共同点——为选择器增加前缀。

这可是一个体力活，你可能需要手动的去编写长长的选择器，或许你可以使用预编译的css语言。但是，它们似乎并未解决本质的问题——为何会造成这种缺憾。我们不妨来看看，使用BEM规范写出来的例子：

<!-- 正确的。元素都位于 'search-form' 模块内 -->
<!-- 'search-form' 模块 -->
<form class="search-form">
    <!-- 在 'search-form' 模块内的 'input' 元素 -->
    <input class="search-form__input" />
    <!-- 在 'search-form' 模块内的 'button' 元素 -->
    <button class="search-form__button"></button>
</form>

<!-- 不正确的。元素位于 'search-form' 模块的上下文之外 -->
<!-- 'search-form' 模块 -->
<form class=""search-block>
</form>

<!-- 在 'search-form' 模块内的 'input' 元素 -->
<input class="search-form__input"/>

<!-- 在 'search-form' 模块内的 'button' 元素 -->
<button class="search-form__button"></button>

一种希望

现在的网页开发，讲究的是组件化的思想，因此，急需可行的css Module方式来完成网页组件的开发。自从2015年开始，国外就流行了CSS-in-JS(典型的代表，react的styled-components)，还有一种就是CSS Module。

对于css，大家都知道，它是一门描述类语言，并不存在动态性。那么，要如何去形成module呢。我们可以先来看一个react使用postcss的例子：

//example.css

.article {
    font-size: 14px;
}
.title {
    font-size: 20px;
}

之后，将这些命名打乱：

.zxcvb{
    font-size: 14px;
}
.zxcva{
    font-size: 20px;
}

将之命名对应的内容，放入到JSON文件中去：

{
    "article": "zxcvb",
    "title": "zxcva"
}

之后，在js文件中运用：

import style from 'style.json';

class Example extends Component{
    render() {
        return (
            <div classname={style.article}>
                <div classname={style.title}></div>
            </div>
        )
    }
}

这样子，就描绘出了一副css module的原型。当然，我们不可能每次都需要手动去写这些东西。我们需要自动化的插件帮助我们完成这一个过程。之后，我们应该先来了解一下postCSS。

参考：http://geek.csdn.net/news/detail/230756
https://github.com/laizimo/zimo-article/issues/41