css modules的几种技术方案

[zhouwenbin]

css modules是一种非常的好css模块化解决方案，可以确保多人多项目不会样式冲突，下面是我找到的几种结构配套方案，可以根据需要做选择。

react

react就不多说了，搜一下基本都是react的demo，官方有几个demo。

• webpack-demo
• browserify-demo

Underscore templates

css-modules-html-demo使用了Lo-Dash/Underscore templates，亲测可以生成html文件。

/*style/block1.css*/
.element {
  color: red;
}

引入css，就可以用block1.element来调用class了

<% var block1 = require("./styles/block1") %>
<div class="${block1.element}">Block 1 element</div>

生成的结构和样式

<div class="block1-element">Block 1 element</div>

.block1-element {
  color: red;
}
:export {
  element: block1-element;
}

:export为对应的匹配规则，可以在gulpfile.js修改命名规则。

var core = new Core([
  Core.scope({
    generateScopedName: genericNames("[name]-[local]"),
  })
]);

这个方案是不错的方案，很多时候我们的基本骨架还是html。

jade

在官方的issue，有人问道能不能用jade,slim,haml之类的模板引擎。作者给出了如下的代码

doctype html
- styles = require("./styles.css");
html(lang="en")
  body
    h1.global(class=styles.local) CSS Modules & Jade

但是实际上还要style-loader和css-loader?modules

doctype html
- styles = require("!style!css?modules!./styles.css");
html(lang="en")
  body
    h1.global(class=styles.title) CSS Modules & Jade

我写了一个demo，可以下载查看。

angular

这里有一个demo，可以下载查看具体用法。

vue

vue-loader默认用了scoped css，但是没有css modules强大，我重新写了一个css-module-vue-demo

postHTML

posthtml-css-modules

ejs

postcss-modules-example

[yutingzhao1991]

有方案和 vuejs polymer angular 结合使用吗？感觉这个简直就是为 react 量身定做的啊

[zhouwenbin]

@yutingzhao1991 对了，polymer默认用了shady dom，是会对样式做隔离的，用了shadow dom就更不用了。angular这里有一个demo，https://github.com/jonathaningram/angular-cssmodules-example-app/tree/master/src 。vue明天看下

[yutingzhao1991]

@zhouwenbin shalydom确实是支持了样式的隔离 但是如果是要样式的共享复用呢 不过它好像也是可以引入公共的样式的 但是还是想知道能不能用cssmodule

[zhouwenbin]

@yutingzhao1991 https://www.polymer-project.org/1.0/docs/devguide/styling.html 这里有一篇文章讲了样式的隔离和共享，而且polymer本身就支持变量，mixin这些东西，引入都统一在html一个入口，我觉得这种方式比css modules更胜一筹，维护起来会更好维护。http://www.html5rocks.com/zh/tutorials/webcomponents/shadowdom-201/ 这里有一篇讲shadow dom的。

[yutingzhao1991]

@zhouwenbin 之前为了让 polymer组件可以贡献commonJS模块，所以写了一个 polymer-ext 在这里面把polymer的模板和样式都当做模块来require了，刚刚突然发现这样就能够很方便的支持样式的共享，所以刚才更新了一下。like this：

'use strict';

var PolymerExt = require('..')

var t = require('raw!./test.tmpl')
var s = require('raw!./test.css')
var btnStyle = require('raw!./btn.css')

PolymerExt({
  is: 'card-panel',
  template: t,
  stylesheet: [s, btnStyle],  // 这里可以使用多个样式
 .....

[zhouwenbin]

@yutingzhao1991 赞，vue的demo也找到了，使用了Scoped CSS

[zhouwenbin]

@yutingzhao1991 我重写了一个vue的demo，用了css modules，不用scoped css

[yutingzhao1991]

@zhouwenbin 赞

[mishe]

underscore 模板使用 css module的存在问题，还有css的命名方式和平时的规范也有比较大的冲突
详见 mishe/blog#116