Oocss
- 2. 一 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
- 5. 容器和内容区分 区分 1.容器轮廓 2.背景块 3.内容对象 它们之间的关系为1:n的关系 把容器当做一个开放的编辑区 自适应宽度分离原则 宽度为什么分离? 1、不用计算 margin值、padding值和border属性 2、扩展性强,维护方便。
- 11. 各个框架的简略介绍 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栅格布局系统,不过它在命名上面有很大的进步。
- 12. BlueTrip是一集成了BluePrint & Tripoli 框架的做好的部分;Hartija的打印样式; 960.gs的简洁;Elements 图标的一个css框架。为你提供一个好用的样式集合和一个制作网站的通用的方法。这样你就可以集中精力搞设计了个。 1KB CSS Grid 网站上提供了一个生成器用来定制 CSS 网格,并且可以直接下载定制好的 CSS 网格。 栅格系统对于比较小型项目是不实用的! 1.设计图往往不按栅格的宽度进行设计。 2.小型项目没必要引用代码量较大的布局文件。 3.但大型项目使用栅格布局能取得相对更少的代码。
- 14. 思考 如何提高css掌握能力? cssapi –如何用css控制页面元素内容 Css框架-重点如何对css进行组织 怎么样在项目中节省时间? 有新页面时,如果可以不写样式,就能拼凑出页面。而且还不用担心冗余,不用优化。 如果css框架能应对绝大部分的页面变化,那我们是否觉得轻松很多?
- 19. 样式继承的特殊性小于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
- 22. 4.2模块化-面向对象方法 创建对象 封装-公有、私有 继承-css继承方式有 样式继承 样式组合 样式组合将一个复杂的类分成容易产生变化的部分和相对稳定的部分。将复杂的类拆分成几个简单的类,类之间没有继承关系,容易变化的类的实例赋值给主体类做一个属性,实现组合。 继承:将复杂且包含变化的类,拆分成几个复杂但稳定的子类。 父类有几乎所有方法和属性,子类继承自父类,子类根据新需求添加新方法和属性。---小变化也要重新定义一个类。类爆炸式增长。 多用组合,少用继承
- 27. 样式命名 2.除了通过模块化抽取公用、重用的模块外,还有什么方法提高 css重用? 分析: 语义其实是对命名的一种束缚,越是语义强烈的命名重用性越不高。名字越普通,越容易被重用。 被层级(#ID .class)、标签(ul.class)限制越多,越抑制CSS的重用性。层级越多,渲染的开销也就越大。 命名方式: 语意化命名:按字面语意进行命名。 功能性命名:按模块功能作用进行命名。 分类式命名:对一种类型模块进行统一前缀命名,模块间的差异使用排序方式。例如(list-s1、list-s2) 面向属性命名:针对样式属性的一种命名方式。例如(.w100{width:100px;}) 那种命名会比较好呢? (时间有限,这里先不做区别与比较。)
- 28. 面向属性命名 优点: 1. 把样式的重用性放大。 2.避免位置依赖的样式,可以不管页面的位置、内容,随意在页面上摆放。 缺点: 1.重用都过高,使用太随意,难于管理 2.在通用元素上使用,修改时工作量过大。 多个Input框在width属性上变化很大,input框在页面的位置都很随意。 单个元素width属性变动不大 属性命名不方便使用?什么情况下使用属性命名? 当多个元素的某个样式属性变化率很高,而单个元素对该属性的变化不大的情况下。 切记不要对变化不大,但通用率很高的元素使用面向属性命名。
- 29. 注意规则 CSS的渲染方式是“从右往左”渲染的避免滥用后代选择器 减少不必要的 DOM 层级。 尽量减少 CSS 规则,去除未用到的 CSS。 位置不依赖 复杂的表现变化,用绝对定位或 fixed 定位来完成。 浏览器性能测试资料: http://www.zhangxinxu.com/wordpress/?p=1045 http://www.f2es.com/talk-about-css-performance-again/