Jekyll liquid variables as inline CSS values

Question

Is passing liquid variables as inline styles commonly frowned upon? Here is an example of my markup:

 <div class="span-8-12">
    <h6> {{page.role}}</h6>
    <h1 style="color:{{ page.accentColor }};"> {{page.title}} </h1>
 </div> 
 <article class="intro">
    <p style="color:{{ page.txtColor }};"> {{ page.summary }} </p>
 </article>

I am setting h1 and p colors using the liquid variables in my posts. I know I could pass the variable directly to a CSS file, but then'd i'd have to write even more markup and CSS. Is this method valid or is there a better method on systematically changing values of color based off page variables?

Answer 1

Better would be to set a class, rather than directly setting the styles inline.

<div class=" {{ page.typeOfClass  }}">
    <div class="span-8-12">
        <h6> {{page.role}}</h6>
        <h1 > {{page.title}} </h1>
     </div> 
     <article class="intro">
        <p > {{ page.summary }} </p>
     </article>
</div>

Then in your whatever.css set the styles for the different classes you want:

.someClass h1{
    color:blue;
}
.someClass .intro p{
    color:red;
}

for example.