问题标签 [oocss]

我刚刚发现了这个关于“面向对象的 CSS”概念的有趣演示。这似乎是一个好主意，但演示文稿很短，并没有提供很多示例。

我的问题：

• 这个概念是否相关？
• OOCSS 有什么好处？
• 你能给我提供“面向对象的CSS”的复杂例子吗？

也许，你认为这个概念无关紧要

• 为什么？
• 您改用什么样的工作流程（和规则）？

似乎 Web 开发领域出现了一个新的流行语：面向对象的 CSS。

从表面上看，这让我觉得这只是将最佳实践包装在一个朗朗上口的口号中。我理解并完全尊重运动背后的意图，但还有更多吗？

有没有人有任何进一步的见解可以使这种方法与众不同，因为它更可信，或者我应该把它作为一个提醒，以确保我正确地继承和级联我的类？

编辑：由于 Kobi 对这个StackOverflow Question的精彩评论，我修改了以下问题：

有没有人尝试过 Nicole Sullivan 的面向对象的 CSS框架或他们自己的一个? 如果是这样，有什么优点/缺点？

是否有使用该框架的生产站点面向对象的 CSS?

我对使用 Nicole Sullivan 的面向对象的 CSS哲学/编码方法/其他的好处感到很满意。特别是，我热衷于在我目前正在构建的站点中使用诸如“媒体块”之类的原则。

然而，它捆绑了一个液体式网格系统，我们的设计师目前正在构建一个严格的960 网格宽度系统。960 网格系统使用固定的 12 或 16 列布局，每个布局由 40 或 60 个像素组成。OOCSS 将布局分成 1/2、1/3、1/4 或 1/5 部分的流体分区。

960.gs 具有固有的“装订线”边距，每列 10 像素。OOCSS 在列之间没有边距，因为它们可以是任何宽度，而是在内容元素之间提供边距，以便将内容和容器分开。

将这两个框架中最好的一个混合并匹配到我们公司的 CSS 样板文件中是不是一个坏主意？OOCSS 网格框架的流动性是否使其不适合刚性 960 页面宽度？我们也在使用 HTML5 样板。

我问这个是因为我已经发现，当尝试将某些框架与 OOCSS（例如 SASS）合并时，两种方法可以相互正交，最好选择一个并坚持使用它 - 但这可能并不总是就是这样。

我正在尝试将OOCSS框架加载到我的新 Rails 3.1 应用程序中。到目前为止，我已将项目克隆到 /vendor/assists/stysheets/oocss，并尝试从 /app/assists/stylesheets/application.css 中拉入项目

但是，这不能正常工作，因为编译的 css 文件只包含应该加载其他文件的两行。

关于如何解决这个问题的任何想法？

更新： 我通过以正确的顺序手动加载 CSS 文件做了一个肮脏的解决方法。

应用程序/资产/样式表/application.css

供应商/资产/样式表/oocss.css.scss

此致。阿斯比约恩·莫雷尔

我计划为站点使用网格系统，但我希望能够有选择地打破网格。例如，这意味着将OOCSS size1of2转换为size1of1)。理想情况下，html 看起来像这样：

然后我会有类似以下css的东西：

有谁知道用 OOCSS 或其他网格系统来做到这一点的方法？我正在寻找这种级别的控制，而不是更简单的响应式网格。

我看了这个关于面向对象 css 的演示文稿，但我认为我要么没有正确理解它，要么不理解使用 OO CSS 的好处：

示例 HTML：

示例 CSS：

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

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

关键是，您正在 HTML 中定义样式组，但我了解到您应该在 HTML 中创建“逻辑”组（例如class="nav-item"/ class="btn submit-btn"），并且 CSS 完全应用样式并从“样式”定义哪些元素属于一起“观点（例如.nav-item, .submit-btn { background: red; }）。

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

所以我正在使用 OOCSS 媒体模块，我在里面放了一个链接，链接的最后一行被切断了。

为了向不了解该框架的任何人解释，解释起来很简单：想象一个带有溢出的元素：隐藏，以及该元素内的链接。就这样。

如果我在此元素内放置一个带有溢出的链接：隐藏，链接的最后一个文本装饰行将由于溢出而被切断：隐藏。不必求助于填充和边距（并希望浮动）是否可以补偿最后一行被切断？Chrome 似乎做到了这一点，但不确定。

我正在阅读Nicole Sullivan关于面向对象 CSS的理论。简而言之，基本思想是，与其在每次设计网站时都从头开始，不如使用一些已经编写好的基本构建块作为类，然后扩展它们以满足我们的需求。（“扩展”包括向 HTML 添加更具体/覆盖的类，因为 CSS 类不可能相互继承规则......希望在 CSS4 中？:) OOCSS 原则的灵感来自于你不需要每次需要查找双数的正弦时都重新编写Java Math 类。代码已经（由某人）编写，为什么不使用它呢？

虽然我认为这是一个很棒的抽象形式的提案，但从适用的角度来看，我很难理解它。[阅读下面我的具体问题，但我一直在寻找阅读材料，所以请随时停下来并评论一些指向 OOCSS 资源的更多链接，例如好处和批评等]

这是我的样式表：

现在第一个选择器用于任何标题，具有共同的属性，例如font-family,letter-spacing等。然后每个“子类”（不是真正的子类）都有特定的区别，例如color, font-style,font-weight等。事实上，这些“子类”是在后面写的 .heading在样式表中表示如果它们中的任何一个包含具有不相等值的相等属性，则该属性.heading将被“子类”中的属性覆盖。为了得到我的标题 1，我会写：

事实上，我可以为任何元素设置样式，例如span, with class="heading alpha"，但这确实是一个h1元素。

【当然，我想说

但我们还没有到那个时候。]

我的问题是，如果heading alphas 通常是左对齐的，我该怎么做才能使这个实例居中？Nicole 会说我应该导入她的样式表并使用她的.txtC {text-align:center;}规则，所以我的代码将变为：

但我认为基本上与 CSS 规则和类进行一对一的对应有点过分。如果我使用这种方法，那么我就不需要编写任何自己的样式表，而只需将一堆小类（“legos”）添加到我的 HTML 代码中，使其变得庞大且不可读。想象一下：

specialParagraph 编写一个类（或paragraph-special其他类）然后在 CSS 中分配所有这些规则不是更有意义吗？不需要乐高积木？就我而言，我不能只添加.alpha {text-align: center;}到我的联系人页面的顶部吗？或者甚至是在线的？

第二个div，整个动画需要 400 毫秒：切换需要 200 毫秒button-hover，然后切换需要 200 毫秒button-rounded-hover。如何同时执行这些切换？

笔记：

• 我正在使用 OOCSS，所以button-roundedextendsbutton和button-rounded-hoverextends button-hover。我不想定义button-rounded-hover几乎完全一样button-hover，因为那不会很干燥（不要重复自己）所以这就是为什么我使用两个类和第二个悬停调用div。
• 这两个动作都需要 200 毫秒。我不想让它们中的任何一个都为 0（瞬时）。