OO CSS基础

官网：http://oocss.org/

【OO CSS的注意事项】

1.不要直接定义子节点，应把共性声明放到父类。
2.结构和皮肤相分离。
3.容器与内容相分离。
4.抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装页面。
5.往你想要扩展的对象本身增加class 而不是他的父节点。
6.对象应保持独立性。
7.避免使用ID选择器，权重太高，无法重用。
8.避免位置相关的样式。
9.保证选择器相同的权重。
10.类名 简短 清晰 语义化 OOCSS的名字并不影响HTML语义化。

 

可用库：

Reset.css  （以下代码为转载的阉割版，只保留了需要的部分）

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

:focus {
    outline: 1;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

normalize.css  （相对于Reset做了一些改进补充，保证浏览器的兼容）

Neat.css （基于normalize的全新的 CSS Reset）http://thx.github.io/cube/doc/neat/

type.css （针对汉字排版） http://thx.github.io/cube/doc/type/

Layout.css （更加丰富的布局） http://thx.github.io/cube/doc/layout/
button.css （自适应按钮） http://thx.github.io/cube/doc/button/
Iconfont.css （海量图标字体） http://thx.github.io/cube/doc/iconfont/