在项目中思考如何抽像模块（类似js中对象的创建；把样式抽象化），如何重用样式（继承）。
什么是它
01.是一种方法
02.面向对象的
为什么要
希望写出：
01.更重用的
02.更维护的
03.更可扩展
的代码
如何实现
一些原则
01.把容器和内容分离：实现内容插入到哪个容器都行。--可重用性
02.把基础和扩展分离：实现基础被哪个样式修饰都行。--可扩展性
一些建议
01.是否大型网站：大型网站的开发，可重用性的组件相对来说要多，建议要使用OOCSS规范。
02.能否够巧妙用：如果不能够巧妙的使用，创建组件对你说就是创建一堆没用的东西，会成为烂摊子。
03.要写说明文档：给每个组件文件写一份说明文档，有助于调用和维护。
简单示例
发现问题
01.一个博客中，有一个"meta date(作者发布时间相关信息)"将在一个页面的3个不同地方出现。
02.三个"meta date"虽然位置在不同地方，并且样式风格不一样。
03.但他们都有一个共同点，就是HTML结构可以是一样的。
一些想法
01.把容器和内容分离：
写一个html基础内容，写一些html容器内容。
02.把基础和扩展分离：
写一个基础样式,写一些容器样式。
03.把容器和内容连结：
04.把基础和扩展连结：
方式01：通过"基础类名 扩展类名"，从而达到基础对象的可重用性。
方式02：通过新增一个由他们组合的类名，从而达到基础对象的可重用性。
一些步骤
建基础类
.metadate{/*...*/}
建扩展类
.postMetaDate{/*...*/}
.commentMetaDate{/*...*/}
.useInfoMetaDate{/*...*/}
使用类名：通过对基础对象扩展类名，从而达到基础对象的可重用性。
class = "metadata postMetaDate"
class = "metadata commentMetaDate"
class = "metadata useInfoMetaDate"
修补样式：
01.用了哪些特性
02.基础的有哪些
03.某具体由哪些
用的特性
01.字体大小
02.元素边距
03.文字颜色
具体样式
基础样式：font-size:1.2em; margin:10px 0;
扩展样式：
00.某篇文章：font-size:1em; margin:0 0 10px 0; color:#063070;
01.某个评论：color:#063070;
02.用户信息：color:#fff;
一些思考
关于可重用的实现
01.借助类名：通过对基础对象扩展类名，从而达到基础对象的可重用性。
02.预处理器：借助预处理的变量、混合、包含、扩展、继承特性。
关于可扩展的实现
01.借助类名：通过对基础对象扩展类名，从而达到基础对象的可重用性。
02.预处理器：借助预处理的嵌套、混合、扩展、继承特性。
关于类名命名规范
参考文献
w3cplus:oocss-concept
w3cplus:an-introduction-to-object-oriented-css-oocss
smashingmagazine:an-introduction-to-object-oriented-css-oocss
网友评论