OOCSS 和 OOSCSS 对比

Question

在这篇文章中我主要想给大家阐述在使用 Sass 来编写 CSS 和 OOCSS 两者之间的差异。在开始之前，我想在大家对定义语义化和演示（视觉）类名之间的差异有所了解。

语义化和演示（视觉）类名

• 演示(Presentational)：这里更趋向于将其称之为视觉类名，就是纯视觉。简单点说，视觉化类名是没有任何意思，就是根据视觉呈现的风格化，将其在HTML元素中声明类名。也就是说根据，视觉的表象，在HTML定义对应的类名，比如 red、blue、mb10 等
• 语义化(Semantic)：根据语义化在HTML中给元素定义类名。简单点说，就是根据功能模块，在HTML中定义类名，比如 .user-registration 或者 .billing-info 等

既然声明类名有这样的方法，我们先不说哪种更好，哪种更不好。先来看看 OOCSS 的原则。

OOCSS 基本原则

先来看看OOCSS基本原则中，认为比较好的方面：

• 强调重用
• 选择器简洁
• 可扩展类
• 强调风格与内容分离
• 强调内容与容器分离

既然有好的一面，当然也不足的地方：

• 大量使用演示类
• 需要在模板中应用演示类
• 样式(CSS)和结构(HTML)藕合太紧
• 如果设计变动，需要更改CSS和HTML
• 创建了数千行 CSS，但有可能这些 CSS 永远不会被使用。比如 Twitter Bootstrap

OOSCSS 的基本原则

首先需要简单的解释一下OOSCSS的概念，其实它就是 OOCSS 的一个变异体，OOCSS 是 Object-Oriented CSS。那么大家也应该可以快速想到,OOSCSS其实就是Object-Oriented SCSS。其中SCSS是Sass的另一种语法版本。

既然 OOCSS 有一些基本原则，那么OOSCSS也避免不了这方面的俗套，来看看OOSCSS具有哪些基本原则:

• 没有CSS，只有Sass
• 通过%placholder来声明视觉对象
• 可以通过mixin创建可重复的CSS
• 语义化的类名在DOM中声明，而视觉化类名在Sass中声明
• 否则不可能使用CSS构建UI结构和框架
• 通过Sass来扩展类，而不是通过DOM来扩展类

可以确认的是，使用OOCSS可以解决其中的一些问题。毕竟在你的库中有一些像.ptn、.pvn、.pan等类名。并且提供一份简单的文档，告诉其他开发者他有这些可选项，告诉他们这些类表示的意思。对于其他开发者而言，他也可以在HTML模板文件中简单、快速的像下面这样用起来：

<!-- HTML -->
<div class="pan">
    ...
</div>

例如，我们需要给表单的label写一个样式。现在这个label有一些简单的样式：font-family、font-size、color和margin。我最初的想法是像下面这样写CSS：

/*CSS*/
.billing-info label {
    font-family: arial;
    font-size: 14px;
    color: #313131;
    margin-bottom: 10px;
}

如果你正在遵循设计规范，并且你没准备采用OOCSS的指南做类似的场景，这些很有意义，但它没有任何的可复用性。那么这些样式你需要复制和粘贴到其他的类名中。因此，有没有更好的方式？OOCSS这样说：

CSS可以像下面这样写:

/*CSS*/
.label-font-family {
    font-family: arial;
}
.larger-font-size {
    font-size: 150%;
}
.text-color {
    color: #313131;
}
.mbm,
.mvm,
.mam {
    margin-bottom: 10px !important;
}

此时，你的HTML模板需要像下面这样来写：

<!-- HTML -->
<fieldset>
    <label for="field" class="arial-font-family larger-font-size text-color mbm">Form Label</label>
</fieldset>

Wow, 太麻烦了。阿，你不想信我？那你看看 Twitter Bootstrap按钮生成器：

<!-- HTML -->
<a rel="nofollow" href="http://www.w3cplus.com/preprocessor/#" class="btn btn-success btn-large">
    <i class="icon-white icon-heart"></i> Bootstrap Button Generator
</a>

现在来说说OOSCSS

可伸缩，面向对象的CSS，绝对是一个很时髦的东东。

我们要讨论的例子是我们可以给HTML模板创建具有语义化的类名和使用Sass创建可复用的CSS对象。

<!-- HTML -->
<fieldset class="filling-info">
    <label for="text-field">
        ...
    </label>
</fieldset>

Sass创建的可复用的CSS对象:

//SCSS
%arial-font-family {
    font-family: arial;
}
%larger-font-size {
    font-size: 150%;
}
%text-color {
    color: #313131;
}
%mbm {
    margin-bottom: 10px !important;
}

.billing-info {
    label {
        @extend %arial-font-family;
        @extend %larger-font-size;
        @extend %text-color;
        @extend %mbm;
    }
}

在这个示例中，使用了Sass的一个新特性%placeholder。它允许开发者创建类似OOCSS中的视觉类名，它可以一直存在那，只有网页中其他的类名中通过@extend来调用，才会产生代码。比如这个示例中的.billing-info label。

使用这个技术，当这些类名在.billing-info选择器扩展后，编译出来的CSS如下：

/*CSS*/
.billing-info label {
    font-family: arial;
}

.billing-info label {
    font-size: 150%;
}

.billing-info label {
    color: #313131;
}

.billing-info label {
    margin-bottom: 10px !important; 
}

让我们来探讨一下这个想法，如果有一个送货页面的label和上面的看起来一起，那么可以使用同样的方式扩展过去

// SCSS
.shiping-info {
    label {
        @extend %arial-font-family;
        @extend %larger-font-size;
        @extend %text-color;
        @extend %mbm;
    }
}

最后编译出来的CSS像下面这样：

/*CSS*/
.billing-info label,
.shiping-info label {
    font-family: arial;
}

.billing-info label,
.shiping-info label {
    font-size: 150%;
}

.billing-info label,
.shiping-info label {
    color: #313131;
}

.billing-info label,
.shiping-info label {
    margin-bottom: 10px !important;
}

当我们想在页面其他部分使用这些OOCSS的%placeholder类会发生什么，像这样吗？

// SCSS
div {
    &:first-line {
        @extend %larger-font-size;
    }
}

input {
    &[type=text] {
        @extend %mbm;
    }
}

最后，我们得到的CSS像这样：

.billing-info label,
.shiping-info label {
    font-family: arial;
}

.billing-info label,
.shiping-info label,
div:first-line {
    font-size: 150%;
}

.billing-info label,
.shiping-info label {
    color: #313131;
}

.billing-info label,
.shiping-info label,
input[type=text] {
    margin-bottom: 10px !important;
}

其实扩展类的写法在CSS中是一直存在的。虽然说 OOCSS 不直接支持这种技术，但可以说 OOSCSS 是可以做到的。

事实开发中，最终还得你自己做出决定是否这样去编写你的CSS。但从我过去12年编写CSS的经验来说，Sass是编写可伸缩，可扩展、可管理的CSS库的最好方法。

出处：https://gist.github.com/blackfalcon/5255648