参考：http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss 作者：Louis Lazaris
oocss是Nicole Sullivan在Web Directions North中第一次提出，它代表了一种快、可维护、基于标准的CSS写法。
全称object-oriented-css,面向对象的CSS。既然是面向对象，那什么是OOCSS中的对象呢？OOCSS中所说的对象是一种可复用的视觉模型。OOCSS讲究复用，并快速高效的书写样式，且在日后便于修改、添加和维护。
OOCSS基本原则
1.结构与样式分离
代码示例：
使用OOCSS前：
#button { width: 200px; height: 50px; padding: 10px; border: 1px solid #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;} #box { width: 400px; overflow: hidden; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;}
使用OOCSS后：
.button { width: 200px; height: 50px;} .box { width: 400px; overflow: hidden;} .skin { border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;}
前一种普通的CSS，用了id选择器，并且所有特性都独立存在每个元素中。后一种使用了OOCSS，通过class选择器，并且把公共的样式提取到一个名为skin的class中，复用到每个元素上。显而易见，代码量减小了，达到了重用的效果，如果需要修改box和button在页面中的表现，也只需要维护skin中的样式代码。代价仅仅多了一个class。
2.容器与内容分离
示例代码：
#sidebar h3 { font-family: Arial, Helvetica, sans-serif; font-size: 2em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;}/* other styles here.... */#footer h3 { font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;}
在这个例子中，后代选择器始终依赖于一个特定的容器（甚至是id选择器），根本无法复用。当我们基于OOCSS建立模块类，确保某些样式不依赖于外部容器，那我们的样式类就能够在任何地方复用。比如：
.h3-base {font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;} #sidebar .h3-base { // 像这样不想多加class的话，外部也来在所难免，看个人斟酌 font-size: 2em;}#footer .h3-base { text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;}
我们将项目中基本的h3的特性剥离出来，放在一个名为h3-base的类里，在不同的情况（#sidebar和#footer）下，覆盖各自特有的特性。来让常用样式得以在任何地方复用。
下面这个例子更加清楚的说明了这一原则：
.header-inside { * width: 980px; height: 260px; padding: 20px; * margin: 0 auto; * position: relative; (使内部有定位的元素，根据这个容器来定位) * overflow: hidden;（创建BFC，块级格式化上下文, 清除浮动）}
如果是在一个宽度为980px，页面内容始终居中的网站中，header-inside中有很多带 * 符号代码的样式完全可以抽出来以备复用（用于宽度980px，居中，绝对独立的容器）。
.globalwidth { //这里主要是外部容器的通用样式 width: 980px; margin: 0 auto; position: relative; overflow: hidden;} .header-inside { //这里可以看做影响内部内容的样式 padding: 20px; height: 260px;} 相信globarwidth这个类名，可以在上面提到的应用场景中充分被复用。只需要加一个globarwidth class就能搞定一个外层容器。
学习进阶文章：
http://www.w3cplus.com/css/facebook-status-message-design-with-css CSS制作Facebook的媒体对象
http://www.w3cplus.com/css/oocss-core OOCSS??核心篇
关于OOCSS个人总结：OOCSS是一种思想概念，重点在于：减少对html的依赖，增加样式的复用性。将样式抽象模块化，增加样式的复用性，它减小了CSS样式表的大小，额外增加了class标记，让html文件更大了。虽然如此，但小小的标记结构的牺牲换来了样式表现性能的提升（样式表是能够被浏览器缓存的），和更高的工作效率，以及能够持续维护的样式模块，也更具有可读性。但是在抽象的过程中，需要对需求，设计有更深层次更全面的理解和抽象，同时也需要设计和需求较为稳定，尽量没有大的需求或设计改动，如果设计不断改动，需求不断变化，那么很多抽象的类将会被破坏，最终容易造成代码混乱不堪。所以在小的项目中有些大材小用。
使用OOCSS的注意事项（可能帮助你快速上手）：
避免后代选择器(如不要使用类似于.sidebar h3):这会产生外部容器的依赖； 避免用id作为样式钩子：id是唯一的，无法复用； 避免在你的样式表中给类名附属一个元素名 除非一些很少的情况，避免使用!important：暴力方法，代码将会难以维护； 使用CSS网格（布局重用必备）
SMACSS
SMACSS中把样式根据逻辑划分为了5个类别：
1.base:
base类似于我们常用的reset，就是设定标签的预设值。在这一部分样式的要求是：不要出现任何的id selector和class selector，但可使用 属性选择器和伪类选择器。
代码示例：
html{ … }, input[type=text]{ … }, a:hover { … }
2.layout:
大区块的位置、布局样式。在这里是使用id selector和class selector。
代码示例：
#header { margin-top: 20px 0; }, .container { margin: 0 auto; width: 960px; }
3.Module:
module即组件样式，需要能在任何地方复用的，自觉和bootstrap中的components非常相似。这里使用class selector和 descendent selector（后代选择器）.
代码示例:
.button { background-color: #foo; border: …; width: …; box-shadow: …; padding: …;} .button a { color: #ddd; } 或者 .button .link { color: #ddd; } (多用class,少用tag)
4.state:
状态，故控制module各个状态下的表现的样式。使用class selector。
.button.hovered { background: …; }.button.actived { background: …; }
5.theme：
主题，也就是项目特有的主题下的样式，主视觉效果，主题的样式去override上面的样式，来达成需要的视觉效果，就类似于皮肤skin。在google material设计中，就用了md-default-theme这样的类名来为各个module添加额外的样式，比如background-color之类的skin，它也支持用户自己配置theme的色彩样式，大爱！
关于SMACSS的个人总结：根据CSS rules自身不同的逻辑作用去分门别类非常的cool，使用前一定要花功夫去认真分类样式，如果分类混乱，将难以复用。像OOCSS，在需求设计改变频繁时，很难把控。
ACSS(atomic CSS、原子CSS)
ACSS即为原子CSS，就像自然界中把整个的物体不断拆分最后都是由原子之类构成的（化学没学好），这样也就不存在物体之间的差别了，所有事物都是原子，也就方便了描述。ACSS把每一条CSS rule都看做一个原子，给rule一个class类名。
示例代码：
.mr-1 { margin-right: 10px; } .mr-2 { margin-right: 20px; }
查看更多关于CSS知识总结之设计模式（持续学习中）_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108487