你需要知道的CSS-in-JS
极客时间编辑部
讲述:丁婵大小:5.03M时长:02:45
近日,因德雷克·拉森(Indrek Lasn)发表文章称,开发者们都需要了解 CSS-in-JS。对此,有开发者感到疑惑,到底什么是 CSS-in-JS?直接在.css 文件里写 CSS(CSS-in-CSS)并不糟糕,为什么还需要 CSS-in-JS 呢?
对此,因德雷克解释道,回答这个问题之前,必须先谈到组件化的话题。因为有了组件化的概念,开发者们就不再需要维护一大堆杂乱的样式。CSS-in-JS 在组件层面而不是文档层面,对 CSS 进行了抽象。因德雷克表示,在项目中维护一个巨大的样式文件夹实在是一件让人感到头疼的事情,而在目前看来,CSS-in-JS 就是针对此问题的最佳解决方案。
另外,值得注意的是,并不是所有的 CSS 特性在 JavaScript 里都有与之对应的事件处理器,很多伪类选择器是不受支持的,而 CSS-in-JS 可以发挥 CSS 所有的特性,因为它会生成实际的 CSS,这样就可以使用任意的选择器了。
当然,要继续使用 CSS-in-CSS 还是转向 CSS-in-JS 完全取决于开发者自己,最关键的是选择合适的工具来改进开发工作流,在提升生产力的同时也让开发变得更有趣。
那么,使用 CSS-in-JS 具体有哪些好处呢?
面向组件,开发者不再需要维护一大堆乱糟糟的样式,它在组件层面对 CSS 进行了抽象。
利用了 JavaScript 生态系统的强大能力来增强 CSS。
“真正的规则隔离”,如果没有显式定义,CSS 的属性就会自动继承自其父元素,而使用 jss-isolate 插件就可以防止 JSS 规则继承属性。
选择器作用域,CSS 只有一个全局的命名空间,所以是无法避免出现选择器冲突的,而 JSS 在将 JSON 编译成 CSS 时会自动生成唯一的类名。
浏览器引擎前缀,CSS 规则自动添加了浏览器引擎前缀。
代码共享,在 JS 和 CSS 之间共享常量和函数。
只生成页面会用到的样式。
移除无效代码。
CSS 单元测试。
不过,CSS-in-JS 并非没有不足之处,如学习曲线难度大、会产生新的依赖、新手难以立即将其应用到项目中、挑战了现有标准等,但从总体上看,优势还是远远盖过它的缺点。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
该免费文章来自《极客视点》,如需阅读全部文章,
请先领取课程
请先领取课程
免费领取
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论