Are inline styles considered to be a bad practice?
<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>