面向对象的CSS<br />财付通  jamiexie<br />Twitter: @treblam<br />   Blog: http://jeekundo.com/<br />
Why O,O?<br />加强代码重用<br />程序员第一美德:懒惰<br />DRY (Don’t repeat yourself) <br />能只做一次的事情绝不做第二次<br />
What?<br />“像是语言的进化,它让CSS更强大”<br />
作用<br /><ul><li>加强代码重用
方便维护
减小CSS体积
提升渲染效率</li></li></ul><li>How?<br />类和实例<br />将页面可重用元素抽象成一个类,用class加以描述,而与其对应的HTML则可看成是此类的一个实例<br />
.media{overflow:hidden;_overflow:visible;zoom:1;margin:10px;}<br />.media .bd{display:table-cell; zoom:1;}<br />.media .im...
封装<br />不要直接定义子节点<br />.tr<br />.mod .inner {…}<br />.mod .tr {…}<br />.mod .bl {…}<br />而不是<br />.inner {}<br />.tr {}<br...
继承<br />从一般到特殊的过程,把共性声明放到父类中,<br />把特性声明代码放入到子类中<br />
假如CSS支持继承<br />在样式表里面声明要扩展的Class<br />.module {<br />    margin:10px;<br />    width:100px;<br />float:left;<br />}<br />....
而实际情况是<br /><div class=“module saleModule”>… …</div><br />.module {<br />    margin:10px;<br />    width:100px;<br />}<br ...
Nicole Sullivan:<br />名称可能使人迷惑<br />不要把OOCSS和OOP的特性做一对一的比较<br />
两条基本原则<br />结构和皮肤相分离<br />容器和内容相分离<br />
结构和皮肤相分离<br />将结构和皮肤分别交给两个class来控制<br />
控制结构的class:处理用于展现目的的小元素(oocss中的b标签)的位置、浏览器bug和所有比较复杂的问题<br /><div class="modsimpleExt">				<br />    <b class="top"><br />...
容器和内容相分离<br />解除容器和内容之间的依赖关系<br />
<div class="shopRank">                    <br />    <h3>火热销售排行榜</h3><br />    <ul><br />        <li>…</li><br />        .....
做页面就像堆积木<br />先造积木,再建房子<br />
看这个页面片段<br />
分解一下<br />
1个头部<br />1个评论列表<br />5个图文混排区<br />操作链接列表<br />段落<br />2个连接样式<br />7个小对象<br />
我们都知道可以重用的<br />
还不那么明显的<br />
#header .guide {…}<br />#life-service .bd .service-links {…}<br />#footer a {…}<br />.linkList {…}<br />.linkList a {…}<br />
<ul><li>抽象出可重用的元素,建好组件库
在组件库内寻找可用元素组装页面</li></li></ul><li>处理好层叠关系<br />往你想要扩展的对象本身增加class,而不是它的父节点上<br /><ul><li>在同一个对象内总是使用层叠关系
一个对象内的所有子节点必须用这个对象的class名作为开头,比如:.mymodule .inner{…}
尽可能避免对象之间的层叠</li></li></ul><li><div class="mod myModule"> <br />    <div class="inner"><br />        <h3>… …</h3><br />   ...
对象应保持独立性<br />自己解决自己的问题,而不是让父母出面<br /><div class=“mod myModule”>…</div><br />.mod {…}<br />.myModule {…}<br /><body class=...
避免使用id定义样式<br />id三宗罪:<br /><ul><li>权重太高,搞乱优先级
无法重用,一个页面只能出现一次
容易和js用的id混淆,不便于区分</li></li></ul><li>避免位置相关的样式<br />#header .linkList {…}<br />#foorer .linkList {…}<br />#header ul {}<br ...
例子:<br />#weatherModule h3 {color:red;}<br />#tab h3 {color:blue;}<br /><ul><li>未定义全局的h3,所以:</li></ul>新模块里面的h3是没有样式的<br />...
h3 {color:black;}<br />#weatherModule h3 {color:red;}<br />#tabs h3 {color:blue;}<br /><ul><li>有定义全局颜色
weather和tabs重写默认的h3
h3的三种样式不能在一个模块里面共存
如果不覆盖掉前面定义的样式,默认的h3无法再weather和tabs里面使用
weather和tabs里面的h3不能在外面使用</li></li></ul><li>一致性<br />标题在不同的模块里面出现时必须保持一致<br />一个标题在另一个地方出现时不应该变成标题<br />
试试这种方式<br />h1,.h1{}<br />h2,.h2{}<br />h3,.h3{}<br />h4,.h4{}<br />h5,.h5{}<br />h6,.h6{}<br /><h3></h3><br /><h3 class=“...
给每个标题设置好默认样式
在尊重语义的同时又能保证展现上的灵活</li></li></ul><li>6个class还不够?<br />.category{…}<br />.section{…}<br />.product{…}<br />.prediction{…}<b...
控制好优先级<br />class先后顺序与<br />优先级无关<br /><div class=“classAclassB”><br />样式表中的先后顺序与优先级有关<br />.classA{color:red;}<br />.clas...
推荐写法<br /><div class=“media mediaExt attribution”><br />.media {…}<br />.mediaExt {…}<br />.attribution {…}<br />
html body .myModule div .hd {…}<br />.myModule .hd {…}<br />保证选择器有相同的权重<br />用样式表中后出现的覆盖掉前面的<br />.myModule .hd {…}<br />....
.mod .hd {…}<br />.ie .mod .hd {…}<br />.weatherMod .hd {…}<br />有节制地使用hack,不要让hack改变你的权重<br />.mod .hd {color:red; _zoom:...
#weatherMod .hd {…}<br />.myModule .hd {… !important} <br />避免使用id和!important<br />避免团队内的优先级竞赛<br />
语义化怎么办?<br />OOCSS不是会留下一堆基于表现的Class名?<br />
Upcoming SlideShare
Loading in …5
×

面向对象的CSS

5,889 views

Published on

2010年圣诞节15期web标准化交流会的PPT

Published in: Technology
3 Comments
12 Likes
Statistics
Notes
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 面向对象的CSS
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 面向对象是个好东西啊。。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,889
On SlideShare
0
From Embeds
0
Number of Embeds
2,261
Actions
Shares
0
Downloads
84
Comments
3
Likes
12
Embeds 0
No embeds

No notes for slide

面向对象的CSS

  1. 1. 面向对象的CSS<br />财付通 jamiexie<br />Twitter: @treblam<br /> Blog: http://jeekundo.com/<br />
  2. 2. Why O,O?<br />加强代码重用<br />程序员第一美德:懒惰<br />DRY (Don’t repeat yourself) <br />能只做一次的事情绝不做第二次<br />
  3. 3. What?<br />“像是语言的进化,它让CSS更强大”<br />
  4. 4. 作用<br /><ul><li>加强代码重用
  5. 5. 方便维护
  6. 6. 减小CSS体积
  7. 7. 提升渲染效率</li></li></ul><li>How?<br />类和实例<br />将页面可重用元素抽象成一个类,用class加以描述,而与其对应的HTML则可看成是此类的一个实例<br />
  8. 8. .media{overflow:hidden;_overflow:visible;zoom:1;margin:10px;}<br />.media .bd{display:table-cell; zoom:1;}<br />.media .img{float:left;/*margin-right: 10px;*/}<br />.media .imgimg{display:block;}<br />.media .imgExt{float:right; /*margin-left: 10px;*/}<br /><div class="media"><br /> <a href=“#” class=“img”><br /> <imgsrc="myImg.png" alt=“" /><br /> </a><br /> <div class=“bd">@somebody 30 minutes ago</div><br /> </div><br />
  9. 9. 封装<br />不要直接定义子节点<br />.tr<br />.mod .inner {…}<br />.mod .tr {…}<br />.mod .bl {…}<br />而不是<br />.inner {}<br />.tr {}<br />.bl {}<br />.bl<br />.inner<br />
  10. 10. 继承<br />从一般到特殊的过程,把共性声明放到父类中,<br />把特性声明代码放入到子类中<br />
  11. 11. 假如CSS支持继承<br />在样式表里面声明要扩展的Class<br />.module {<br /> margin:10px;<br /> width:100px;<br />float:left;<br />}<br />.saleModule{<br />extends: module;<br /> font-size:14px;<br />overflow:hidden;<br />}<br /><div class=“saleModule”>… …</div><br />
  12. 12. 而实际情况是<br /><div class=“module saleModule”>… …</div><br />.module {<br /> margin:10px;<br /> width:100px;<br />}<br />.saleModule {<br /> font-size:14px;<br />overflow:hidden;<br />float:left;<br />}<br />通过给根元素设置多个Class来扩展对象,使用多Class来模拟OO<br />
  13. 13. Nicole Sullivan:<br />名称可能使人迷惑<br />不要把OOCSS和OOP的特性做一对一的比较<br />
  14. 14. 两条基本原则<br />结构和皮肤相分离<br />容器和内容相分离<br />
  15. 15. 结构和皮肤相分离<br />将结构和皮肤分别交给两个class来控制<br />
  16. 16. 控制结构的class:处理用于展现目的的小元素(oocss中的b标签)的位置、浏览器bug和所有比较复杂的问题<br /><div class="modsimpleExt"> <br /> <b class="top"><br /> <b class="tl"></b><br /> <b class="tr"></b><br /> </b><br /> <div class="inner"> <br /> <div class="hd"> <h3>simpleExt</h3><br /> </div><br /> <div class="bd"><br /> <p>Body</p><br /> </div><br /> </div><br /> <b class="bottom"><br /> <b class="bl"></b><br /> <b class="br"></b><br /> </b> <br /></div><br />控制皮肤的class:处理比较简单的问题,如color、border、background-image等等<br />多个皮肤重用一种结构,使得复杂的结构可以重用,皮肤的修改工作变得很简单<br />
  17. 17. 容器和内容相分离<br />解除容器和内容之间的依赖关系<br />
  18. 18. <div class="shopRank"> <br /> <h3>火热销售排行榜</h3><br /> <ul><br /> <li>…</li><br /> ... <br /> </ul><br /></div><br />.shopRankul {}<br />.shopRankli {}<br /><div class="shopRank"> <br /> <h3>火热销售排行榜</h3><br /> <ul class=“rankList”><br /> <li>…</li><br /> ... <br /> </ul><br /></div><br />.rankList {}<br />.rankListli {}<br />后者解除和容器的依赖关系,便于重用,<br />可以从一个容器转移到任意容器<br />
  19. 19. 做页面就像堆积木<br />先造积木,再建房子<br />
  20. 20. 看这个页面片段<br />
  21. 21. 分解一下<br />
  22. 22. 1个头部<br />1个评论列表<br />5个图文混排区<br />操作链接列表<br />段落<br />2个连接样式<br />7个小对象<br />
  23. 23. 我们都知道可以重用的<br />
  24. 24. 还不那么明显的<br />
  25. 25.
  26. 26. #header .guide {…}<br />#life-service .bd .service-links {…}<br />#footer a {…}<br />.linkList {…}<br />.linkList a {…}<br />
  27. 27. <ul><li>抽象出可重用的元素,建好组件库
  28. 28. 在组件库内寻找可用元素组装页面</li></li></ul><li>处理好层叠关系<br />往你想要扩展的对象本身增加class,而不是它的父节点上<br /><ul><li>在同一个对象内总是使用层叠关系
  29. 29. 一个对象内的所有子节点必须用这个对象的class名作为开头,比如:.mymodule .inner{…}
  30. 30. 尽可能避免对象之间的层叠</li></li></ul><li><div class="mod myModule"> <br /> <div class="inner"><br /> <h3>… …</h3><br /> <div class="bd"><br /> <p>… …</p><br /> </div><br /> </div><br /></div><br />.myModule .inner{…}<br />.myModule .bd{…}<br />inner和bd都从属于myModule<br />.myModule h3{…}<br />h3本身就是一个可重用对象<br /><h3 class=“category”>…</h3><br />.category{…}<br />如果要扩展h3,则直接在他本身增加class,而不是通过父节点的层叠关系来扩展<br />
  31. 31. 对象应保持独立性<br />自己解决自己的问题,而不是让父母出面<br /><div class=“mod myModule”>…</div><br />.mod {…}<br />.myModule {…}<br /><body class=“registerPage”><br /> <div class=“mod”>…</div><br /></body><br />.mod {…}<br />.registerPage .mod {…}<br />
  32. 32. 避免使用id定义样式<br />id三宗罪:<br /><ul><li>权重太高,搞乱优先级
  33. 33. 无法重用,一个页面只能出现一次
  34. 34. 容易和js用的id混淆,不便于区分</li></li></ul><li>避免位置相关的样式<br />#header .linkList {…}<br />#foorer .linkList {…}<br />#header ul {}<br />.news ul {…}<br />#sidebar h3 {…}<br />.weatherMudule h3 {…}<br />.tab h4 {…}<br />.linkList {…}<br />.mainNav<br />.subNav<br />h3,.h3 {…}<br />
  35. 35. 例子:<br />#weatherModule h3 {color:red;}<br />#tab h3 {color:blue;}<br /><ul><li>未定义全局的h3,所以:</li></ul>新模块里面的h3是没有样式的<br />开发人员必须针对同样的样式写许多CSS<br />
  36. 36. h3 {color:black;}<br />#weatherModule h3 {color:red;}<br />#tabs h3 {color:blue;}<br /><ul><li>有定义全局颜色
  37. 37. weather和tabs重写默认的h3
  38. 38. h3的三种样式不能在一个模块里面共存
  39. 39. 如果不覆盖掉前面定义的样式,默认的h3无法再weather和tabs里面使用
  40. 40. weather和tabs里面的h3不能在外面使用</li></li></ul><li>一致性<br />标题在不同的模块里面出现时必须保持一致<br />一个标题在另一个地方出现时不应该变成标题<br />
  41. 41. 试试这种方式<br />h1,.h1{}<br />h2,.h2{}<br />h3,.h3{}<br />h4,.h4{}<br />h5,.h5{}<br />h6,.h6{}<br /><h3></h3><br /><h3 class=“h6”></h3><br /><ul><li>找出所有的标题样式:
  42. 42. 给每个标题设置好默认样式
  43. 43. 在尊重语义的同时又能保证展现上的灵活</li></li></ul><li>6个class还不够?<br />.category{…}<br />.section{…}<br />.product{…}<br />.prediction{…}<br />通过class直接在对象上进行扩充,避免通过层叠关系来改变对象的显示<br />
  44. 44. 控制好优先级<br />class先后顺序与<br />优先级无关<br /><div class=“classAclassB”><br />样式表中的先后顺序与优先级有关<br />.classA{color:red;}<br />.classB{color:blue;}<br />
  45. 45. 推荐写法<br /><div class=“media mediaExt attribution”><br />.media {…}<br />.mediaExt {…}<br />.attribution {…}<br />
  46. 46. html body .myModule div .hd {…}<br />.myModule .hd {…}<br />保证选择器有相同的权重<br />用样式表中后出现的覆盖掉前面的<br />.myModule .hd {…}<br />.myModule2 .hd {…}<br />
  47. 47. .mod .hd {…}<br />.ie .mod .hd {…}<br />.weatherMod .hd {…}<br />有节制地使用hack,不要让hack改变你的权重<br />.mod .hd {color:red; _zoom:1;}<br />.weatherMod .hd {…}<br />
  48. 48. #weatherMod .hd {…}<br />.myModule .hd {… !important} <br />避免使用id和!important<br />避免团队内的优先级竞赛<br />
  49. 49. 语义化怎么办?<br />OOCSS不是会留下一堆基于表现的Class名?<br />
  50. 50. HTML标签语义化<br />OOCSS不妨碍HTML标签的语义<br />但也在语义和可维护性之间做了权衡<br />
  51. 51. <div class="mod complex excerpt"><br /><b class="top"><br /> <b class="tl"></b><br /> <b class="tr"></b><br /> </b><br /><div class="inner"><br /> <div class="hd"><br /> <h3>complex</h3><br /> </div><br /> <div class="bd"><br /> <p><p><br /> <ul class="simpleList"><br /> <li>…</li><br /> <li>…</li><br /> </ul><br /> <p>…</p><br /> </div><br /></div><br /><b class="bottom"><br /> <b class="bl"></b><br /> <b class="br"></b><br /> </b><br /></div><br />.top和.bottom用于展现目的,处理圆角和边框<br />.top .bottom .inner搭配在一起可以实现各种类型的圆角和阴影<br />解释:<br />屏幕阅读器会忽略空的b标签<br />由服务器脚本生成,等浏览器全面支持CSS3之后关掉即可<br />
  52. 52. Class命名的语义化<br />避免为了语义而语义<br />
  53. 53. Class命名的几个目标:<br />简短—— 每一个字节都很重要,尽可能简短<br />清晰—— 根据名称很快就能猜到它是干嘛的<br />语义 —— 对象的外观不重要,重要的是它是什么,它是干嘛的<br />大众化—— 过于特殊的名字会减少它的应用场景或导致语义化的class以非语义化的方式使用(基类大众化、子类逐渐个性化)<br />有些目标会互相矛盾,一切在于权衡<br />
  54. 54. 总结<br />
  55. 55. OOCSS推荐做法:<br />1.建立一个组件库<br />2.使用一致的语义化的样式<br />3.把模块内部做成透明的<br />4.灵活一点<br />5.尝试喜欢栅格<br />6.减少选择器<br />7.分离结构和皮肤<br />8.分离容器和内容<br />9.通过给元素设置多个Class来扩展对象<br />10.使用YUI的reset和fonts<br />
  56. 56. 9个误区<br />1.位置相关的样式<br />2.不要给Class指定标签<br />3.避免在主内容区内用ID来设置样式<br />4.避免不规则背景图上的阴影和圆角<br />5.不要把所有的图片拼在一块(除非你的页面非常少)<br />6.避免高度对齐<br />7.文字就是文字,不要做成图片<br />8.冗余<br />9.避免过早优化<br />

×