听说过CSS in JS

一种解决css问题想法的集合，而不是一个指定的库。从CSS in JS的字面意思可以看出，它是将css样式写在JavaScript文件中，而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、tree-shaking。还解决了css中的一些问题，譬如：更方便解决基于状态的样式，更容易追溯依赖关系，生成唯一的选择器来锁定作用域。尽管CSS in JS不是一个很新的技术，但国内的普及程度并不高。由于Vue和Angular都有属于他们自己的一套定义样式的方案，React本身也没有管用户怎样定义组件的样式，所以CSS in JS在React社区的热度比较高。

目前为止实现CSS in JS的第三方库有很多:点击这里。像JSS、styled-components等。在这里我们就不展开赘述了(相关链接已放在下方)，这篇文章的重点是JS in CSS??。

JS in CSS又是什么

在上面我们提到CSS in JS就是把CSS写在JavaScript中，那么JS in CSS我们可以推断出就是可以在CSS中使用JavaScript脚本，如下所示。可以在CSS中编写Paint API的功能。还可以访问：ctx，geom。甚至我们还可以编写自己的在线demo点击这里

Houdini 解决了什么问题

CSS 与 JS的标准制定流程对比

在如今的Web开发中，JavaScript几乎占据了项目代码的大部分。我们可以在项目开发中使用ES 2020、ES2021、甚至提案中的新特性(如:Decorator)，即使浏览器尚未支持，也可以编写Polyfill或使用Babel之类的工具进行转译，让我们可以将最新的特性应用到生产环境中(如下图所示)。

CSS就不同了，除了制定CSS标准规范所需的时间外，各家浏览器的版本、实战进度差异更是旷日持久(如下图所示)，最多利用PostCSS、Sass等工具來帮我们转译出浏览器能接受的CSS。开发者们能操作的就是通过JS去控制DOM与CSSOM来影响页面的变化，但是对于接下來的Layout、Paint与Composite就几乎没有控制权了。为了解决上述问题，为了让CSS的魔力不在受到浏览器的限制，Houdini就此诞生。文中提到JavaScript中进入提案中的特性我们可以编写Polyfill，只需要很短的时间就可以讲新特性投入到生产环境中。这时，脑海中闪现出的第一个想法就是CSS Polyfill，只要CSS的Polyfill 足够强大，CSS或许也能有JavaScript一样的发展速度，令人可悲的是编写CSS Polyfill异常的困难，并且大多数情况下无法在不破坏性能的情况下进行。这是因为JavaScript是一门动态脚本语言。它带来了极强的扩展性，正是因为这样，我们可以很轻松使用JavaScript做出JavaScript的Polyfill。但是CSS不是动态的，在某些场景下，我们可以在编译时将一种形式的CSS的转换成另一种(如PostCSS)。如果你的Polyfill依赖于DOM结构或者某一个元素的布局、定位等，那么我们的Polyfill就无法编译时执

（编辑：南通站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!