[互联网]面向对象的CSS.pptVIP

面向对象的CSS 财付通 jamiexie Twitter: @treblam Blog: / Why O,O? 加强代码重用 程序员第一美德：懒惰 DRY (Don’t repeat yourself) 能只做一次的事情绝不做第二次 What? “像是语言的进化，它让CSS更强大” 一种可重用和可维护的CSS书写方式 作用 加强代码重用 方便维护 减小CSS体积 提升渲染效率 增强网站一致性 How? 类和实例 将页面可重用元素抽象成一个类，用class加以描述，而与其对应的HTML则可看成是此类的一个实例 类 .media {overflow:hidden;_overflow:visible;zoom:1;margin:10px;} .media .bd{display:table-cell; zoom:1;} .media .img{float:left;/*margin-right: 10px;*/} .media .img img{display:block;} .media .imgExt{float:right; /*margin-left: 10px;*/} 实例 div class=media a href=“#” class=“img” img src=myImg.png alt=“ / /a div class=“bd@somebody 30 minutes ago/div /div 封装 .mod .inner {…} .mod .tr {…} .mod .bl {…} 而不是 .inner {} .tr {} .bl {} 不要直接定义子节点 .tr .bl .inner 继承 从一般到特殊的过程，把共性声明放到父类中， 把特性声明代码放入到子类中 假如CSS支持继承 .module { margin:10px; width:100px; float:left; } .saleModule { extends: module; font-size:14px; overflow:hidden; } 在样式表里面声明要扩展的Class div class=“saleModule”… …/div 而实际情况是 .module { margin:10px; width:100px; } .saleModule { font-size:14px; overflow:hidden; float:left; } div class=“module saleModule”… …/div 通过给根元素设置多个Class来扩展对象，使用多Class来模拟OO 名称可能使人迷惑 不要把OOCSS和OOP的特性做一对一的比较 Nicole Sullivan： 两条基本原则 结构和皮肤相分离 容器和内容相分离 结构和皮肤相分离 将结构和皮肤分别交给两个class来控制 div class=mod simpleExt b class=top b class=tl/b b class=tr/b /b div class=inner div class=hd h3simpleExt/h3 /div div class=bd pBody/p /div /div b class=bottom b class=bl/b b class=br/b /b /div 控制皮肤的class：处理比较简单的问题，如color、border、background-image等等 多个皮肤重用一种结构，使得复杂的结构可以重用，皮肤的修改工作变得很简单 控制结构的class：处理用于展现目的的小元素（oocss中的b标签）的位置、浏览器bug和所有比较复杂的问题 容器和内容相分离 解除容器和内容之间的依赖关系 div class=shopRank h3火热销售排行榜/h3 ul li…/li ... /ul /div .shopRank ul {} .shopRank li {} div class=shopRank h3火热销售排行榜/h3 ul class=“rankList” li…/li