html – 面向对象的CSS

示例HTML：

<div class="border-1 bg-2 color-1 font-1">
</div>

示例CSS：

/* borders */
.border-1 { border: 1px solid red; }

/* backgrounds: */
.bg-2 { background: yellow; }

/* other sections */

我看到能够快速更改多个元素的样式的优势,例如,能够切换配色方案将非常有用.

但实际上,您在HTML中定义样式/外观,或者至少是其中的一部分.当然,它比使用style属性更好,因为您仍然可以为一组组交换样式.

关键是,您要在HTML中定义样式组,但我了解到您应该在HTML中创建“逻辑”组(例如class =“nav-item”/ class =“btn submit-btn”)和CSS完全应用了样式,并从“风格”的角度定义了哪些元素属于一起(例如.nav-item,.submit-btn {background：red;}).

也许我完全误解了这个概念.但是,我仍然不知道构建CSS的好方法.