@
banricho #38 是啊,大部分说的都有不同程度混淆概念和维度,
- styled-components 是「定义组件的方式」、是语义化拆分组件的写法形式
- Sass / Less / tailwind (包括 classname 和 @
apply) 都是「编译生成 CSS 的方式」,只是提供的语法不同
- import *.css (包括 module.css) 和 css`...` (及其各种语法糖) 是工程化打包后「注入 CSS 的不同方式」
这三个维度是可以互相组合、也可以单独用其一的,
比如你可以
- 在 styled-components 写法中,直接写 tailwind class 然后编译生成 CSS 被自动注入(或者 no-inject 手动注入)
- 在 styled-components 写法中,直接写 less 的同时在里面写 @
apply tailwind class 然后编译后注入
- 直接写 [.module].(less|sass|css) 文件,import 后写到组件 classname 上,当然同样的,样式文件里可以写 less/sass/css/tailwind 语法(指各类 at-rules)
这里的编译器都是 postcss + 各种东西
至于直接写 style={{...}} 的,那是真的 js 写 inline-style 不在以上 CSS 范畴内