设为首页 加入收藏

TOP

你需要知道的CSS-in-JS
2017-12-06 17:36:04 】 浏览:29
Tags:需要 知道 CSS-in-JS

什么是CSS-in-JS?直接在.css文件里写CSS(CSS-in-CSS)不是挺好的吗,为什么还需要CSS-in-JS?


说到这里,不得不提到组件化。因为有了组件化概念,就不再需要维护一大堆杂乱的样式。CSS-in-JS在组件层面(而不是文档层面)对CSS进行了抽象。在项目中维护一个巨大的样式文件夹实在是一件让人感到头疼的事情,很多人不禁感叹,是否还有其他更好的办法?不用说,CSS-in-JS在目前看来就是一个最佳解决方案。


当然,要继续使用CSS-in-CSS还是转向CSS-in-JS完全取决于开发者自己,最关键的是选择合适的工具来改进开发工作流,在提升生产力的同时也让开发变得更有趣。


什么是CSS-in-JS


需要注意的是,内联样式和CSS-in-JS是完全不一样的!


内联样式


在浏览器里,样式属性会被附加到DOM节点上:


CSS-in-JS


在浏览器里,样式类会被附加到DOM节点上:


可以看出,CSS-in-JS会附加整个<style>标签的内容,而内联样式只会把属性附加到DOM节点上。


这有什么实际意义?


并不是所有的CSS特性在java script里都有与之对应的事件处理器,很多伪类选择器(如:disabled、:before、:nth-child)是不受支持的,当然也不支持在html和body标签上应用样式。


而CSS-in-JS可以发挥CSS所有的特性,因为它会生成实际的CSS,这也就可以使用任意的选择器。一些包(如jss、styled-components)甚至支持嵌套!


使用CSS-in-JS有什么好处?


CSS-in-JS的不足


但从总体上看,优势还是远远盖过它的缺点。


最为流行的几个CSS-in-JS框架


CSS-in-JS


Styled Components


JSS-React


glamorous


Radium


Aphrodite


Stylotron


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇ajax访问WebService跨域问题 下一篇为什么原生应用开发者需要关注Flu..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

最新文章

热门文章

C 语言

C++基础

windows编程基础

linux编程基础

C/C++面试题目