title: Are inline styles considered to be a bad practice?
body: <p>For instance I have this super simple <code>'Heading'</code> component, which is basically just a glorified <code>&lt;h1&gt;</code>:</p>
  <pre><code>import React from 'react';
  
  class Heading extends React.Component {
  
      render () {
  
          const style = {
              'color' : 'red' 
          };
  
          return (
              &lt;h1 className='heading' style={style}&gt;
                  {this.props.title}
              &lt;/h1&gt;
          );
      }
  }
  
  export default Heading;
  </code></pre>
  <p>This renders out to look like this in the DOM:</p>
  <pre><code>&lt;h1 class=&quot;heading&quot; style=&quot;color: red;&quot;&gt;Heading&lt;/h1&gt;
  </code></pre>
  <p>Excellent, looking good. And if I have a bunch of those components on the page it'll look like this:</p>
  <pre><code>&lt;h1 class=&quot;heading&quot; style=&quot;color: red;&quot;&gt;Heading&lt;/h1&gt;
  &lt;h1 class=&quot;heading&quot; style=&quot;color: red;&quot;&gt;Heading&lt;/h1&gt;
  &lt;h1 class=&quot;heading&quot; style=&quot;color: red;&quot;&gt;Heading&lt;/h1&gt;
  &lt;h1 class=&quot;heading&quot; style=&quot;color: red;&quot;&gt;Heading&lt;/h1&gt;
  </code></pre>
  <p>Notice how the style attribute is repeated over and over there? So this is my question, is this a bad thing? Does it matter? From what I can tell is that it's not a bad thing at all because you're not downloading this html page pre-rendered from the server. So all those repeated styles aren't computing to a bigger file size.</p>
  <p>And if this is true... Then why <em>wouldn't</em> you use inline styling?</p>
  <p><strong>Disclaimer</strong>: I understand stackoverflow is a bit &quot;closed&quot; to questions like this. If you're deeply offended that I asked this here (who do I think I am!?) Kindly point me to a site and community where I can :)</p>