扩展类-CSS/HTML约定

我有一个由js生成的简单表，我想改变一些列和行的属性，比如背景色，静态宽度。我可以直接在CSS文件中扩展行和列类，也可以在html中扩展

CSS方法示例：

HTML:

CSS:

.col，.foo{ 显示：表格行； 高度：20px；}

.foo{背景：红色；宽度：100px；}

html方法示例：

HTML:

CSS:

上校{ 显示：表格行； 高度：20px；}

.foo{背景：红色；宽度：100px；}

---

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

也许我在这里遗漏了一些东西，但你会问第二种方法是好的，而第一种是坏的，那么哪种方法更好？FWIW，我同意你的看法，第二个更好。我刚才提到第二个更好，可以动态更改元素。我的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>

<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>