写 CSS 最好方法 OOCSS + Sass

Question

OOCSS 非常棒。但在HTML标签中有很多不具语义化的类名也并不可怕。而在 HTML 标签上的类名会改变就是一件很有趣的事情。如果你把 OOCSS 和 Sass 结合在一起，你会得到两个优势：CSS 模块不臃肿和 HTML 维持不变。

OOCSS 指引 HTML 的维护

首先，简单的声明，你可能第二次看到非语义（non-semantic）这个词。事实上是这样的，我并不太关心他介是不是“非语义”，我更在意的是维护。非语义类不能很好的描述一个组件，这意味着他们将会改变。

到目前为止，纯CSS控制模块的唯一方式就是定义语义化类名。然后将这些类名运用在HTML元素上。这是使用OOCSS创建模块的方式，但其中存在很多问题：

• 我不想每次去修改HTML标签，而只想通过CSS来触发。因为我在一家创业公司上班，我没有太多时间来处理这些。
• 甚至很多时候我没办法访问DOM元素，也不能在DOM元素上添加我需要的类。如果在你的页面中使用JavaScript组件添加元素，你是没有办法在这个组件内部添加类名。

除了HTML不可维护之外，有关于OOCSS的其他方面都是完全正确的。在大项目中将模块抽象出来重复使用，唯一方法是CSS进行维护。那么这样我们从中得到什么好处，又有什么坏处呢？

OOSass 来拯救你

OOCSS 和 Sass 结合会让你变得更强大。@extend 在Sass中可以直接让你从另一个选择器中继承样式，而不用像@mixin一样，复制里面的一切样式。如果你使用嵌套或者选择器嵌套，@extend会让你的样式代码变得臃肿，但相比之下要完美的多。

幸运的是在 Sass 3.2 中添加了一个placeholder,除非你扩展了placeholder选择器，不然他是不会生成任何代码。这里有一个placeholders的简单示例：

%separator{
  border-top: 1px solid black;
}
hr{
  @extend %separator;
}
.separator{
  @extend %separator;
}    

编译出来的CSS

hr,
.separator {
    border-top: 1px solid black
}

placeholders不会像@mixin或者@extend扩展类选择器一样产生臃肿的代码。这让placeholders适合CSS创建非语义化的模块。我把这种模块叫做patterns。他们是一小段一小段的样式代码，你可以混合和匹配在你的样式表中。

秀一个真正有用的实例

带来一个OOCSS的黄金案例：.media模块。你可能想把.media模块运用到你的一些组件中：.status，.profile等。
事情是这样的，如果你不想在你的HTML中重复使用.media模块结构。特别是因为你已经重复使用了.status和.profile组件结构。这个时候%placeholder就起了很大的作用，这里我们定义一个%media：

%media{
  overflow: hidden;
  &:first-child{
    float: left;
  }      
  &:last-child {
    overflow: hidden;
  }  
}

在.status和.profile组件中使用的结构和.media模块的结构一样。

现在不需要在所有元素上重复使用.media，你只需要在你想要使用的地方扩展%media：

.status{
  @extend %media;
  //Status-sepecific styles here...
}
.profile{
  @extend %media;
  //Profile-sepecific styles here...
}

这意味着在你的HTML标签中你只需要定义一个具有语义化的类名：.status和.profile，而不需要考虑是添加.media这样的类名，只要你有对应的<article>这样的元素标签，而不需要考虑他们是否存在。

这样变得有灵活性。如果你决定.status不在适合使用.media模块，就直接在Sass中不使用@extend开启%media。你不需要到HTML标签中删除.media类名。

你可能已经注意到了，我使用了一个微调后的.media模块。就算是你使用JavaSctrip向DOM中插入组件，这个模块同样可以适用。

OOSass使JavaScript组件样式更简单

最大的问题是假设你能完全操控你的DOM和可以为DOM元素添加你想要的类名。但这种情况并不是永远都存在的。当你使用JavaScript组件或者使用别人的代码来渲染，你只能碰的就是最高层的元素组件。

特别在一些使用JavaScript组件来渲染页面或者一些CMS系统，你没有一定的能力为相关的DOM元素添加类名。你会感觉CSS是多么的无耐。

如果你使用DropdownView给你的页面添加了一个.user-dropdown元素，你可以给.user-dropdown添加一个类名.media，但你没有办法这下接元素的.button或者他的.menu-item添加类名，因为你没法控制这个组件内部的DOM元素。

但使用Sass的%placeholders，这将不在是问题：

.dropdown{
    //Normal styles for very dropdown ...
}
.user-dropdown{
    //Extra styles for user-specific dropdowns …
    .menu-item{
        @extend %media;
    }
}

你想要做的事情就是用什么方式让纯CSS的类名能工作：插入组件和摧毁组件的封闭，或者使用其他基于字符串的的类名某个API。但是你可以使用Sass轻松的控制，而不需要直接控制DOM元素。

展示实例

我喜欢阅读别人的CSS模式，所以我想分享一些我自己的。这里有一些我使用的的CSS模式，这些模式都应用在Segment.io中。

Lip

这是一个Apple-style分离器，在一个内容下面创建了一个lip（使用%reversed-lip创建了一个与lip反方向的样式）：

%lip {
    clear:both;
    display:block;
    height: 5px;
    background: url("/public/images/patterns/lip/lip.png") no-repeat;
    background-size: 100% 100%;
}

%reversed-lip {
    @extend %lip;
    background-image: url(/public/images/patterns/lip/reversed-lip.png);
}

Valley

这个是在一个元素的顶部和底部添加了lip，让它看上去是嵌入到周围的区域：

%valley{
    position: relative;
    overflow: hidden;

    &::before,
    &::after{
        content: '';
        position: absolute;
        left: 0;
        right: 0;
    }    
    &::before{
        @extend %lip;
        top: 0;
    }    
    &::after{
        @extend %reversed-lip;
        bottom: 0;
    }    
}        

Plane

是一个非常简单的圆角框：

%plane{
    box-shadow: 0 2px 5px rgba($black, .1);
    border-radius: $border-radius-medium;
}
%white-plane{
    @extend %plane;
    background-color: $white;
}
%off-white-plane{
    @extend %plane;
    background-color: $off-white;
}
...

Seam

常看到一些人将一条黑色和一条白色放在一起，并让它们有一定的透明，我们常把这种效果称为seam:

%seam{
    clear: both;
    display: block;
    height: 0px;
    border-top: 1px solid rgba($black, .12);
    border-bottom: 1px solid rgba($white, .15);
}    

Well

效果类似于valley，这个效果让人看上去有点抑郁，一般都用在<code>块中：

%well{
    box-shadow: inset 0 1px 5px rgba($black, .14);
    border-radius: $border-radius-medium;
}
%off-white-well{
    @extend %well;
    background-color: $off-white;
}
%light-gray-well{
    @extend %well;
    background-color: $light-gray;
}
...