OO CSS的概念

OOCSS其实就是Object-Oriented-CSS（面向对象的CSS
）
image.png
image.png

OO CSS的作用和注意事项

作用

image.png

注意事项

image.png
image.png

image.png
image.png

image.png
image.png

image.png

image.png

image.png
image.png

image.png

image.png
image.png

image.png

image.png

image.png

OO CSS的代码实战

官网：http://oocss.org/
image.png
image.png
image.png
image.png

image.png
image.png
image.png
image.png
image.png

image.png
image.png
image.png

image.png
image.png

拓展

一个当前前端开发最火的一个 css 库 reset.css，这个杀伤力也是有点大的
官网：https://meyerweb.com/eric/tools/css/reset/

normalize.css 这个杀伤力较小，它使得标签可以在所有的浏览器中有统一的样式，但是这个也有些问题：只是将 body 的默认值给去掉了，但是其他的例如 div 的 margin padding 等等都没有去掉
image.png
项目地址：http://necolas.github.io/normalize.css/
介绍：http://nicolasgallagher.com/about-normalize-css/
github：https://github.com/necolas/normalize.css

Neat.css 推荐使用的

image.png
中文官网
现在这个 neat.css 是 cube.css 的一部分了
github 地址
cube.css 的使用方法

  1. 使用方法
  • Cube 托管于强大的阿里 CDN 上，提供 https 支持，只需按如下方式引入便可自适应协议。 ``` 
  2. - 从 1.3.2 版本开始，可以直接使用 NPM 来管理。

npm install —save cube.css

  2. 2. 下载
  3. - [ cube.css ](http://g.alicdn.com/thx/cube/1.3.2/cube.css)`//g.alicdn.com/thx/cube/1.3.2/cube.css`
  4. - [ cube.css 压缩版 ](http://g.alicdn.com/thx/cube/1.3.2/cube.min.css)`//g.alicdn.com/thx/cube/1.3.2/cube.min.css`
  5. - 选择与折衷
  7. > 需要注意的是 cube.css 中将包含：
  10. - [neat.css](http://thx.github.io/cube/doc/neat)
  11. - [layout.css](http://thx.github.io/cube/doc/layout)
  12. - [button.css](http://thx.github.io/cube/doc/button)
  13. - utils.css
  15. > 但**不包含** [type.css](http://thx.github.io/cube/doc/type)。因此在需要版式设计的网站，例如 个人博客中，我们推荐一次加载 cube.css 与 type.css：

```