Question

我看了presentation about object oriented 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都应该有semantic and meaningful names，因此使用允许您编写语义CSS（描述意图而不是演示文稿）的框架在我看来更好。

Answer 2

这更像是一个“名字掉落”，这是一个实际的方法。您展示的代码通常是贬义的“enterprise css”，没有任何借口。

更重要的是，在元素上有多个类实际上会损害性能。

我建议您在制作CSS时遵守Mozilla's guidelines，这也适用于其他浏览器。并为IE6,7和8制作专用的.css文件。

Answer 3

这个想法是你在许多元素上重用相同的css类。这既节省了写css和维护CSS。因此，您不必定义.create-button .cancel-button .create-and-new按钮，而只需定义.button来定义填充，size，background，{{1} }，color，line-height，font-size和font-family。一些非常小的类用于不同的按钮样式，例如更改font-weight或color

我经常使用的正确的oocss项目可以在这里找到：https://github.com/stubbornella/oocss/wiki

但是，你应该看看更少，它结合了在多个元素上使用适当的类名重用相同的css属性的简单方法。

Answer 4

“面向对象的CSS”实际上只是一种如何充分利用CSS的设计模式，与Jonathan Snooks调用SMACSS的方法基本相同。

无论您将其称为OOCSS还是SMACSS，该方法的关键是您创建通用UI元素，如nav abstraction。然后，通过向元素和/或容器元素添加额外的类，可以使用更具体的功能来增强这些UI元素。或者，您也可以使用元素的ID或语义类添加自己的自定义CSS规则。

进一步阅读：

面向对象的CSS

4 个答案: