前端模块化之后,CSS也能向模块一样导入, 之前提倡JS 与CSS分离,现在JS和CSS混合的方式又开始流行了。
CSS与JS分离
CSS Modules
- No more conflicts 没有名称冲突
- No global scope
- Composing from other files
- Composing from global class names
CSS in JSS
JSS
- Theming 利用 ThemeProvider 和 theme 封装组件
- withTheme
- ThemeProvider
Benefits
- Theming support out of the Box.
- Critical CSS extraction.
- Lazy evaluation - sheet is created only when component will mount.
- Auto attach/detach - sheet will be rendered to the DOM when component is about to mount and will be removed when no element needs it.
- A Style Sheet gets shared between all elements.
Styled-component
- 通过props 修改style
- extend 继承
- Theming
- styled-components has full theming support by exporting
- a<ThemeProvider>wrapper component.
- Function themes
- Getting the theme without styled components
styled-component 上提供了个对比 https://github.com/styled-com...
参考文献
https://glenmaddern.com/artic...
https://speakerdeck.com/vjeux...
http://www.alloyteam.com/2017...
https://hackernoon.com/the-co...