OOCSS是一种重复的可视模式，可以抽象为HTML、CSS和可能的JavaScript的独立片段。然后可以在整个站点中重用该对象。
[官方示例](http://oocss.org/index.html) ,可以在index.html下载源码。
特点
1. 分离结构和皮肤
这意味着要将**重复的视觉功能（如背景和边框样式）定义为单独的“外观”**，可以与各种对象混合和匹配，从而在没有太多代码的情况下实现大量的视觉变化。请参见[模块对象](https://github.com/stubbornella/oocss/wiki/Module)及其[外观](https://github.com/stubbornella/oocss/wiki/Module-Skins)。
分离结构和外观还意味着使用类来命名对象及其组件，而不仅仅依赖于HTML的语义。例如，媒体对象以class=“media”命名，其组件以class=“img”（图像/视频组件）和class=“bd”（正文/文本组件）命名。
通过在样式表中引用这些类（例如，而不是直接为<img>元素设置样式），HTML可以很灵活。例如，如果一个新的媒体元素要在未来几年内起飞（例如，\<svg\>），它可以集成到HTML中，而不必接触CSS。
2. 分离容器和内容
所谓的容器即包裹对象的元素，比如一个div，我们经常会命名为wrap、container、body等。那么如何才算是分离容器与内容呢？很简单，一句话，内容在哪都可用。也就是说不应该出现这样的情况：
~~~
.container .product {
...
}
~~~
这样干的结果就是复用性大大降低，因为只能在这个容器内使用它了。但这并不代表我们应该将所需的样式全部一股脑的扔进单独的class中，对于差异化应该单独放在一个class中，这才是OOCSS的精髓。
以下几点是创建OOCSS的关键部分
1. 创建一个组件库
2. 独立的容器和内容，并且避免样式来依赖位置
3. 独立的结构和样式
4. 使用类名为扩展基本对象
5. 坚持以语义类来命名类名
> [Object OrientedCSS](https://github.com/stubbornella/oocss/wiki)
> [An Introduction To Object Oriented CSS (OOCSS)](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)
> [如何写好CSS？（OOCSS\\DRY\\SMACSS）](https://www.cnblogs.com/xiaominwu/p/4348039.html)
> [OOCSS——概念篇](https://www.w3cplus.com/css/oocss-concept)
> [OOCSS——核心篇](https://www.w3cplus.com/css/oocss-core)
