《高级前端1.1》面向对象的CSS——OOCSS,Reset.css,Normalize.css
核心内容：1.OO CSS 的概念解读； 2.OO CSS 的作用和注意事项； 3.OO CSS 代码实战；
OO CSS 的概念解读
众多开发者忽视了 CSS 的表现（认为他太过简单，是一种机械的工作），而把更多关注在 Javascript 的性能上或者其他方面。
OO CSS 将页面可重用元素抽象成一个类，用 Class 加以描述，而与其对应的 HTML 即可看成是此类的一个实例。
CSS新的认识：
css已经可以是类，并且复用类，重写类。
可以有函数，变量，循环等。
以及如何用css来实现更高的网页性能的渲染，如3d加速，如何用css来让dom渲染得更快，如何配合html让整个渲染过程更加完美。
OO CSS 的代码实战
前置处理器：更好地编写样式（less，sass）
后置处理器：完善各种浏览器前缀
OO CSS 的作用和注意事项
作用：
1. 不要直接定义子节点，应把共性声明放到父类
.mod .inner{} //.mod下面的inner
.inner{} //不是很建议的声明
如.mod下有很多子节点都有一个相同的color，那么把color写到.mod中。
2. 结构和皮肤相分离
<div class="container simpleExt"></div> //html结构 .container{} //控制结构的class .simpleExt{} //控制皮肤的class
改版还皮肤非常方便
3. 容器和内容相分离
<div class="container"><ul><li>排行</li></ul></div> //html结构 .container ul{} //ul依赖了容器，不好 <div class="container"><ul class="rankList"><li>排行</li></ul></div> //html结构 .rankList ul{} //解除与容器的依赖，可以从一个容器转移到其他容器
内容可以很方便地放到新的容器，所以不要把内容的样式被容器固定死
4. 抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装页面
5. 往你想要扩展的对象本身增加class而不是他的父节点
6. 对象应保持独立性
<div class="container"><div class="mod"></div></div> //html结构 .container{} .container .mod{} //控制结构的class <div class="container mod"></div> //两个样式都是容器，不如这样写hmtl
7. 避免使用ID选择器，权重太高，无法重用
8. 避免位置相关的样式
#header .container{}, #footer .container{} //不要申明同样的样式名 .container{} //而应该把.container提炼出来单独写 //如果.container非要长得不一样，比如这里是h1，可以尝试这样写 h1,.h1{} h2,.h2{} <h1 class="h6"></h1>
9. 保证选择器相同的权重
指不要同时用class id style，也不要在一个类下又有同名的类
10. 类名 简短 清晰 语义化 OOCSS的名字并不影响HTML语义化
影响seo的是html的标签，和css样式名没什么关系
OO CSS 的代码实战
本课时介绍 OO CSS 的代码实战，包括OOCSS的官网的概念以及 Reset CSS 以及 Normalize.css、Neat.css 在面向对象中的使用。最后介绍一下如何自己设计出这样 OO 的 CSS.
oocss官网：oocss.org
常用的CSS库：
1. reset.css
http://meyerweb.com/eric/tools/css/reset/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
reset.css一刀切，把所有样式都归0，导致想要用样式的时候非常麻烦。然后就有了normalize.css
2. normalize.css
https://github.com/necolas/normalize.css
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} body{margin:0} article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block} audio,canvas,progress,video{display:inline-block;vertical-align:baseline} audio:not([controls]){display:none;height:0} [hidden],template{display:none} a{background-color:transparent} a:active,a:hover{outline:0} abbr[title]{border-bottom:1px dotted} b,strong{font-weight:700} dfn{font-style:italic} h1{margin:.67em 0;font-size:2em} mark{background:#ff0;color:#000} small{font-size:80%} sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0} sup{top:-.5em} sub{bottom:-.25em} img{border:0} svg:not(:root){overflow:hidden} figure{margin:1em 40px} hr{box-sizing:content-box;height:0} pre{overflow:auto} code,kbd,pre,samp{font-size:1em;font-family:monospace} button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit} button{overflow:visible} button,select{text-transform:none} button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button} button[disabled],html input[disabled]{cursor:default} button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0} input{line-height:normal} input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0} input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto} input[type=search]{box-sizing:content-box;-webkit-appearance:textfield} input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none} fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver} legend{padding:0;border:0} textarea{overflow:auto} optgroup{font-weight:700} table{border-collapse:collapse;border-spacing:0} td,th{padding:0}
normalize只对body等少量标签进行了归零设置，而reset是把所有的都干掉了，两者都有缺点，然后就有了Neat.css
3. Neat.css
http://thx.github.io/cube/doc/neat/
那么以上几个库和oocss有什么关系呢？
这些库就相当于整个网站样式的一个父类，非常好用。
