样式组件CSS是比SASS还是LESS更好的选择？

Question

我遇到了ReactJS Boilerplate，它有很好的代表并且是社区驱动的。 样式部分更强调样式化组件CSS，但从未停止切换到传统的CSS样式化方法。尽管这引起了我对Styled-Component CSS脱颖而出的兴趣，为什么需要采用它。

我的Styled component CSS理解：

1. 组件驱动期清初。你的CSS现在也是一个组件。 - 这很酷！
2. 加载你需要什么，当你需要的，有点懒CSS
3. 主题提供商，皮肤，模块化和动态 - 这可以通过其他库太
4. 服务器端建设的组成部分DOM和它的样式来实现。

我的问题是：

1. 浏览器的演变分别从Javascript 解析解析CSS，为什么我们试图从这个偏离，适合所有 的Javascript？

2. 样式化成分CSS船舶的JavaScript库的客户端， 这实际上是在运行时解析风格，并把里面<style />标签时按需每个组件的负荷。这意味着额外的负载 和逻辑最终有助于浏览器的执行周期。 为什么需要这个？

   （通过上述的问题，我的意思是用于装载相应的CSS被计算并创建并经由style标签/多样式标记插入头的每个组件 - 重新发明了CSS口译）

3. 是否连续计算样式通过<style />在 head标签中导致浏览器重排/重绘？

4. 我从中得到的性能优势是什么？

社区，请为我清除空气或纠正我，如果我错了。

---

一些好的文章，谈到重绘或DOM再流是怎么回事性能昂贵浏览器时CSS样式修改。

• https://developers.google.com/speed/articles/reflow
• http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
• https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/
• https://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
• https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information

Answer 1

浏览器正在演变为从Javascript解析分别解析CSS，为什么我们试图从偏离这和适合所有的Javascript？

当您将Javascript和HTML（即JSX）以及CSS（JSS或其他）混合使用时，您将使组件成为一个适合单个文件的实体模块。您不需要将样式保留在单独的文件中。因为JSX是返回“HTML”（不是真的）的原始数据的纯函数，与CSS-in-JS是纯函数或返回“CSS”的原始数据相同的方式， （也不是真的）。从这一点来看，我认为它值得reading about JSX和also about CSS-in-JS。

样式化成分CSS船舶的JavaScript库的客户端，这实际上解析在运行时的风格，并把里面<style />标签时按需每个组件的负荷。这意味着额外的负载和逻辑最终有助于浏览器的执行周期。

不仅在运行时。因为CSS-in-JSS只是返回CSS的数据的函数，所以可以在任何平台上使用它。以节点为例，添加SSR，并且您有style元素传递给浏览器的响应主体，因此解析就像在获取CSS的原始情况中会发生一样。

为什么需要这个？

因为它像React或Redux一样方便开发，就像jQuery一样，就像任何其他lib一样，它的网络负载和浏览器性能成本都很高。

你拿一个图书馆，因为它解决了一个问题。如果看起来没有问题，为什么要使用库，对吧？

连续计算样式文本在头标记中通过<style />撞击是否会导致浏览器重排/重绘？

还有so many things that force reflow。

浏览器很聪明。如果样式没有改变，他们甚至不会尝试重画。这并不意味着他们不计算差异，这会花费CPU时间。

有一个很好的介绍the scope and complexity of style (re)calculations，它真的值得阅读深入了解这个问题。