Enviar búsqueda
Cargar
面向对象的CSS
•
Descargar como PPTX, PDF
•
0 recomendaciones
•
331 vistas
Jerry Xie
Seguir
在上次的基础上增加了部分内容
Leer menos
Leer más
Tecnología
Vista de diapositivas
Denunciar
Compartir
Vista de diapositivas
Denunciar
Compartir
1 de 58
Descargar ahora
Recomendados
Komplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauen
Jens Grochtdreis
前端规范(初稿)
前端规范(初稿)
EnLei-Cai
Javascript模板引擎
Javascript模板引擎
Jerry Xie
Thurs. Jan. 19th Pine River Announcements
Thurs. Jan. 19th Pine River Announcements
Pine River
Raddon Chart of the Day February 7, 2012
Raddon Chart of the Day February 7, 2012
Raddon Financial Group
Everything Out Organizing Style Personality Preference
Everything Out Organizing Style Personality Preference
Cena Block
Customer development at Value Hub
Customer development at Value Hub
ValueHub
Dolyna vedmezha yurii
Dolyna vedmezha yurii
Taras Kutsy
Recomendados
Komplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauen
Jens Grochtdreis
前端规范(初稿)
前端规范(初稿)
EnLei-Cai
Javascript模板引擎
Javascript模板引擎
Jerry Xie
Thurs. Jan. 19th Pine River Announcements
Thurs. Jan. 19th Pine River Announcements
Pine River
Raddon Chart of the Day February 7, 2012
Raddon Chart of the Day February 7, 2012
Raddon Financial Group
Everything Out Organizing Style Personality Preference
Everything Out Organizing Style Personality Preference
Cena Block
Customer development at Value Hub
Customer development at Value Hub
ValueHub
Dolyna vedmezha yurii
Dolyna vedmezha yurii
Taras Kutsy
Olivia Florida
Olivia Florida
MICDS
Case4 mys footprints
Case4 mys footprints
laheflin
Web 2
Web 2
khurt3310
Otterbein- AmeriCorps VISTA Summer Associate Presentation 2012
Otterbein- AmeriCorps VISTA Summer Associate Presentation 2012
Ohio Campus Compact
Resume
Resume
PERUMAL MURUGAN
Sumários Desenvolvidos de Filosofia do Direito
Sumários Desenvolvidos de Filosofia do Direito
nelson0802
Visual Resume
Visual Resume
Colin Morrissey
Hindi project
Hindi project
sahil rajput
Detail wc
Detail wc
Snehal Patil
Scavenger hunt
Scavenger hunt
dez alvarez
The Haikufinaljan11
The Haikufinaljan11
guestd3d7159
SEMonline XVII: @Mail.Ru
SEMonline XVII: @Mail.Ru
SEMonline .Ru
Addiction
Addiction
Eric Strayer
EM Design Studio
EM Design Studio
Elite International Council
Beyond the Blocks Participant Handout
Beyond the Blocks Participant Handout
Ann Pool
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島
Ryoya Kawai
Aspetos gerais de desenvolvimento web.
Aspetos gerais de desenvolvimento web.
Corcioli
Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)
Jens Grochtdreis
初识 Html5
初识 Html5
Haiyang Yu
再来了解文档回流(Reflow)
再来了解文档回流(Reflow)
EnLei-Cai
Html Frameset
Html Frameset
Ken Abraham Saluta
20 种提升网页速度的技巧
20 种提升网页速度的技巧
wensheng wei
Más contenido relacionado
Destacado
Olivia Florida
Olivia Florida
MICDS
Case4 mys footprints
Case4 mys footprints
laheflin
Web 2
Web 2
khurt3310
Otterbein- AmeriCorps VISTA Summer Associate Presentation 2012
Otterbein- AmeriCorps VISTA Summer Associate Presentation 2012
Ohio Campus Compact
Resume
Resume
PERUMAL MURUGAN
Sumários Desenvolvidos de Filosofia do Direito
Sumários Desenvolvidos de Filosofia do Direito
nelson0802
Visual Resume
Visual Resume
Colin Morrissey
Hindi project
Hindi project
sahil rajput
Detail wc
Detail wc
Snehal Patil
Scavenger hunt
Scavenger hunt
dez alvarez
The Haikufinaljan11
The Haikufinaljan11
guestd3d7159
SEMonline XVII: @Mail.Ru
SEMonline XVII: @Mail.Ru
SEMonline .Ru
Addiction
Addiction
Eric Strayer
EM Design Studio
EM Design Studio
Elite International Council
Beyond the Blocks Participant Handout
Beyond the Blocks Participant Handout
Ann Pool
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島
Ryoya Kawai
Destacado
(16)
Olivia Florida
Olivia Florida
Case4 mys footprints
Case4 mys footprints
Web 2
Web 2
Otterbein- AmeriCorps VISTA Summer Associate Presentation 2012
Otterbein- AmeriCorps VISTA Summer Associate Presentation 2012
Resume
Resume
Sumários Desenvolvidos de Filosofia do Direito
Sumários Desenvolvidos de Filosofia do Direito
Visual Resume
Visual Resume
Hindi project
Hindi project
Detail wc
Detail wc
Scavenger hunt
Scavenger hunt
The Haikufinaljan11
The Haikufinaljan11
SEMonline XVII: @Mail.Ru
SEMonline XVII: @Mail.Ru
Addiction
Addiction
EM Design Studio
EM Design Studio
Beyond the Blocks Participant Handout
Beyond the Blocks Participant Handout
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島
Similar a 面向对象的CSS
Aspetos gerais de desenvolvimento web.
Aspetos gerais de desenvolvimento web.
Corcioli
Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)
Jens Grochtdreis
初识 Html5
初识 Html5
Haiyang Yu
再来了解文档回流(Reflow)
再来了解文档回流(Reflow)
EnLei-Cai
Html Frameset
Html Frameset
Ken Abraham Saluta
20 种提升网页速度的技巧
20 种提升网页速度的技巧
wensheng wei
Wordpress avançat
Wordpress avançat
Montserrat Peñarroya
Similar a 面向对象的CSS
(7)
Aspetos gerais de desenvolvimento web.
Aspetos gerais de desenvolvimento web.
Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)
初识 Html5
初识 Html5
再来了解文档回流(Reflow)
再来了解文档回流(Reflow)
Html Frameset
Html Frameset
20 种提升网页速度的技巧
20 种提升网页速度的技巧
Wordpress avançat
Wordpress avançat
面向对象的CSS
1.
面向对象的CSS 财付通
jamiexie Twitter: @treblam Blog: http://jeekundo.com/
2.
Why O,O? 加强代码重用
程序员第一美德:懒惰 DRY (Don’t repeat yourself) 能只做一次的事情绝不做第二次
3.
What? “像是语言的进化,它让CSS更强大” 一种可重用和可维护的CSS书写方式
4.
5.
方便维护
6.
减小CSS体积
7.
提升渲染效率
8.
9.
类 .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>
10.
封装 不要直接定义子节点 .tr
.mod .inner {…} .mod .tr {…} .mod .bl {…} 而不是 .inner {} .tr {} .bl {} .bl .inner
11.
继承 从一般到特殊的过程,把共性声明放到父类中, 把特性声明代码放入到子类中
12.
假如CSS支持继承 在样式表里面声明要扩展的Class .module
{ margin:10px; width:100px; float:left; } .saleModule{ extends: module; font-size:14px; overflow:hidden; } <div class=“saleModule”>… …</div>
13.
而实际情况是 .module {
margin:10px; width:100px; } .saleModule{ font-size:14px; overflow:hidden; float:left; } 通过给根元素设置多个Class来扩展对象,使用多Class来模拟OO <div class=“module saleModule”>… …</div>
14.
Nicole Sullivan: 名称可能使人迷惑
不要把OOCSS和OOP的特性做一对一的比较
15.
两条基本原则 结构和皮肤相分离 容器和内容相分离
16.
结构和皮肤相分离 将结构和皮肤分别交给两个class来控制
17.
控制结构的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等等 多个皮肤重用一种结构,使得复杂的结构可以重用,皮肤的修改工作变得很简单
18.
容器和内容相分离 解除容器和内容之间的依赖关系
19.
<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 {} 后者解除和容器的依赖关系,便于重用, 可以从一个容器转移到任意容器
20.
做页面就像堆积木 先造积木,再建房子
21.
看这个页面片段
22.
分解一下
23.
1个头部 1个评论列表 5个图文混排区
操作链接列表 段落 2个链接样式 6个小对象
24.
我们都知道可以重用的
25.
还不那么明显的
26.
27.
#header .guide {…}
#life-service .bd .service-links {…} #footer a {…} .linkList {…} .linkList a {…}
28.
29.
30.
经验法则: 如果两个模块因为太过相似而不适合在一个页面共存,那么他们也不适合在整个网站共存,二者选其一
31.
降低网站一致性的两个因素: 1.设计师对细节的疏忽 2.代码实现方式不一致
代码越DRY,网站一致性越好
32.
33.
一个对象内的所有子节点必须用这个对象的class名作为开头,比如:.myModule .inner {…}
34.
35.
对象应保持独立性 自己解决自己的问题,而不是让父母出面 <div
class=“mod myModule”>…</div> .mod {…} .myModule{…} <body class=“registerPage”> <div class=“mod”>…</div> </body> .mod {…} .registerPage .mod {…}
36.
37.
无法重用,一个页面只能出现一次
38.
39.
40.
41.
weather和tabs重写默认的h3
42.
h3的三种样式不能在一个模块里面共存
43.
如果不覆盖掉前面定义的样式,默认的h3无法在weather和tabs里面使用
44.
45.
46.
给每个标题设置好默认样式
47.
48.
控制好优先级 class先后顺序与 优先级无关
<div class=“classAclassB”> 样式表中的先后顺序与优先级有关 .classA{color:red;} .classB{color:blue;}
49.
推荐写法 <div class=“media
mediaExt attribution”> .media {…} .mediaExt {…} .attribution {…}
50.
html body .myModulediv
.hd{…} .myModuleExt.hd{…} 保证选择器有相同的权重 用样式表中后出现的覆盖掉前面的 .myModule .hd{…} .myModuleExt.hd{…}
51.
.mod .hd{…} .ie
.mod .hd{…} .weatherMod .hd{…} 有节制地使用hack,不要让hack改变你的权重 .mod .hd{color:red; _zoom:1;} .weatherMod .hd{…}
52.
#weatherMod .hd{…} .myModule
.hd{… !important} 避免使用id和!important 避免团队内的优先级竞赛
53.
54.
优先级根据扩展次数逐层递增注意: IE6:.base.extClass1.extClass2 ==
.extClass2 但如果注意先后顺序,这种写法对IE6是有效的
55.
别忘了群组选择器 群组选择器方式: .high-blue,.high-white
{…} /*共性声明*/ .high-blue {…} /*个性声明*/ .high-white {…} /*个性声明*/ <span class=“high-blue”> <button type=“button”></button> </span> <span class=“high-white”> <button type=“button”></button> </span> OOCSS方式: .high-btn{…} /*共性声明*/ .blue-btn{…} /*个性声明*/ .white-btn{…} /*个性声明*/ <span class=“high-btn blue-btn”> <button type=“button”></button> </span> <span class=“high-btn white-btn”> <button type=“button”></button> </span>
56.
和OOCSS相比,群组选择器的优劣: 只进行一层扩展,扩展类不超过10个且预计不会增加的情况下,可考虑使用群组选择器
57.
对象的状态封装 <div class=“form
instore-form”> … </div> <div class=“form instore-form dh-form”> … </div> <div class=“form instore-form dh-form loading-form”> … </div>
58.
语义化怎么办? OOCSS不是会留下一堆基于表现的Class名?
59.
HTML标签语义化 OOCSS不妨碍HTML标签的语义 但也在语义和可维护性之间做了权衡
60.
<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之后关掉即可
61.
OOCSS会弱化Class命名的语义 OOCSS推荐使用栅格(grid.css) YUI:
.yui-gb .yui-t1 .yui-gc .yui-t2 .yui-gd .yui-t3 OOCSS: .size1of1 .size1of2 .size1of3
62.
基类的命名 .big-input .strong-input
.high-input .number-input .important-input .emphasize-input 共用class的元素往往拥有相似的表现,但是在语义上却很难找到共同点
63.
Class命名的语义化 避免为了语义而语义
64.
Class命名的几个目标: 简短—— 每一个字节都很重要,尽可能简短
清晰—— 根据名称很快就能猜到它是干嘛的 语义—— 对象的外观不重要,重要的是它是什么,它是干嘛的 大众化—— 过于特殊的名字会减少它的应用场景或导致语义化的class以非语义化的方式使用(基类大众化、子类逐渐个性化) 有些目标会互相矛盾,一切在于权衡
65.
总结
66.
OOCSS推荐做法: 1.建立一个组件库 2.使用一致的语义化的样式
3.把模块内部做成透明的 4.灵活一点 5.尝试喜欢栅格 6.减少选择器 7.分离结构和皮肤 8.分离容器和内容 9.通过给元素设置多个Class来扩展对象 10.使用YUI的reset和fonts
67.
9个误区 1.位置相关的样式 2.不要给Class指定标签
3.避免在主内容区内用ID来设置样式 4.避免不规则背景图上的阴影和圆角 5.不要把所有的图片拼在一块(除非你的页面非常少) 6.避免高度对齐 7.文字就是文字,不要做成图片 8.冗余 9.避免过早优化
68.
Q&A
Descargar ahora