SlideShare a Scribd company logo
1 of 29
Css框架
一  oocss 公用作用域: libraries.css-reset template.css—页面框架 grids.css—自适应布局 Content.css—newset概念 项目作用域: Mod.css—模块基类 mod_skins.css—扩展基类 [翻译]OOCSS FAQ:http://www.99css.com/archives/65 [翻译]Object Oriented CSS http://www.99css.com/archives/59
Oocss优势 OOCSS具有双倍的性能优势 1.高度重用的CSS代码,只需要很少的CSS代码 文件更小,传输更快 CSS代码在站点页面中调用的比重增大则有希望被复用或被浏览器缓存 2.就浏览器而言更少的重绘和布局计算 单个页面,CSS规则复用的越多,渲染引擎花在“computed values”的计算时间越少 手动增加的”extending”类,重写更少的规则,这再一次意味着引擎做很少去应用规则 双倍优势?怎么做到的?
重用-分离 容器和内容 宽度分离原则 结构和皮肤分离 轮廓和背景分离
容器和内容区分 区分 1.容器轮廓 2.背景块 3.内容对象   它们之间的关系为1:n的关系 把容器当做一个开放的编辑区 自适应宽度分离原则 宽度为什么分离? 1、不用计算 margin值、padding值和border属性 2、扩展性强,维护方便。
Mod.css-分离结构和皮肤 皮肤包括什么? 颜色、边框、图像
轮廓和背景分离 1.轮廓分离原子元素 圆角 圆角、直角 阴影(范围、颜色、深浅) 轮廓颜色 圆角后的可变或渐变背景处理 (把相关渐变背景写入轮廓中) 2.背景 头部、内容、底部
Object Oriented CSS UML
Oocss缺点 HTTP请求较多 ,[object Object],没有区分“可嵌套”和不可嵌套的模块,没有考虑到模块间的入侵性 作为不可嵌套的模块,才能用.hd .ft这样的类名 基类只有modomplexop三种类型 Mod虽然可以满足所有的表现,但是html节点太多,很多表现根本用不到那么多节点。 Oocss适合用在我们的项目中吗?
其他框架
各个框架的简略介绍 960gs的960 像素栅格布局系统……(大家已经很熟悉,略去)  YUI Grids CSS 提供了四种预设页面宽度,六种预设模板。其中的负 Margin 技术,使用度量单位 em,清除布局浮动等技术非常值得学习和借鉴。相关资料:http://www.planabc.net/2008/05/04/yui_grids_css/ Blueprint 是一款成熟的 CSS 框架,它将布局 (layout)、排版 (typography)、组件 (widget)、重置 (reset)、打印 (print) 等分放到不同的 CSS 文件中。Blueprint的布局也是960栅格布局系统,不过它在命名上面有很大的进步。
BlueTrip是一集成了BluePrint & Tripoli 框架的做好的部分;Hartija的打印样式; 960.gs的简洁;Elements 图标的一个css框架。为你提供一个好用的样式集合和一个制作网站的通用的方法。这样你就可以集中精力搞设计了个。  1KB CSS Grid 网站上提供了一个生成器用来定制 CSS 网格,并且可以直接下载定制好的 CSS 网格。  栅格系统对于比较小型项目是不实用的! 1.设计图往往不按栅格的宽度进行设计。 2.小型项目没必要引用代码量较大的布局文件。 3.但大型项目使用栅格布局能取得相对更少的代码。
无法直接应用CSS框架 1.小型项目栅格化不实用,设计图很多时候不按栅格宽度进行设计。 2.项目太大型,容易出现复杂布局,此时框架满足不了复杂布局的需求。 3.学习成本较高,设计师和重构都要学习规则 4.使用别人编写的框架,总是会落在技术的后面 5.一个站点直接使用他人的框架,放弃对布局的思考、不去分析站点地图提取公共模块。失去对布局的把控能力,这对个人和团队发展是非常不利的! 写符合自己项目的框架吧!
思考 如何提高css掌握能力? cssapi –如何用css控制页面元素内容 Css框架-重点如何对css进行组织 怎么样在项目中节省时间? 有新页面时,如果可以不写样式,就能拼凑出页面。而且还不用担心冗余,不用优化。 如果css框架能应对绝大部分的页面变化,那我们是否觉得轻松很多?
三、cssapi –如何用css控制页面元素内容 文本 定位 字体 背景 常见问题 框模型 hack Css语法 轮廓 列表 选择器 表格
特殊值 ,[object Object]
两个规则的优先度相同,后定义的规则覆盖前面的。
!important可以无视特殊性的存在,把优先度提到最高。
 样式继承的特殊性小于0,0,0,1 。可继承的样式属性 常用继承属性: color 、 text-indent 、text-align 、line-height 、list-style 、list-style-type、list-style-image 、list-style-position、cursor、opacity、font、font-style、font-variant、font-weight、font-size、font-family 不常用继承属性: direction 、text-transform、word-spacing 、white-space 、letter-spacing 、caption-side 、border-spacing 、empty-cells 、border-collapse 、speak-header、page 、speak 、quotes、layout-flow、writing-mode
四、Css框架-重点如何对css进行组织
4.1通过样式作用域划分样式块
4.2模块化-面向对象方法 创建对象 封装-公有、私有 继承-css继承方式有 样式继承 样式组合 样式组合将一个复杂的类分成容易产生变化的部分和相对稳定的部分。将复杂的类拆分成几个简单的类,类之间没有继承关系,容易变化的类的实例赋值给主体类做一个属性,实现组合。 继承:将复杂且包含变化的类,拆分成几个复杂但稳定的子类。 父类有几乎所有方法和属性,子类继承自父类,子类根据新需求添加新方法和属性。---小变化也要重新定义一个类。类爆炸式增长。 多用组合,少用继承
学会划分模块 1避免重复。近似相同的模块提取出来,组合成一个独立模块。 2模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。 3模块的私有部分—类名处理
模块分类 组合继承最大的意义在于可以减少重复的定义 可嵌套的类 不可嵌套的模块不需要考虑内部会有其它模块,所以命名简单一些,甚至可直接用标签命名,不用担心入侵其他模块。 结构 提取皮肤文件分离结构和皮肤 区分 分离skin.css 不可嵌套的类 皮肤
适当注释 @mod-name:标明模块的名称@inherit :标明该所继承的基类模块@type:标明该模块的类型:公共、基类、扩展类 @nest :标明该模块嵌套类型:可嵌套、不可嵌套
4.3样式命名 1.css中是利用长命名(address)好还是短命名好(adr、fl、w100)? 维护性 长命名易于理解 短命名难理解 文件大小、性能——html文件容量与css容量 长命名会增加html的容量,但是css会被缓存。 短命名减少dom结构中class的长度。 长度并不是瓶颈 命名理解也不是瓶颈, 一切都是衡量的问题。 命名这种对系统性能没有影响的东西,制定一个统一的规范,便于大家合作,便于统一风格。
样式命名 2.除了通过模块化抽取公用、重用的模块外,还有什么方法提高 css重用? 分析: 语义其实是对命名的一种束缚,越是语义强烈的命名重用性越不高。名字越普通,越容易被重用。 被层级(#ID .class)、标签(ul.class)限制越多,越抑制CSS的重用性。层级越多,渲染的开销也就越大。 命名方式: 语意化命名:按字面语意进行命名。 功能性命名:按模块功能作用进行命名。 分类式命名:对一种类型模块进行统一前缀命名,模块间的差异使用排序方式。例如(list-s1、list-s2) 面向属性命名:针对样式属性的一种命名方式。例如(.w100{width:100px;}) 那种命名会比较好呢? (时间有限,这里先不做区别与比较。)
面向属性命名 优点: 1. 把样式的重用性放大。 2.避免位置依赖的样式,可以不管页面的位置、内容,随意在页面上摆放。 缺点: 1.重用都过高,使用太随意,难于管理 2.在通用元素上使用,修改时工作量过大。 多个Input框在width属性上变化很大,input框在页面的位置都很随意。 单个元素width属性变动不大 属性命名不方便使用?什么情况下使用属性命名? 当多个元素的某个样式属性变化率很高,而单个元素对该属性的变化不大的情况下。 切记不要对变化不大,但通用率很高的元素使用面向属性命名。
注意规则 CSS的渲染方式是“从右往左”渲染的避免滥用后代选择器 减少不必要的 DOM 层级。 尽量减少 CSS 规则,去除未用到的 CSS。 位置不依赖 复杂的表现变化,用绝对定位或 fixed 定位来完成。 浏览器性能测试资料: http://www.zhangxinxu.com/wordpress/?p=1045  http://www.f2es.com/talk-about-css-performance-again/

More Related Content

What's hot

Intro-to-SeaJS
Intro-to-SeaJSIntro-to-SeaJS
Intro-to-SeaJSlifesinger
 
前端性能测试
前端性能测试前端性能测试
前端性能测试tbmallf2e
 
新浪微博分布式缓存与队列-2013版
新浪微博分布式缓存与队列-2013版新浪微博分布式缓存与队列-2013版
新浪微博分布式缓存与队列-2013版XiaoJun Hong
 
大规模数据库存储方案
大规模数据库存储方案大规模数据库存储方案
大规模数据库存储方案XiaoJun Hong
 
大型系统的缓存标准化之路—从主从多级重client到一体化
大型系统的缓存标准化之路—从主从多级重client到一体化大型系统的缓存标准化之路—从主从多级重client到一体化
大型系统的缓存标准化之路—从主从多级重client到一体化XiaoJun Hong
 
前端性能优化&测试
前端性能优化&测试前端性能优化&测试
前端性能优化&测试tbmallf2e
 
新浪微博Feed服务架构
新浪微博Feed服务架构新浪微博Feed服务架构
新浪微博Feed服务架构XiaoJun Hong
 
标示简写易读器(MarkView) 演示片
标示简写易读器(MarkView) 演示片标示简写易读器(MarkView) 演示片
标示简写易读器(MarkView) 演示片Shane Weng
 
腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨areyouok
 

What's hot (10)

Intro-to-SeaJS
Intro-to-SeaJSIntro-to-SeaJS
Intro-to-SeaJS
 
前端性能测试
前端性能测试前端性能测试
前端性能测试
 
SASS入門實作
SASS入門實作SASS入門實作
SASS入門實作
 
新浪微博分布式缓存与队列-2013版
新浪微博分布式缓存与队列-2013版新浪微博分布式缓存与队列-2013版
新浪微博分布式缓存与队列-2013版
 
大规模数据库存储方案
大规模数据库存储方案大规模数据库存储方案
大规模数据库存储方案
 
大型系统的缓存标准化之路—从主从多级重client到一体化
大型系统的缓存标准化之路—从主从多级重client到一体化大型系统的缓存标准化之路—从主从多级重client到一体化
大型系统的缓存标准化之路—从主从多级重client到一体化
 
前端性能优化&测试
前端性能优化&测试前端性能优化&测试
前端性能优化&测试
 
新浪微博Feed服务架构
新浪微博Feed服务架构新浪微博Feed服务架构
新浪微博Feed服务架构
 
标示简写易读器(MarkView) 演示片
标示简写易读器(MarkView) 演示片标示简写易读器(MarkView) 演示片
标示简写易读器(MarkView) 演示片
 
腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨
 

Viewers also liked

【行銷策略】七大提升廣告效益的實戰祕訣
【行銷策略】七大提升廣告效益的實戰祕訣【行銷策略】七大提升廣告效益的實戰祕訣
【行銷策略】七大提升廣告效益的實戰祕訣周建良 Zhou Jian Liang
 
Keyboard Extension sharing
Keyboard Extension sharingKeyboard Extension sharing
Keyboard Extension sharingGrady Zhuo
 
Mobile web develop
Mobile web developMobile web develop
Mobile web developRandy Jin
 
Varones Launch presentation
Varones Launch presentationVarones Launch presentation
Varones Launch presentationBWG
 
極短篇故事文案寫作 徐苙萍
極短篇故事文案寫作  徐苙萍極短篇故事文案寫作  徐苙萍
極短篇故事文案寫作 徐苙萍Carrie Davalos
 
企業轉型電商的關鍵思維與創新 2015
企業轉型電商的關鍵思維與創新 2015企業轉型電商的關鍵思維與創新 2015
企業轉型電商的關鍵思維與創新 2015Regina Hsueh
 
2015行銷趨勢_精準投資 掌握行銷工具
2015行銷趨勢_精準投資 掌握行銷工具2015行銷趨勢_精準投資 掌握行銷工具
2015行銷趨勢_精準投資 掌握行銷工具Regina Hsueh
 
0508《高收益企業》2
0508《高收益企業》20508《高收益企業》2
0508《高收益企業》2TONI TONG
 
質詢國會改革:國情咨文報告
質詢國會改革:國情咨文報告質詢國會改革:國情咨文報告
質詢國會改革:國情咨文報告毓仁 許
 
行動時代的人脈建立法
行動時代的人脈建立法行動時代的人脈建立法
行動時代的人脈建立法Vista Cheng
 
1050502教育委員會質詢 許毓仁
1050502教育委員會質詢 許毓仁1050502教育委員會質詢 許毓仁
1050502教育委員會質詢 許毓仁毓仁 許
 
《快樂的15個習慣》
《快樂的15個習慣》《快樂的15個習慣》
《快樂的15個習慣》TONI TONG
 
說明會 Letron 500
說明會 Letron 500說明會 Letron 500
說明會 Letron 500Aiken Lin
 
Letron Quick Installation Guide (Chinese)
Letron Quick Installation Guide (Chinese)Letron Quick Installation Guide (Chinese)
Letron Quick Installation Guide (Chinese)Aiken Lin
 
WatchKit 初探
WatchKit 初探WatchKit 初探
WatchKit 初探Grady Zhuo
 
Rainnie的自我介紹
Rainnie的自我介紹Rainnie的自我介紹
Rainnie的自我介紹BWG
 

Viewers also liked (20)

【行銷策略】七大提升廣告效益的實戰祕訣
【行銷策略】七大提升廣告效益的實戰祕訣【行銷策略】七大提升廣告效益的實戰祕訣
【行銷策略】七大提升廣告效益的實戰祕訣
 
Watch os 2.0
Watch os 2.0Watch os 2.0
Watch os 2.0
 
HTML5
HTML5HTML5
HTML5
 
Keyboard Extension sharing
Keyboard Extension sharingKeyboard Extension sharing
Keyboard Extension sharing
 
Mobile web develop
Mobile web developMobile web develop
Mobile web develop
 
招商簡報 0905
招商簡報 0905招商簡報 0905
招商簡報 0905
 
Varones Launch presentation
Varones Launch presentationVarones Launch presentation
Varones Launch presentation
 
極短篇故事文案寫作 徐苙萍
極短篇故事文案寫作  徐苙萍極短篇故事文案寫作  徐苙萍
極短篇故事文案寫作 徐苙萍
 
Apple tree
Apple treeApple tree
Apple tree
 
企業轉型電商的關鍵思維與創新 2015
企業轉型電商的關鍵思維與創新 2015企業轉型電商的關鍵思維與創新 2015
企業轉型電商的關鍵思維與創新 2015
 
2015行銷趨勢_精準投資 掌握行銷工具
2015行銷趨勢_精準投資 掌握行銷工具2015行銷趨勢_精準投資 掌握行銷工具
2015行銷趨勢_精準投資 掌握行銷工具
 
0508《高收益企業》2
0508《高收益企業》20508《高收益企業》2
0508《高收益企業》2
 
質詢國會改革:國情咨文報告
質詢國會改革:國情咨文報告質詢國會改革:國情咨文報告
質詢國會改革:國情咨文報告
 
行動時代的人脈建立法
行動時代的人脈建立法行動時代的人脈建立法
行動時代的人脈建立法
 
1050502教育委員會質詢 許毓仁
1050502教育委員會質詢 許毓仁1050502教育委員會質詢 許毓仁
1050502教育委員會質詢 許毓仁
 
《快樂的15個習慣》
《快樂的15個習慣》《快樂的15個習慣》
《快樂的15個習慣》
 
說明會 Letron 500
說明會 Letron 500說明會 Letron 500
說明會 Letron 500
 
Letron Quick Installation Guide (Chinese)
Letron Quick Installation Guide (Chinese)Letron Quick Installation Guide (Chinese)
Letron Quick Installation Guide (Chinese)
 
WatchKit 初探
WatchKit 初探WatchKit 初探
WatchKit 初探
 
Rainnie的自我介紹
Rainnie的自我介紹Rainnie的自我介紹
Rainnie的自我介紹
 

Similar to Oocss

SASS 入門
SASS 入門SASS 入門
SASS 入門Kero Yu
 
現代化網頁基礎排版技術
現代化網頁基礎排版技術現代化網頁基礎排版技術
現代化網頁基礎排版技術洧杰 廖
 
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServBen Lue
 
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享wantingj
 
Alice库构建
Alice库构建Alice库构建
Alice库构建Sofish Lin
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)Joseph Chiang
 
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop洧杰 廖
 
一淘新首页总结
一淘新首页总结一淘新首页总结
一淘新首页总结jieorlin
 
Css3.0 Manual项目分享会
Css3.0 Manual项目分享会Css3.0 Manual项目分享会
Css3.0 Manual项目分享会jeannewoo
 
第11章
第11章第11章
第11章paoapao
 
如何提高网站性能之Css篇
如何提高网站性能之Css篇如何提高网站性能之Css篇
如何提高网站性能之Css篇2010felicia
 
Fitness Club 範例網站建置
Fitness Club 範例網站建置Fitness Club 範例網站建置
Fitness Club 範例網站建置Molly Lin
 
調配網站的明星花露水
調配網站的明星花露水調配網站的明星花露水
調配網站的明星花露水Anna Su
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染Ailsa126
 
教網部落格模版設計
教網部落格模版設計教網部落格模版設計
教網部落格模版設計rainlan
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Jollen Chen
 

Similar to Oocss (20)

SASS 入門
SASS 入門SASS 入門
SASS 入門
 
現代化網頁基礎排版技術
現代化網頁基礎排版技術現代化網頁基礎排版技術
現代化網頁基礎排版技術
 
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServ
 
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
 
Alice库构建
Alice库构建Alice库构建
Alice库构建
 
Alice v3
Alice v3Alice v3
Alice v3
 
Css布局
Css布局Css布局
Css布局
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop
 
一淘新首页总结
一淘新首页总结一淘新首页总结
一淘新首页总结
 
Css3.0 Manual项目分享会
Css3.0 Manual项目分享会Css3.0 Manual项目分享会
Css3.0 Manual项目分享会
 
第11章
第11章第11章
第11章
 
如何提高网站性能之Css篇
如何提高网站性能之Css篇如何提高网站性能之Css篇
如何提高网站性能之Css篇
 
Fitness Club 範例網站建置
Fitness Club 範例網站建置Fitness Club 範例網站建置
Fitness Club 範例網站建置
 
調配網站的明星花露水
調配網站的明星花露水調配網站的明星花露水
調配網站的明星花露水
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
 
前端总结
前端总结前端总结
前端总结
 
教網部落格模版設計
教網部落格模版設計教網部落格模版設計
教網部落格模版設計
 
S_E_O
S_E_OS_E_O
S_E_O
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
 

Oocss