面向对象的CSS

面向对象的CSS 财付通 jamiexie Twitter: @treblam Blog: http://jeekundo.com/

Why O,O? 加强代码重用程序员第一美德：懒惰 DRY (Don’t repeat yourself) 能只做一次的事情绝不做第二次

What? “像是语言的进化，它让CSS更强大”

提升渲染效率,[object Object]

.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>

封装不要直接定义子节点 .tr .mod .inner {…} .mod .tr {…} .mod .bl {…} 而不是 .inner {} .tr {} .bl {} .bl .inner

继承从一般到特殊的过程，把共性声明放到父类中，把特性声明代码放入到子类中

假如CSS支持继承在样式表里面声明要扩展的Class .module { margin:10px; width:100px; float:left; } .saleModule{ extends: module; font-size:14px; overflow:hidden; } <div class=“saleModule”>… …</div>

而实际情况是 <div class=“module saleModule”>… …</div> .module { margin:10px; width:100px; } .saleModule { font-size:14px; overflow:hidden; float:left; } 通过给根元素设置多个Class来扩展对象，使用多Class来模拟OO

Nicole Sullivan：名称可能使人迷惑不要把OOCSS和OOP的特性做一对一的比较

两条基本原则结构和皮肤相分离容器和内容相分离

结构和皮肤相分离将结构和皮肤分别交给两个class来控制

控制结构的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等等多个皮肤重用一种结构，使得复杂的结构可以重用，皮肤的修改工作变得很简单

容器和内容相分离解除容器和内容之间的依赖关系

<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 {} 后者解除和容器的依赖关系，便于重用，可以从一个容器转移到任意容器

做页面就像堆积木先造积木，再建房子

1个头部 1个评论列表 5个图文混排区操作链接列表段落 2个连接样式 7个小对象

我们都知道可以重用的

#header .guide {…} #life-service .bd .service-links {…} #footer a {…} .linkList {…} .linkList a {…}

在组件库内寻找可用元素组装页面,[object Object]

一个对象内的所有子节点必须用这个对象的class名作为开头，比如：.mymodule .inner{…}

尽可能避免对象之间的层叠,[object Object]

对象应保持独立性自己解决自己的问题，而不是让父母出面 <div class=“mod myModule”>…</div> .mod {…} .myModule {…} <body class=“registerPage”> <div class=“mod”>…</div> </body> .mod {…} .registerPage .mod {…}

避免使用id定义样式 id三宗罪： ,[object Object]

无法重用，一个页面只能出现一次

容易和js用的id混淆，不便于区分,[object Object]

例子： #weatherModule h3 {color:red;} #tab h3 {color:blue;} ,[object Object],新模块里面的h3是没有样式的开发人员必须针对同样的样式写许多CSS

h3 {color:black;} #weatherModule h3 {color:red;} #tabs h3 {color:blue;} ,[object Object]

weather和tabs重写默认的h3

h3的三种样式不能在一个模块里面共存

如果不覆盖掉前面定义的样式，默认的h3无法再weather和tabs里面使用

weather和tabs里面的h3不能在外面使用,[object Object]

试试这种方式 h1,.h1{} h2,.h2{} h3,.h3{} h4,.h4{} h5,.h5{} h6,.h6{} <h3></h3> <h3 class=“h6”></h3> ,[object Object]

给每个标题设置好默认样式

在尊重语义的同时又能保证展现上的灵活,[object Object]

控制好优先级 class先后顺序与优先级无关 <div class=“classAclassB”> 样式表中的先后顺序与优先级有关 .classA{color:red;} .classB{color:blue;}

推荐写法 <div class=“media mediaExt attribution”> .media {…} .mediaExt {…} .attribution {…}

html body .myModule div .hd {…} .myModule .hd {…} 保证选择器有相同的权重用样式表中后出现的覆盖掉前面的 .myModule .hd {…} .myModule2 .hd {…}

.mod .hd {…} .ie .mod .hd {…} .weatherMod .hd {…} 有节制地使用hack，不要让hack改变你的权重 .mod .hd {color:red; _zoom:1;} .weatherMod .hd {…}

#weatherMod .hd {…} .myModule .hd {… !important} 避免使用id和!important 避免团队内的优先级竞赛

语义化怎么办？ OOCSS不是会留下一堆基于表现的Class名？

面向对象的CSS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie 面向对象的CSS

Ähnlich wie 面向对象的CSS (20)

面向对象的CSS