OO CSS基础

最新推荐文章于 2020-08-20 09:51:07 发布

weixin_33697898

最新推荐文章于 2020-08-20 09:51:07 发布

阅读量69

点赞数

原文链接：http://www.cnblogs.com/crayonchen/p/4931556.html

版权

官网：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;
}