Downloaded 85 times
Uploaded byJerry Xie
面向对象的CSS
本文件讨论了面向对象的 CSS (OOCSS) 的理念与实践，强调代码重用、维护便利和性能优化。核心原则包括结构与皮肤分离、容器与内容分离，以及避免使用 ID 和过度层叠的样式。总结建议建立组件库，使用一致的语义化样式，并灵活处理类和选择器。
![[译]Efficient, maintainable CSS](https://cdn.slidesharecdn.com/ss_thumbnails/efficient-091215042328-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
面向对象的CSS
- 1. 面向对象的CSS财付通 jamiexieTwitter:@treblam Blog: http://jeekundo.com/
- 2. Why O,O?加强代码重用程序员第一美德：懒惰DRY (Don’trepeat yourself) 能只做一次的事情绝不做第二次
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. .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>
- 9. 封装不要直接定义子节点.tr.mod .inner {…}.mod.tr {…}.mod .bl {…}而不是.inner {}.tr {}.bl {}.bl.inner
- 10.
- 11. 假如CSS支持继承在样式表里面声明要扩展的Class.module { margin:10px; width:100px;float:left;}.saleModule{extends: module; font-size:14px;overflow:hidden;}<div class=“saleModule”>… …</div>
- 12. 而实际情况是<div class=“module saleModule”>……</div>.module { margin:10px; width:100px;}.saleModule { font-size:14px;overflow:hidden;float:left;}通过给根元素设置多个Class来扩展对象，使用多Class来模拟OO
- 13.
- 14.
- 15.
- 16. 控制结构的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等等多个皮肤重用一种结构，使得复杂的结构可以重用，皮肤的修改工作变得很简单
- 17.
- 18. <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 {}后者解除和容器的依赖关系，便于重用，可以从一个容器转移到任意容器
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 26. #header .guide {…}#life-service.bd .service-links {…}#footer a {…}.linkList {…}.linkList a {…}
- 27.
- 28.
- 29.
- 30. 尽可能避免对象之间的层叠<div class="mod myModule"> <div class="inner"> <h3>… …</h3> <div class="bd"> <p>… …</p> </div> </div></div>.myModule .inner{…}.myModule .bd{…}inner和bd都从属于myModule.myModule h3{…}h3本身就是一个可重用对象<h3 class=“category”>…</h3>.category{…}如果要扩展h3，则直接在他本身增加class，而不是通过父节点的层叠关系来扩展
- 31. 对象应保持独立性自己解决自己的问题，而不是让父母出面<div class=“mod myModule”>…</div>.mod{…}.myModule {…}<body class=“registerPage”> <div class=“mod”>…</div></body>.mod {…}.registerPage .mod {…}
- 32.
- 33.
- 34. 容易和js用的id混淆，不便于区分避免位置相关的样式#header .linkList {…}#foorer.linkList {…}#header ul {}.news ul {…}#sidebar h3 {…}.weatherMudule h3 {…}.tab h4 {…}.linkList {…}.mainNav.subNavh3,.h3 {…}
- 35. 例子：#weatherModule h3 {color:red;}#tabh3 {color:blue;}未定义全局的h3，所以：新模块里面的h3是没有样式的开发人员必须针对同样的样式写许多CSS
- 36. h3 {color:black;}#weatherModule h3{color:red;}#tabs h3 {color:blue;}有定义全局颜色
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. 推荐写法<div class=“media mediaExtattribution”>.media {…}.mediaExt {…}.attribution {…}
- 46. html body .myModulediv .hd {…}.myModule .hd {…}保证选择器有相同的权重用样式表中后出现的覆盖掉前面的.myModule .hd {…}.myModule2 .hd {…}
- 47. .mod .hd {…}.ie.mod .hd {…}.weatherMod .hd {…}有节制地使用hack，不要让hack改变你的权重.mod .hd {color:red; _zoom:1;}.weatherMod .hd {…}
- 48. #weatherMod .hd {…}.myModule.hd {… !important} 避免使用id和!important避免团队内的优先级竞赛
- 49.