面向对象的CSS

Question

我看过这个关于面向对象的css的演示文稿,但我想我要么不理解它,要么不理解使用OO 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的好方法.

Answer 1

CSS不是面向对象的.我的建议是忘记你所读到的关于"面向对象的CSS"的内容,而是专注于你试图解决的CSS问题.如果他们想让CSS更容易编写,阅读和维护,或者为了获得更多功能(比如CSS变量),我认为Less或Sass会更好地满足您的需求.

使用像"面向对象的CSS"所建议的CSS只会导致可怕的,非语义的和无意义的CSS,从长远来看,它不比"普通"CSS更容易维护.双方id并class应具备语义和有意义的名字,所以使用一个框架,允许你写的语义CSS(即描述的意图,而不是呈现)是我的愚见更好.