樣式組件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，它真的值得閱讀深入瞭解這個問題。