前端的问题： css modules vs styled components 老铁们选哪个？为什么？

抬个杠，我用 vue 和 angular，都自带 scoped css

说实话 css module 的侵入性比 styled component 要小
但是两个我都不喜欢。我见过的 react 项目都是直接写样式用 css-loader 加载。组件内使用 namespaced classname

都不用，建议了解一下 [tailwindcss]( https://tailwindcss.com/)

写 css 这么多年，接触了 tailwind 才意识到正确的 css 写法是什么

styled jsx 了解一下
https://github.com/zeit/styled-jsx

styled jsx 唯一的缺点在于不支持 preprocessor

css 大体可以分几部分：
1.直接针对 HTML 的。像 reset，或者富文本的样式。
2.grid，gutter，margin-left-5 这种 layout 相关。或是 round-corner，box-shadow-5 这些所谓 atomic design 的样式。他们都跟具体组件没什么关系。
3.强制字号，强制文字颜色，强制隐藏，跟具体组件没什么关系，甚至是专门用来覆盖固有样式的工具类。
4.通用 UI 组件。按钮，对话框之类的。
5.没什么通用性的，具体的 UI。像页面布局之类的。

1，2，3 必须是写在全局的 css 文件里的。因为是全局的，相应的 BEM 之类的命名方法肯定是要用的。
4 写哪都行。但是要注意的是我们写任何 module，除了 close 来隔绝外界，还得 open for extension。有没有 open 的需求，怎么设计 open，看你自己的想法了。
5 没什么通用性，写在 scoped css 里或者 style 里都是比较好的选择。这里仍然可能有复用样式的需求。css 可以用 mixin，style 就是对象，拆出来直接就能复用了。

我想要做一个可以定制的组件怎么办？
看你想暴露哪些接口，提供多大的定制性。css 的接口只有俩：class，css properties。

react 我用 css modules
JS 入侵的写法非常不舒服
楼上那个 tailwind 简直惊艳！

css modules 用 scss 的话似乎很不方便，没法象以前的在主 index.scss 里 include 一些东西然后子文件里可以直接用了

还是建议用 styled components，用 js 管理一切才是最好的

@love 可以由 sass loader 统一引入文件的

@silaike 我用的是官方的 create-react-app，这货自己做不了太灵活的定制

css module 吧，style component 写起来别扭

@AnnatarHe 这个真的很棒诶

@AnnatarHe 这个东西粒度足够细吗？可以通过排列组合实现任意需求？

另外，感觉跟 bootstrap 之类有点像啊

emotion 了解一下，我觉得比 style component 好用

个人项目以前 tachyons
tailwind 出来后就用 tailwind 了

@love #9 原文：“@silaike 我用的是官方的 create-react-app，这货自己做不了太灵活的定制”
======
回复：可以用 react-app-rewired 定制一些 create-react-app 不能修改的 webpack 配置

楼上几个开始推荐 css framework 的都是什么鬼？？？

@AnnatarHe 太大了

看了看 tailwind 感觉跟 tachyons 还是有点像呀。

我个人觉得如果定下来的 css 部分已经足够多了 可以选择用 styled。我觉得其实 styled 修改也是有一点复杂度的。

css module + 1。 第一感觉就不喜欢 style component 那种写法，于是直接用了 css module。不过有机会也会试试 style component，搞得风风火火的，应该是有它的独到之处的。

styled-components 的好处是都在一个文件里面，看起来省事