扩展类 - CSS / HTML约定

Question

我有js生成的简单表格，我希望静态更改列和行的某些属性，如背景颜色，宽度。我可以直接在CSS文件中扩展row和col类，或者在html中进行扩展。

示例（CSS方法）：

HTML：

<div class="table">
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="foo"></div>
                <div class="col"></div>
            </div>
        </div>
    </div>
</div>

CSS：

  

...

     

.col，.foo {       显示：table-row;       身高：20px; }

     

.foo {background：red;宽度：100px; }

     

...

示例（html方法）：

HTML：

<div class="table">
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col foo"></div>
                <div class="col"></div>
            </div>
        </div>
    </div>
</div>

CSS：

  

...

     

.col {       显示：table-row;       身高：20px; }

     

.foo {background：red;宽度：100px; }

     

...

在我看来，第二种方法对于动态改变元素而不是静态元素更方便。然而，第一个模糊了html的结构，这可能会导致理解javascript的一些问题。我的问题是在这种情况下哪种方法会更好？