在Vue工做流中使用CSS Modules

CSS在工程化上的一些问题

关于React的CSS in JS，有一个著名的talk，由Facebook的工程师vjeux带来。

里面最有名的一张slide是这样的：

里面列举了CSS的一些问题。其中，Dead Code Elimination，Minification，和Sharing Constants这些问题咱们已经经过在咱们的工做流中加入SASS和PostCSS这样的CSS预处理器解决了。

然而还有一些问题没有解决，好比全局命名空间。同一个document下的全部CSS的类名，都是在同一个“做用域”下的，所以咱们经常要考虑如何避免命名冲突问题。现有的解决办法主要是靠BEM这样的命名惯例，或者是用多层CSS父子选择器来模拟命名空间。然而这样的办法对工程师有许多的限制。多级选择器有比较高的优先级，不容易维护。

解决全局做用域：Webpack css-loader

Webpack的css-loader首先作出了解决全局做用域的尝试。解决办法就是在写CSS类名时加入:local(...)这样的标记。

好比：

:local(.className) { background: red; }
:local .className { color: green; }
:local(.className .subClass) { color: green; }
:local .className .subClass :global(.global-class-name) { color: blue; }

会被转化为：

._23_aKvs-b8bW2Vg3fwHozO { background: red; }
._23_aKvs-b8bW2Vg3fwHozO { color: green; }
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 { color: green; }
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 .global-class-name { color: blue; }

这里的办法就是把CSS类名转化为hash字符串，这样就能够保证每一个类名都是独一无二的，天然也就不用在乎命名冲突的问题了。只要在类名在当前模块内不会相互冲突就能够了。

CSS Modules

上述的办法，仍是有一些不便。大多数状况下，好比在JavaScript中，变量都默认是局部变量。你想要声明一个全局变量，只能去全局做用域声明，或者把变量挂到local上（非严格模式下，不写var声明的是全局变量这种坑就不说了）。

Webpack的开发者以后将css-loader中的local变成了默认设定，因而CSS Modules这个规范就呼之欲出了。

CSS Modules规范。咱们能够经过css-loader?modules这个参数来开启CSS Modules。

CSS Modules中的类名默认就是local的，若是你想要声明全局类名，能够加上:global(...)这个标记。

Single Responsibility Principle

讲CSS Modules的下一个特性以前。咱们先聊点其余的，咱们知道设计模式中有一条叫作Single Responsibility Principle。

好比咱们有一个button：

.button {
    display:inline-block;
    padding:2em;
    background-color:red;
}

与其把这些属性写在一个class里，咱们能够把它拆分红多个单独的class：

.button {
    display:inline-block;
}
.button--large{
    padding:2em;
}
.button--warnning{
    background-color:red;
}

而后在HTML中组合使用就能够了。

<button class="button button--large button--warnning">

这样的好处是什么呢？咱们的UI中，一个组件每每有不少不一样的状态。若是咱们将每个class写成只专一于一个属性，作好一件事，那就能够用这些class组合成全部咱们想要的不一样状态的组件。相比给每一个状态的组件写一个单独的class，代码要更优雅简洁一些。

好比咱们想要一个small尺寸的普通button，只要加两个class:

.button {
    display:inline-block;
}
.button--small{
    padding:1em;
}
.button--large{
    padding:2em;
}
.button--normal{
    background-color:blue;
}
.button--warnning{
    background-color:red;
}

而后组合就能够了：

<button class="button button--small button--normal">

CSS Classes Composing

要想实现上述的这种组合，可使用SASS的Mixin，但Mixin主要是提供了源代码中的抽象，最后生成的代码，和手写不一样状态class的代码量，是同样的。

CSS Modules提供的Classes Composing则恰好能够知足咱们的需求。

好比咱们想渲染一段文字：

.text{
  font-size: 20px;
  composes: red from "./common/color.css";
}

color.css里是这样的

.red{
    color: red;
}

最后渲染出的class是这样的

<div class="App-text-2AEnE_0 color-red-3ag3h_0"></div>

composes引入的类被做为一个单独的class引入，而不是和text类合在一块儿。

CSS Modules和Vue工做流的整合

Vue-loader在v9.8.0以后加入了对CSS Modules的支持。

咱们只要在.vue文件的<style>处加一个module就行

<style lang="sass" module>
.text{
  font-size: 20px;
  composes: red from "sass!./common/color.scss";
}
</style>

这里有一点要注意，就是composes引入的若是是须要预处理器处理的，要在前面加上预处理器的标记，好比SASS用户就加上sass!。

若是须要对CSS Modules进行一些配置（其实这个是对Webpack的css-loader的配置，因此配置时能够参考css-loader的文档），写在vue-loader的配置的cssModules属性里便可

loader: 'vue',
options: {
    cssModules: {
        localIdentName: '[name]-[local]-[hash:base64:5]',
        camelCase: true
    }
}

vue-loader会自动将一个$style属性注入到对应的Vue实例中。在模板中用class binding语法写就能够了。

<template>
  <div :class="$style.app">
    <div :class="$style.text">
      some text
    </div>
    <main-text></main-text>
  </div>
</template>

$style实际上是一个原class名和处理以后class名的hash，像这样：

{
  app: "App-app-3cl75_0",
  text: "App-text-2AEnE_0 color-red-3ag3h_0"
}

我写一了一个简单的DEMO仓库，能够供参考。

结语

CSS Modules能够解决全局做用域和Class组合两个问题，加上SASS等预处理器，着实让咱们在写CSS时的工程化程度大大提升了。

对于使用Vue的同窗来讲，vue-loader可使CSS Modules能够轻松的整合到已有的工做流中。若是你正在使用Vue，能够试试使用CSS Modules。

Links

• CSS Modules Welcome to the Future

• The case for CSS modules - Mark Dalgleish

• React: CSS in JS by vjeux

博客原文连接