Your SlideShare is downloading. ×
  • Like
面向对象的CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

面向对象的CSS

  • 4,997 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • cool
    Are you sure you want to
    Your message goes here
  • 面向对象的CSS
    Are you sure you want to
    Your message goes here
  • 面向对象是个好东西啊。。
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,997
On SlideShare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
Downloads
82
Comments
3
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 面向对象的CSS
    财付通 jamiexie
    Twitter: @treblam
    Blog: http://jeekundo.com/
  • 2. Why O,O?
    加强代码重用
    程序员第一美德:懒惰
    DRY (Don’t repeat yourself)
    能只做一次的事情绝不做第二次
  • 3. What?
    “像是语言的进化,它让CSS更强大”
  • 4. 作用
    • 加强代码重用
    • 5. 方便维护
    • 6. 减小CSS体积
    • 7. 提升渲染效率
  • How?
    类和实例
    将页面可重用元素抽象成一个类,用class加以描述,而与其对应的HTML则可看成是此类的一个实例
  • 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. Nicole Sullivan:
    名称可能使人迷惑
    不要把OOCSS和OOP的特性做一对一的比较
  • 14. 两条基本原则
    结构和皮肤相分离
    容器和内容相分离
  • 15. 结构和皮肤相分离
    将结构和皮肤分别交给两个class来控制
  • 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. 1个头部
    1个评论列表
    5个图文混排区
    操作链接列表
    段落
    2个连接样式
    7个小对象
  • 23. 我们都知道可以重用的
  • 24. 还不那么明显的
  • 25.
  • 26. #header .guide {…}
    #life-service .bd .service-links {…}
    #footer a {…}
    .linkList {…}
    .linkList a {…}
  • 27.
    • 抽象出可重用的元素,建好组件库
    • 28. 在组件库内寻找可用元素组装页面
  • 处理好层叠关系
    往你想要扩展的对象本身增加class,而不是它的父节点上
    • 在同一个对象内总是使用层叠关系
    • 29. 一个对象内的所有子节点必须用这个对象的class名作为开头,比如:.mymodule .inner{…}
    • 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. 避免使用id定义样式
    id三宗罪:
    • 权重太高,搞乱优先级
    • 33. 无法重用,一个页面只能出现一次
    • 34. 容易和js用的id混淆,不便于区分
  • 避免位置相关的样式
    #header .linkList {…}
    #foorer .linkList {…}
    #header ul {}
    .news ul {…}
    #sidebar h3 {…}
    .weatherMudule h3 {…}
    .tab h4 {…}
    .linkList {…}
    .mainNav
    .subNav
    h3,.h3 {…}
  • 35. 例子:
    #weatherModule h3 {color:red;}
    #tab h3 {color:blue;}
    • 未定义全局的h3,所以:
    新模块里面的h3是没有样式的
    开发人员必须针对同样的样式写许多CSS
  • 36. h3 {color:black;}
    #weatherModule h3 {color:red;}
    #tabs h3 {color:blue;}
    • 有定义全局颜色
    • 37. weather和tabs重写默认的h3
    • 38. h3的三种样式不能在一个模块里面共存
    • 39. 如果不覆盖掉前面定义的样式,默认的h3无法再weather和tabs里面使用
    • 40. weather和tabs里面的h3不能在外面使用
  • 一致性
    标题在不同的模块里面出现时必须保持一致
    一个标题在另一个地方出现时不应该变成标题
  • 41. 试试这种方式
    h1,.h1{}
    h2,.h2{}
    h3,.h3{}
    h4,.h4{}
    h5,.h5{}
    h6,.h6{}
    <h3></h3>
    <h3 class=“h6”></h3>
    • 找出所有的标题样式:
    • 42. 给每个标题设置好默认样式
    • 43. 在尊重语义的同时又能保证展现上的灵活
  • 6个class还不够?
    .category{…}
    .section{…}
    .product{…}
    .prediction{…}
    通过class直接在对象上进行扩充,避免通过层叠关系来改变对象的显示
  • 44. 控制好优先级
    class先后顺序与
    优先级无关
    <div class=“classAclassB”>
    样式表中的先后顺序与优先级有关
    .classA{color:red;}
    .classB{color:blue;}
  • 45. 推荐写法
    <div class=“media mediaExt attribution”>
    .media {…}
    .mediaExt {…}
    .attribution {…}
  • 46. html body .myModule div .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. 语义化怎么办?
    OOCSS不是会留下一堆基于表现的Class名?
  • 50. HTML标签语义化
    OOCSS不妨碍HTML标签的语义
    但也在语义和可维护性之间做了权衡
  • 51. <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之后关掉即可
  • 52. Class命名的语义化
    避免为了语义而语义
  • 53. Class命名的几个目标:
    简短—— 每一个字节都很重要,尽可能简短
    清晰—— 根据名称很快就能猜到它是干嘛的
    语义 —— 对象的外观不重要,重要的是它是什么,它是干嘛的
    大众化—— 过于特殊的名字会减少它的应用场景或导致语义化的class以非语义化的方式使用(基类大众化、子类逐渐个性化)
    有些目标会互相矛盾,一切在于权衡
  • 54. 总结
  • 55. OOCSS推荐做法:
    1.建立一个组件库
    2.使用一致的语义化的样式
    3.把模块内部做成透明的
    4.灵活一点
    5.尝试喜欢栅格
    6.减少选择器
    7.分离结构和皮肤
    8.分离容器和内容
    9.通过给元素设置多个Class来扩展对象
    10.使用YUI的reset和fonts
  • 56. 9个误区
    1.位置相关的样式
    2.不要给Class指定标签
    3.避免在主内容区内用ID来设置样式
    4.避免不规则背景图上的阴影和圆角
    5.不要把所有的图片拼在一块(除非你的页面非常少)
    6.避免高度对齐
    7.文字就是文字,不要做成图片
    8.冗余
    9.避免过早优化