实施例

Question

我刚刚找到了this interesting presentation关于“面向对象的CSS”的概念。这似乎是一个好主意，但演示文稿相当简短，并没有提供很多例子。

我的问题：

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

也许，你认为这个概念并不重要

为什么？
您使用的是哪种工作流程（和规则）？

Answer 1

是否相关？

我是这么认为的，它基本上是为CSS作者使用的方法命名，与创建styleguides的方式基本相同。它有用吗？是。是否容易继承其他人的OOCSS工作？可能不是。

OOCSS有哪些好处？

抽象某个组件的样式属性总是有利于整个站点的样式一致性。假设您想要更改组件的边框样式以获得全新的外观：您通常会更改有关边框样式主样式的几行。

一个例子

我创建了一个关于我们网络应用中所有“小部件”的UI开发者样式指南（或样式词汇表）。每个小部件将根据其预期内容进行分类。每个小部件可以具有任意数量的预定义框样式，背景样式。每个小部件也可以根据放置在哪个父元素的不同来布置其内容。

这相当于代码：<div class="free bg_neutral form_search">用于每个包装器/容器，每个类分别为：“Box Style，Background Style，Content”。然后，处理HTML / Views的开发人员可以轻松切换出任何预定义的样式，并用更合适的样式替换它们。例如将bg_neutral替换为bg_gradient_fff_eee代替渐变背景。

我认为我们保存了无数的CSS代码，因为我们可以在几个核心“小部件”上使用可互换的属性，而不是定义每个“小部件”的每个独特的化身。它还使跨浏览器修复变得更加容易，因为您可以独立处理“小部件”样式。（大多数浏览器错误与框尺寸和位置/布局有关）

在我看来，在设计和实现网站的前端时，更多UI用户需要通过StyleGuide / Style Vocab练习。在站点上使用的可视元素中创建一致性。一致的视觉效果通常会产生一致且高效的CSS！

希望有所帮助， ND

Answer 2

我认为这个概念没有任何好处，因为CSS的当前定义已经基于面向对象，选择器，通配符等有点面向对象。

他们提到将容器与内容分开，这对我来说就是CSS已经完成的了。

Answer 3

与问题相关的演示文稿由雅虎的性能工程师Nicole Sullivan提供。

Yahoo Developer Network网站上有video of the original presentation，github上有repository for the OOCSS project。

Answer 4

幻灯片放映是一套很好的标准和指南。我一直使用它们，在我的设计中寻找模式和重复，然后将它们分解为组件。

导航，面板，网格，中继器，卡等。这些都是我为每个站点设计的常用组件。

我还为Utilities，Page和Content提供了单独的CSS文件。 Utilities存储像我的clearfix或margin normalizer，Page存储整体网站布局（页眉，页脚，主页），内容是一整套规则，用于标题，段落，链接，列表等。网站范围内。

Answer 5

“面向对象”在这里有点用词不当，至少在严格的意义上是这样。但他提出的设计指南是合理而有用的，并且在某种程度上可以减轻CSS标准的“破碎性”。

他指出的问题 - 脆弱的设计，大文件，低可维护性等等，都是标准的结果，这种标准过于宽松，过于临时性，并且基于不再有效的原始设计目标。他正确地指出，成功的设计需要明确的头脑和大量的纪律。

Answer 6

听起来像流行语跟我说话。正如John Rasch所说的那样 - CSS已经分类了。

Answer 7

在相关的说明中，您可能需要查看compass样式表框架。另请参阅primer。虽然我还没有机会在项目中使用它，但它看起来很有趣。

Answer 8

我会爱在css中看到某种形式的继承。全面吹嘘？这可能是过度杀伤，但继承会以规模的方式缩小我的样式表的大小。

Answer 9

好处是能够扩展对象并保持代码干燥和可读。那些反对它的人通常要么a）讨厌这个名字，要么b）从不使用它。我们这样说吧......

实施例

每个网站都有不同类型的导航。您可以在侧边栏中的标题正文中进行导航。也许，你甚至在页面上有标签或面包屑？您甚至可能需要一个页面上的富文本编辑器工具栏。这就是.nav抽象将发挥作用的地方。

.nav
{
    margin-bottom:              24px;

    margin-left:                0;

    padding-left:               0;

    list-style:                 none;
}

.nav--right
{
    float:                      right;
}

.nav--stack .nav__item
{
    float:                      none;
}

.nav__item
{
    float:                      left;
}

.nav__item--active .nav__link
{
    font-weight:                bold;
}

.nav__link
{
    display:                    block;

    color:                      inherit;

    text-decoration:            none;
}

.nav__link:hover
{
    text-decoration:            underline;
}

这与我的所有控件中显示的代码相同。现在，我所要做的就是为它创建一些皮肤。

侧边栏皮肤

.side .nav__item
{
    border-bottom:              1px dotted rgba(0, 0, 0, 0.2);
}

.side .nav__link
{
    padding:                    12px 0;
}

标签皮肤

.tabs
{
    border-bottom:              1px solid #aaa;
}

.tabs .nav__item
{
    margin-right:               8px;
}

.tabs .nav__item--active .nav__link
{
    margin-top:                 -2px;

    position:                   relative;

    border-bottom:              1px solid #fff;

    bottom:                     -1px;

    color:                      #000;
}

主菜单皮肤

.menu .nav__item--active .nav__link
{
    border-radius:              2px;

    color:                      #fff;

    background-color:           #007bc3;
}

.menu .nav__link
{
    padding:                    12px 8px;
}

将它放在一起

我正在做的就是为class属性编写对象的名称和外观的名称。这包括两者的属性。

<ul class="side nav nav--stack">

      <li class="nav__item nav__item--active">

        <a class="nav__link" href="#">

          Item

        </a>

      </li>

 <li class="nav__item nav__item--active">

        <a class="nav__link" href="#">

          Item

        </a>

      </li>

 <li class="nav__item nav__item--active">

        <a class="nav__link" href="#">

          Item

        </a>

      </li>

不要惊慌地看到.nav_ 项目和.nav _link。大多数人使用li和a，但我想让它与标签无关。

Answer 10

正如Tor Haugen指出的那样，术语“面向对象的CSS”＃34;用词不当。

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

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

对于OOCSS的真实世界示例，请查看Cascade Framework，Scally和InuitCSS等框架。

进一步阅读：

面向对象的CSS：它应该重要吗？

10 个答案: