width: 120px;
height: 120px;
}
.box-border{
border: 1px solid #CCC;
border-radius: 10px;
}
在HTML结构中，我们可以这样使用：
XML/HTML Code复制内容到剪贴板
<div class="box-2 box-border">Lorem ipsum</div>
<div class="box-1 box-border">Lorem ipsum</div>
语义化和维护
你在意没有语义化，而我更关心的是代码的维护。比如说这个示例所示。
纯CSS来定义对象就没有语义化，但这样就存在一些问题:
每次改为样式风格时，都需要修改HTML
没有一种安全的方式来访问DOM元素
对于OOCSS来说，除了维护HTML比较困难之外，其他都是很完美的。我们的CSS很容易扩展，也非常方便用于新的内容中。
因此我们写了部分CSS代码用于在HTML结构中进行扩展。这样的方式真的会变得更好？
Sass的到来
我可以肯定你肯定听过Sass的@extend命令和了解他是如何工作的。因此，要非常感谢选择器的占位符%placeholder，在Sass中可以通过@extend来扩展，如此一来在CSS就是可以创建一些有语义化的类名，也解决了HTML中的存在的问题。
我们必须使用%placeholder来创建对象，通过@extend在类中调用，将其合在一起。这样就可以自己组织代码：
CSS Code复制内容到剪贴板
/* 不好的方式 */
a.twitter {
min-width: 100px;
padding: 1em;
border-radius: 1em;
background: #55acee
color: #fff;
}
span.facebook {
min-width: 100px;
padding: 1em;
border-radius: 1em;
background: #3b5998;
color: #fff;
}
所有的对象都使用@extend和基本对象混合在一起，这样就可以得到一个干净的CSS对象，在Sass中是十分容易的事情，我们也不必要再花时间来修改HTML。
CSS Code复制内容到剪贴板
/* 好的方式 */
%button {
min-width: 100px;
padding: 1em;
border-radius: 1em;
}
%twitter-background {
color: #fff;
background: #55acee;
