title: Styled-Components vs SASS (SCSS) or LESS
body: <p>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.</p>
  
  <p><strong>My Understanding of <a href="https://www.styled-components.com/" rel="noreferrer">Styled component CSS</a>:</strong></p>
  
  <ol>
  <li>Component Driven idealogy. Your CSS also is now a component. - <strong>This is pretty cool!</strong></li>
  <li>Load what you need and when you needed, kinda lazy CSS</li>
  <li>Theme provider, skins, modularity and dynamic - This can be achieved by other libs too</li>
  <li>Server side construction of your component DOM and its style.</li>
  </ol>
  
  <p><strong>My questions are:</strong></p>
  
  <ol>
  <li><p>Browsers are evolved to parse CSS separately from Javascript
  parsing, why are we trying to deviate from this and fit all in
  Javascript?</p></li>
  <li><p>Styled-component CSS ships its javascript library to the client end,
  which actually parses styles at the runtime and put inside <code>&lt;style
  /&gt;</code> tag when each component loads on demand. This means extra load
  and logic eventually contributing to execution cycles on browser.
  Why need this?</p>
  
  <p><em>(By the above question i mean for every component loaded, corresponding CSS is computed, created and inserted in head  via <code>style</code> tag / Multiple style tags - Re-inventing CSS interpreters)</em></p></li>
  <li><p>Does continuous computed style text banging via <code>&lt;style /&gt;</code> in the
  head tag cause browser reflow/repaint ?</p></li>
  <li><p>What are the performance advantages i get from this?</p></li>
  <li><p>With add-on libraries / options like <a href="https://postcss.org/" rel="noreferrer">Post-CSS</a> &amp; <a href="https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/545" rel="noreferrer">SCSS classname hashing</a> for dynamic classnames which pretty much solves the problem that everyone states. Why SC still ?</p></li>
  </ol>
  
  <p><em>Community, please clear the air for me or correct me if i am wrong.</em> </p>
  
  <hr>
  
  <p>Some good articles that talks about repaint or DOM re-flow how it is performance expensive for browser when CSS styles are modified.</p>
  
  <ul>
  <li><a href="https://developers.google.com/speed/articles/reflow" rel="noreferrer">https://developers.google.com/speed/articles/reflow</a></li>
  <li><a href="http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/" rel="noreferrer">http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/</a></li>
  <li><a href="https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/" rel="noreferrer">https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/</a></li>
  <li><a href="https://www.phpied.com/rendering-repaint-reflowrelayout-restyle/" rel="noreferrer">https://www.phpied.com/rendering-repaint-reflowrelayout-restyle/</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information</a></li>
  </ul>