{"action":"created","issue":{"url":"https://api.github.com/repos/zhouwenbin/blog/issues/15","labels_url":"https://api.github.com/repos/zhouwenbin/blog/issues/15/labels{/name}","comments_url":"https://api.github.com/repos/zhouwenbin/blog/issues/15/comments","events_url":"https://api.github.com/repos/zhouwenbin/blog/issues/15/events","html_url":"https://github.com/zhouwenbin/blog/issues/15","id":123858029,"number":15,"title":"css modules的几种技术方案","user":{"login":"zhouwenbin","id":1428546,"avatar_url":"https://avatars.githubusercontent.com/u/1428546?v=3","gravatar_id":"","url":"https://api.github.com/users/zhouwenbin","html_url":"https://github.com/zhouwenbin","followers_url":"https://api.github.com/users/zhouwenbin/followers","following_url":"https://api.github.com/users/zhouwenbin/following{/other_user}","gists_url":"https://api.github.com/users/zhouwenbin/gists{/gist_id}","starred_url":"https://api.github.com/users/zhouwenbin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zhouwenbin/subscriptions","organizations_url":"https://api.github.com/users/zhouwenbin/orgs","repos_url":"https://api.github.com/users/zhouwenbin/repos","events_url":"https://api.github.com/users/zhouwenbin/events{/privacy}","received_events_url":"https://api.github.com/users/zhouwenbin/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-12-25T06:39:47Z","updated_at":"2015-12-27T09:11:45Z","closed_at":null,"body":"[css modules](https://github.com/css-modules/css-modules)是一种非常的好css模块化解决方案，可以确保多人多项目不会样式冲突，下面是我找到的几种结构配套方案，可以根据需要做选择。\r\n## react\r\n\r\nreact就不多说了，搜一下基本都是react的demo，官方有几个demo。\r\n\r\n* [webpack-demo](https://github.com/css-modules/webpack-demo)\r\n* [browserify-demo](https://github.com/css-modules/browserify-demo)\r\n\r\n## Underscore templates\r\n\r\n[css-modules-html-demo](https://github.com/sgtpep/css-modules-html-demo)使用了[Lo-Dash/Underscore templates](https://lodash.com/docs#template)，亲测可以生成html文件。\r\n\r\n```css\r\n/*style/block1.css*/\r\n.element {\r\n  color: red;\r\n}\r\n```\r\n引入css，就可以用`block1.element`来调用class了\r\n```html\r\n<% var block1 = require(\"./styles/block1\") %>\r\n<div class=\"${block1.element}\">Block 1 element</div>\r\n```\r\n生成的结构和样式\r\n```html\r\n<div class=\"block1-element\">Block 1 element</div>\r\n```\r\n```css\r\n.block1-element {\r\n  color: red;\r\n}\r\n:export {\r\n  element: block1-element;\r\n}\r\n```\r\n`:export`为对应的匹配规则，可以在`gulpfile.js`修改命名规则。\r\n```js\r\nvar core = new Core([\r\n  Core.scope({\r\n    generateScopedName: genericNames(\"[name]-[local]\"),\r\n  })\r\n]);\r\n```\r\n这个方案是不错的方案，很多时候我们的基本骨架还是html。\r\n## jade\r\n\r\n在官方的[issue](https://github.com/css-modules/css-modules/issues/70)，有人问道能不能用jade,slim,haml之类的模板引擎。作者给出了如下的代码\r\n```jade\r\ndoctype html\r\n- styles = require(\"./styles.css\");\r\nhtml(lang=\"en\")\r\n  body\r\n    h1.global(class=styles.local) CSS Modules & Jade\r\n```\r\n但是实际上还要`style-loader`和`css-loader?modules`\r\n```jade\r\ndoctype html\r\n- styles = require(\"!style!css?modules!./styles.css\");\r\nhtml(lang=\"en\")\r\n  body\r\n    h1.global(class=styles.title) CSS Modules & Jade\r\n```\r\n我写了一个[demo](https://github.com/zhouwenbin/css-modules-jade-demo)，可以下载查看。\r\n\r\n## postHTML\r\n\r\n[postcss-modules](https://github.com/outpunk/postcss-modules)的作者说要写一个[postHTML插件](https://github.com/outpunk/postcss-modules/issues/11)，耐心的等待。"},"comment":{"url":"https://api.github.com/repos/zhouwenbin/blog/issues/comments/167396139","html_url":"https://github.com/zhouwenbin/blog/issues/15#issuecomment-167396139","issue_url":"https://api.github.com/repos/zhouwenbin/blog/issues/15","id":167396139,"user":{"login":"zhouwenbin","id":1428546,"avatar_url":"https://avatars.githubusercontent.com/u/1428546?v=3","gravatar_id":"","url":"https://api.github.com/users/zhouwenbin","html_url":"https://github.com/zhouwenbin","followers_url":"https://api.github.com/users/zhouwenbin/followers","following_url":"https://api.github.com/users/zhouwenbin/following{/other_user}","gists_url":"https://api.github.com/users/zhouwenbin/gists{/gist_id}","starred_url":"https://api.github.com/users/zhouwenbin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zhouwenbin/subscriptions","organizations_url":"https://api.github.com/users/zhouwenbin/orgs","repos_url":"https://api.github.com/users/zhouwenbin/repos","events_url":"https://api.github.com/users/zhouwenbin/events{/privacy}","received_events_url":"https://api.github.com/users/zhouwenbin/received_events","type":"User","site_admin":false},"created_at":"2015-12-27T09:11:45Z","updated_at":"2015-12-27T09:11:45Z","body":"嗯，我研究下再发上来，理论上能和webpack一起用的都可以，其他的可以用postcss module"}}