New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css modules的几种技术方案 #15

Open
zhouwenbin opened this Issue Dec 25, 2015 · 9 comments

Comments

Projects
None yet
3 participants
@zhouwenbin
Owner

zhouwenbin commented Dec 25, 2015

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

react

react就不多说了,搜一下基本都是react的demo,官方有几个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-loadercss-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

This comment has been minimized.

yutingzhao1991 commented Dec 27, 2015

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

@zhouwenbin

This comment has been minimized.

Owner

zhouwenbin commented Dec 27, 2015

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

@yutingzhao1991

This comment has been minimized.

yutingzhao1991 commented Dec 27, 2015

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

@zhouwenbin

This comment has been minimized.

Owner

zhouwenbin commented Dec 28, 2015

@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

This comment has been minimized.

yutingzhao1991 commented Dec 28, 2015

@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

This comment has been minimized.

Owner

zhouwenbin commented Dec 28, 2015

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

@zhouwenbin

This comment has been minimized.

Owner

zhouwenbin commented Dec 28, 2015

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

@yutingzhao1991

This comment has been minimized.

yutingzhao1991 commented Dec 28, 2015

@mishe

This comment has been minimized.

mishe commented Apr 25, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment