CSS-in-JS的一点理解

最后编辑于 2019年07月30日 开发

CSS-in-JS即Css in Javascript,顾名思义,用JS写CSS,是指用脚本语言Javascript来写CSS的解决方案或第三方库。这些库很多,而且各有自己的特点,不同的库可以解决不同的问题。

要了解CSS-in-JS,就不得不说一下一统三大件的React。原来的三大件HTML、CSS、JavaScript虽然仍在使用,但组件化的React已经成了后起之秀,React使用Javascript来写结构和样式,即HTML和CSS。

HTML、CSS、JavaScript分别负责结构、样式、逻辑,这样清清楚楚的不好吗?好是好,但流水线的生产需要的是互不影响、没有耦合的组件化方式,这也是React大行其道的原因。

CSS-in-JS的众多第三方库,正是瞅准了这个用武之地,可以说是React的左膀右臂。CSS-in-JS是从CSS模型抽象出来的,而且是组件级别(component)的抽象,不是文档级别(document)的抽象。这些CSS-in-JS库除了使用JavaScript语法编写CSS之外,还可以使用native JS的全部语法功能和JS的特性,以及共享组件样式。

不过要想弄清楚CSS-in-JS的原理和细节,没那么容易,首先你得熟悉三大件HTML、CSS、JavaScript,还得了解点React的东西。这些都趟平了,你的前端技术也就非常不错了。

众多的CSS-in-JS库:
https://github.com/cssinjs

https://cssinjs.org/

评论

登录注册后才能评论。