Css框架<br />
一  oocss<br />公用作用域:<br />libraries.css-reset<br />template.css—页面框架<br />grids.css—自适应布局<br />Content.css—newset概念<br />项...
Oocss优势<br />OOCSS具有双倍的性能优势<br />1.高度重用的CSS代码,只需要很少的CSS代码<br />文件更小,传输更快<br />CSS代码在站点页面中调用的比重增大则有希望被复用或被浏览器缓存<br />2.就浏览器...
重用-分离<br />容器和内容<br />宽度分离原则<br />结构和皮肤分离<br />轮廓和背景分离<br />
容器和内容区分<br />区分<br />1.容器轮廓<br />2.背景块<br />3.内容对象  <br />它们之间的关系为1:n的关系<br />把容器当做一个开放的编辑区<br />自适应宽度分离原则<br />宽度为什么分离?<b...
Mod.css-分离结构和皮肤<br />皮肤包括什么?<br />颜色、边框、图像<br />
轮廓和背景分离<br />1.轮廓分离原子元素<br />圆角<br />圆角、直角<br />阴影(范围、颜色、深浅)<br />轮廓颜色<br />圆角后的可变或渐变背景处理<br />(把相关渐变背景写入轮廓中)<br />2.背景<br...
Object Oriented CSS UML<br />
Oocss缺点<br />HTTP请求较多<br /><ul><li>类命名都太短,掩饰了其本质的复杂性</li></ul>没有区分“可嵌套”和不可嵌套的模块,没有考虑到模块间的入侵性<br />作为不可嵌套的模块,才能用.hd .ft这样的类...
其他框架<br />
各个框架的简略介绍<br />960gs的960 像素栅格布局系统……(大家已经很熟悉,略去) <br />YUI Grids CSS 提供了四种预设页面宽度,六种预设模板。其中的负 Margin 技术,使用度量单位 em,清除布局浮动等技术非...
BlueTrip是一集成了BluePrint & Tripoli 框架的做好的部分;Hartija的打印样式; 960.gs的简洁;Elements 图标的一个css框架。为你提供一个好用的样式集合和一个制作网站的通用的方法。这样你就可以集中精...
无法直接应用CSS框架<br />1.小型项目栅格化不实用,设计图很多时候不按栅格宽度进行设计。<br />2.项目太大型,容易出现复杂布局,此时框架满足不了复杂布局的需求。<br />3.学习成本较高,设计师和重构都要学习规则<br />4....
思考<br />如何提高css掌握能力?<br />cssapi –如何用css控制页面元素内容<br />Css框架-重点如何对css进行组织<br />怎么样在项目中节省时间?<br />有新页面时,如果可以不写样式,就能拼凑出页面。而且还...
三、cssapi –如何用css控制页面元素内容<br />文本<br />定位<br />字体<br />背景<br />常见问题<br />框模型<br />hack<br />Css语法<br />轮廓<br />列表<br />选择器<...
特殊值<br /><ul><li> 特殊性值 =  (行内style)*1000+(ID选择器数量)*100+(类、伪类、属性选择器数量)*10+(类型、通配选择器数量)*1 。
两个规则的优先度相同,后定义的规则覆盖前面的。
!important可以无视特殊性的存在,把优先度提到最高。
 样式继承的特殊性小于0,0,0,1 。</li></ul>可继承的样式属性<br />常用继承属性:<br />color 、 text-indent 、text-align 、line-height 、list-style 、list-st...
四、Css框架-重点如何对css进行组织<br />
4.1通过样式作用域划分样式块<br />
4.2模块化-面向对象方法<br />创建对象<br />封装-公有、私有<br />继承-css继承方式有<br />样式继承<br />样式组合<br />样式组合将一个复杂的类分成容易产生变化的部分和相对稳定的部分。将复杂的类拆分成几个简...
学会划分模块<br />1避免重复。近似相同的模块提取出来,组合成一个独立模块。<br />2模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。<br />3模块的私有部分—类名处理<br />
模块分类<br />组合继承最大的意义在于可以减少重复的定义<br />可嵌套的类<br />不可嵌套的模块不需要考虑内部会有其它模块,所以命名简单一些,甚至可直接用标签命名,不用担心入侵其他模块。<br />结构<br />提取皮肤文件分离结...
适当注释<br />@mod-name:标明模块的名称@inherit :标明该所继承的基类模块@type:标明该模块的类型:公共、基类、扩展类<br />@nest :标明该模块嵌套类型:可嵌套、不可嵌套<br />
4.3样式命名<br />1.css中是利用长命名(address)好还是短命名好(adr、fl、w100)?<br />维护性<br />长命名易于理解<br />短命名难理解<br />文件大小、性能——html文件容量与css容量<br ...
样式命名<br />2.除了通过模块化抽取公用、重用的模块外,还有什么方法提高 css重用?<br />分析:<br />语义其实是对命名的一种束缚,越是语义强烈的命名重用性越不高。名字越普通,越容易被重用。<br />被层级(#ID .cla...
面向属性命名<br />优点:<br />1. 把样式的重用性放大。<br />2.避免位置依赖的样式,可以不管页面的位置、内容,随意在页面上摆放。<br />缺点:<br />1.重用都过高,使用太随意,难于管理<br />2.在通用元素上使...
注意规则<br />CSS的渲染方式是“从右往左”渲染的避免滥用后代选择器<br />减少不必要的 DOM 层级。<br />尽量减少 CSS 规则,去除未用到的 CSS。<br />位置不依赖<br />复杂的表现变化,用绝对定位或 fixe...
Upcoming SlideShare
Loading in …5
×

Oocss

1,536
-1

Published on

oocss

Published in: Technology, Education
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,536
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Oocss

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

×