前端模块化之后,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...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。