面向对象的CSS
- 1. 面向对象的CSS 财付通 jamiexie Twitter: @treblam Blog: http://jeekundo.com/
- 9. 类 .media {overflow:hidden;_overflow:visible;zoom:1;margin:10px;} .media .bd{display:table-cell; zoom:1;} .media .img{float:left;/*margin-right: 10px;*/} .media .imgimg{display:block;} .media .imgExt{float:right; /*margin-left: 10px;*/} 实例 <div class="media"> <a href=“#” class=“img”> <imgsrc="myImg.png" alt=“" /> </a> <div class=“bd">@somebody 30 minutes ago</div> </div>
- 10. 封装 不要直接定义子节点 .tr .mod .inner {…} .mod .tr {…} .mod .bl {…} 而不是 .inner {} .tr {} .bl {} .bl .inner
- 12. 假如CSS支持继承 在样式表里面声明要扩展的Class .module { margin:10px; width:100px; float:left; } .saleModule{ extends: module; font-size:14px; overflow:hidden; } <div class=“saleModule”>… …</div>
- 13. 而实际情况是 .module { margin:10px; width:100px; } .saleModule{ font-size:14px; overflow:hidden; float:left; } 通过给根元素设置多个Class来扩展对象，使用多Class来模拟OO <div class=“module saleModule”>… …</div>
- 17. 控制结构的class：处理用于展现目的的小元素（oocss中的b标签）的位置、浏览器bug和所有比较复杂的问题 <div class="modsimpleExt"> <b class="top"> <b class="tl"></b> <b class="tr"></b> </b> <div class="inner"> <div class="hd"> <h3>simpleExt</h3> </div> <div class="bd"> <p>Body</p> </div> </div> <b class="bottom"> <b class="bl"></b> <b class="br"></b> </b> </div> 控制皮肤的class：处理比较简单的问题，如color、border、background-image等等 多个皮肤重用一种结构，使得复杂的结构可以重用，皮肤的修改工作变得很简单
- 19. <div class="shopRank"> <h3>火热销售排行榜</h3> <ul> <li>…</li> ... </ul> </div> .shopRankul {} .shopRankli {} <div class="shopRank"> <h3>火热销售排行榜</h3> <ul class=“rankList”> <li>…</li> ... </ul> </div> .rankList {} .rankListli {} 后者解除和容器的依赖关系，便于重用， 可以从一个容器转移到任意容器
- 27. #header .guide {…} #life-service .bd .service-links {…} #footer a {…} .linkList {…} .linkList a {…}
- 35. 对象应保持独立性 自己解决自己的问题，而不是让父母出面 <div class=“mod myModule”>…</div> .mod {…} .myModule{…} <body class=“registerPage”> <div class=“mod”>…</div> </body> .mod {…} .registerPage .mod {…}
- 50. html body .myModulediv .hd{…} .myModuleExt.hd{…} 保证选择器有相同的权重 用样式表中后出现的覆盖掉前面的 .myModule .hd{…} .myModuleExt.hd{…}
- 51. .mod .hd{…} .ie .mod .hd{…} .weatherMod .hd{…} 有节制地使用hack，不要让hack改变你的权重 .mod .hd{color:red; _zoom:1;} .weatherMod .hd{…}
- 55. 别忘了群组选择器 群组选择器方式： .high-blue,.high-white {…} /*共性声明*/ .high-blue {…} /*个性声明*/ .high-white {…} /*个性声明*/ <span class=“high-blue”> <button type=“button”></button> </span> <span class=“high-white”> <button type=“button”></button> </span> OOCSS方式： .high-btn{…} /*共性声明*/ .blue-btn{…} /*个性声明*/ .white-btn{…} /*个性声明*/ <span class=“high-btn blue-btn”> <button type=“button”></button> </span> <span class=“high-btn white-btn”> <button type=“button”></button> </span>
- 57. 对象的状态封装 <div class=“form instore-form”> … </div> <div class=“form instore-form dh-form”> … </div> <div class=“form instore-form dh-form loading-form”> … </div>
- 60. <div class="mod complex excerpt"> <b class="top"> <b class="tl"></b> <b class="tr"></b> </b> <div class="inner"> <div class="hd"> <h3>complex</h3> </div> <div class="bd"> <p><p> <ul class="simpleList"> <li>…</li> <li>…</li> </ul> <p>…</p> </div> </div> <b class="bottom"> <b class="bl"></b> <b class="br"></b> </b> </div> .top和.bottom用于展现目的，处理圆角和边框 .top .bottom .inner搭配在一起可以实现各种类型的圆角和阴影 解释： 屏幕阅读器会忽略空的b标签 由服务器脚本生成，等浏览器全面支持CSS3之后关掉即可
