Oocss

一 oocss公用作用域：libraries.css-resettemplate.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.背景头部、内容、底部

Oocss缺点HTTP请求较多类命名都太短，掩饰了其本质的复杂性没有区分“可嵌套”和不可嵌套的模块，没有考虑到模块间的入侵性作为不可嵌套的模块，才能用.hd .ft这样的类名基类只有mod\complex\pop三种类型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控制页面元素内容文本定位字体背景常见问题框模型hackCss语法轮廓列表选择器表格

特殊值特殊性值 = (行内style)*1000+(ID选择器数量)*100+(类、伪类、属性选择器数量)*10+（类型、通配选择器数量）*1 。

两个规则的优先度相同，后定义的规则覆盖前面的。

!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/

Oocss

More Related Content

What's hot

Viewers also liked

Similar to Oocss

Oocss