| 文章简介：如果你把OOCSS和Sass结合在一起，你会得到两个优势：CSS模块不臃肿和HTML维持不变。 |
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会让你的样式代码变得臃肿，但相比之下要完美的多。
幸运的是在Sass3.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等：
.media是一个经典的模块，详细介绍可以参阅《CSS制作Facebook的媒体对象》。
事情是这样的，如果你不想在你的HTML中重复使用.media模块结构。特别是因为你已经重复使用了.status和.profile组件结构。这个时候%placeholder就起了很大的作用，这里我们定义一个%media：
%media{ overflow: hidden; &:first-child{ float: left; } &:last-child { overflow: hidden; } }
在.status和.profile组件中使用的结构和.media模块的结构一样。详细结构可以参阅Bootstrap中的Media object结构。
现在不需要在所有元素上重复使用.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; } ... 现在轮到你了
希望能给你一个好的模式主意和如何更好的使用你的CSS组件。
他们应该只做一件事，他们应该做得很好。Harry Roberts提到你应该保持他们的名字模糊和非语义。是让你不得不让他们适合你的内容，这样你就可以使用它们在任何地方。但是你可以创建一个在他们之上的模式，就像我们前面看到的valley示例。
如果我有自己的CSS模式，我非常期待能看看。
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
英文原文：http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/
中文译文：http://www.w3cplus.com/preprocessor/oocss-plus-sass-is-the-best-way-to-css.html
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索sass
， 模块
， media
， 组件
， 类名
， extend
， css类名
， 一个
dom模块
，以便于您获取更多的相关知识。