Creating editable styles JS or inline style
<p>I'm creating a wordpress theme for a large organization and a thought dawned on me that I have not considered before. Is it better to use JS to show on the fly client created styles, or inline css? I was using inline styles but realized that it may be just as simple to use a dataset loop in js.  </p>

<p>Here's an example.. I've created a metabox on the edit post page that allows the user to change the colors of the post wrapper, title text, and paragraph text on the blog page per post. </p>

<p>So is it better to do... </p>

<pre><code>&lt;div class='postWrapper' style='&lt;?php echo get_post_meta(...); ?&gt; &lt;/div&gt;
</code></pre>

<p>on the blog page Or </p>

<p><code>&lt;div class='postWrapper' data-backgroundColor='#987' ?&gt; &lt;/div&gt;</code></p>

<p>and a loop within my app.js that looks something like... </p>

<pre><code>var postWrapper = document.getElementsByClassName('postWrappter');
    for(i=0; postWrapper.length &gt; i; i++){
    postWrapper[i].style.backgroundColor = postWrapper[i].dataset.backgroundColor;
}
</code></pre>

<p>I realize that in terms of how much typing is involved, the inline styles seems easier and more efficient. But it's always been drilled in my head that you should avoid inline styles at all costs! </p>

<p>Would love some input on this! Thanks!</p>