样式组件与SASS(SCSS)或LESS [英] Styled-Components vs SASS (SCSS) or LESS

问题描述

我遇到了一个反应良好的ReactJS Boilerplate，它是由社区推动的. 样式部分将重点放在样式化组件CSS上，但从未停止转而使用常规CSS样式方法.尽管这吸引了我的兴趣，但使Styled-Component CSS脱颖而出的原因以及为什么需要采用它.

I came across a ReactJS Boilerplate which had good reps and is community driven. Styling section emphasized more on styled component CSS but never stopped from switching to conventional CSS styling methodologies. Although this pulled my interests what makes the Styled-Component CSS stand out and why need to adopt it.

我对样式化组件CSS的理解:

My Understanding of Styled component CSS:

1. 组件驱动的思想.现在，您的CSS也是一个组件. -这太酷了！
2. 加载所需的内容，并在需要时添加一些懒惰的CSS
3. 主题提供程序，外观，模块化和动态-其他库也可以实现
4. 组件DOM及其样式的服务器端构造.

1. Component Driven idealogy. Your CSS also is now a component. - This is pretty cool!
2. Load what you need and when you needed, kinda lazy CSS
3. Theme provider, skins, modularity and dynamic - This can be achieved by other libs too
4. Server side construction of your component DOM and its style.

我的问题是:

1. 浏览器经过改进，可以独立于Javascript解析CSS 解析，为什么我们要尝试偏离这一点并适合所有 Javascript?

1. Browsers are evolved to parse CSS separately from Javascript parsing, why are we trying to deviate from this and fit all in Javascript?

样式化组件CSS将其javascript库发送到客户端， 它实际上在运行时解析样式，并在每个组件按需加载时放入<style />标记中.这意味着额外的负载 逻辑最终会助长浏览器的执行周期. 为什么需要这个?

Styled-component CSS ships its javascript library to the client end, which actually parses styles at the runtime and put inside <style /> tag when each component loads on demand. This means extra load and logic eventually contributing to execution cycles on browser. Why need this?

(通过上述问题，我的意思是对于每个加载的组件，都通过style标签/多个样式标签-重新发明CSS解释器来计算，创建和插入相应的CSS)

(By the above question i mean for every component loaded, corresponding CSS is computed, created and inserted in head via style tag / Multiple style tags - Re-inventing CSS interpreters)

是否通过<style />在 head标签会导致浏览器重排/重绘吗?

Does continuous computed style text banging via <style /> in the head tag cause browser reflow/repaint ?

我从中获得什么性能优势?

What are the performance advantages i get from this?

具有附加库/选项，例如 Post-CSS &针对动态类名的 SCSS类名哈希每个人都指出的问题.为什么SC仍然?

With add-on libraries / options like Post-CSS & SCSS classname hashing for dynamic classnames which pretty much solves the problem that everyone states. Why SC still ?

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

一些不错的文章，讨论了修改CSS样式时重绘或DOM重排对浏览器的性能造成的影响.

Some good articles that talks about repaint or DOM re-flow how it is performance expensive for browser when CSS styles are modified.

• 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/zh- US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information

• 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

推荐答案

我已经使用SCSS(SASS)多年了，并且也已经在一些项目中使用了Styled-Components，其中一些大型项目

I've been using SCSS (SASS) for many years now, and also have been using Styled-Components for a few projects, some large.

我俩都爱，并且Styled-Components对我来说感觉就像是向前迈进了一步:

I love both, and Styled-Components feels, for me, like a step forward:

1. 完全样式隔离；当一个团队成员永远无法覆盖另一个团队的样式时，可以防止在团队工作时出现潜在的错误. (除非多个位置共享相同样式的组件)
2. 当类名自动生成时，不再需要手动处理它们.(恕我直言，比类名更容易取名组件)

3. 我发现在 JSX 文件本身中使用 CSS 更容易(反对我多年的判断)

1. Total styling isolation; prevents potential bugs when working in teams, when one team member can never override a style of another. (unless multiple places share the same styled component)
2. Remove the need to manually handle class names as they get auto-generated (name-picking components is somewhat easier IMHO than class names)

3. I've found it easier to work with CSS within the JSX file itself (Opposing my judgment for many years before)

在样式中轻松使用javascript变量(无需使用2套主题变量)

样式化的组件-缺点

1. 每个样式组件都是另一个包装器功能，许多样式化组件意味着更多的功能，这意味着效率较低，因为所有这些代码都需要编译"，依此类推.
2. 最大的缺点:更改样式需要重新打包捆绑软件，并且应用程序的状态可能会重置.

1. Each style component is yet another wrapper function, and many styled-components means more functions, which means less efficient since all that code needs to be "compiled" and so on.
2. Biggest drawback: changes to styles require bundle re-compilation and the app's state might reset.

只能在某些情况下这样查看缺点，而不能查看 一定是全部.

The cons can be only viewed as such on some scenarios but not necessarily all.

---

SCSS/LESS 优点可以被视为与上面列出的缺点相反，但是在使用变量(IMHO)时还具有一些缺点，例如混合和更快的开发.它会变得丑陋"，从而定义了本地选择器变量:

---

SCSS/LESS pros can be viewed as opposite to the cons listed above, while having some more cons such as mixings and faster development when working with variables (IMHO). it can get "ugly" defining a local selector variable:

比较以下简化示例:

.icon{
  $size: '20px';
  width: $size;
  height: $size;
  margin-left: $size/2;
}

Styled-Components本地范围示例:

Styled-Components local scope example:

const Icon = styled.i(props => {
  const size = 20; // easier to use Number instead of String for calculations 
  return `
    width: ${size}px;
    height: ${size}px;
    margin-left: ${size/2}px;
`});

很明显，该变量可以在Icon样式化包装器之外定义，然后在内部使用，但这不会使它孤立，因为样式化组件CSS可能由样式化的子组件组成，看起来更像CSS :

Obviously the variable could have been defined outside of the Icon styled wrapper and then internally used, but that won't make it isolated, because styled-component CSS might be composed of sub-components styled and look more like CSS:

const Header = styled.header`
   > ul{
     ...
   }

   li{
     ...
   }

   img{...}

   navigation{...}
`

并非总是希望将每个单独的HTML元素提取到其自己的样式组件中.它主要是针对在整个应用程序中重复或可能重复的组件完成的.

Not always it is desirable to extract each individual HTML element to its own styled component. it is done mostly for components that are or might be repeated across the app.

关于SASS混合，可以将它们转换为javascript函数，因此这里的SASS没有太大优势.

Regarding SASS mixings, they can be converted to javascript functions, so there's not much advantage to SASS here.

总体而言，使用样式化组件很有趣&容易，但副作用是样式与框架/组件之间的耦合更紧密，并且显然会降低性能(没有任何措施会使您变慢，但仍然如此).

Overall, working with Styled-Components is fun & easy, but has a side-effect of a tighter coupling between the styles and the framework/component and it obviously has some performance penalty (nothing that will actually slow you down, but still).

这篇关于样式组件与SASS(SCSS)或LESS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！