孙极 模块化的(X)html&css开发
-
Upload
czbad -
Category
Technology
-
view
3.182 -
download
0
description
Transcript of 孙极 模块化的(X)html&css开发
模块化的 (x)HTML&CSS开发 网易邮箱前端技术中心 / 孙极
2010年 Webrebuild年会广州站
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
CSS3HTML5
XHTML切片
我是分隔线!
语义化
DOM
CSS Sprite
分离
浏览器兼容
图片优化
模块化
Me!渲染效率
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
你是否遇到了以下的麻烦?
杂乱无章的 class、 id?
维护时畏手畏脚,怕影响到其他不相关的地方?
团队合作时担心冲突,无从下手?
CSS重用率太低?
… …
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ”什么是 模块化 ?
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ”什么是 模块 ?
“ ” “ ” “ ”将页面中的元素看成 相对独立 但又 彼此联系 的 小零件 ,
“ ”设想这些 小零件 可以随时被拖放到页面中的任意位置,
“ ”制作页面时,就像玩拼图或者搭积木一样,将 小零件 拼凑起来。
而不影响其内部元素的正常运作。
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ”什么是 模块 ?
“ ” 这些 小零件 散布在页面各处,难于管理 。
“ ” “ ”因此,需要将一些相近的 小零件 先拼装起来,形成一个比较大的 零件 ,
… …但是
“ ”我们以这些比较大的 零件 为中心,来编写CSS,管理样式。
“ ” “这些比较大的 零件 ,我们把它叫做 模块”。
“ ” “ ” “组成 模块 的那些 小零件 ,我们称之为模块的 成员”。
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
模块 .mod
塞进去 ~
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ”模块 之外
“ ”我们设想 模块 是可以被任意拖放的,
“ ”因此,在 模块 之外,需要一些容器来接纳它们,
“ ”我们设定了一些 小零件 作为页面的框架,并简单地设置浮动和宽度实现布局。
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
模块 A
模块 B
再塞 ~
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
… …于是,我们的开发流程变成了
我在这儿!
布局 模块+ + 成员( )
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ”模块 的特性
我们通过约定CSS的写法,使模块具有一些特性。
利用这些特性,无论是开发新项目或者维护旧代码,都是轻松愉快的事情。
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ” —— 模块 的特性 封装
一般情况下,不同的两个模块是没有联系的,
当我们修改模块A的外观或模块A的某个成员时,并不希望与它无关的模块B受到影响。
模块 A 模块 B
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ” —— 模块 的特性 封装
/* 模块A================ */
.mod-A {… }
.mod-A .member1 {… }
.mod-A .member2 {… }
.mod-A .member3 {… }
/* 模块B================ */
.mod-B {… }
.mod-B .member1 {… }
.mod-B .member2 {… }
.mod-B .member3 {… }
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ” —— 模块 的特性 封装
这样做虽然可以使模块保护自己不受其他模块影响,
却大大的降低了CSS ——的重用性 模块A无法使用模块B的成员。
因此我们设定了一些特殊的公有成员,它们不属于某个模块特有,可以被任何模块调用。
模块 A 模块 B
公有成员
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ” —— 模块 的特性 封装
/* 模块A================ */
.mod-A {… }
.mod-A .member1 {… }
.mod-A .member2 {… }
.mod-A .g-member {… }
/* 模块B================ */
.mod-B {… }
.mod-B .member1 {… }
.mod-B .member2 {… }
.mod-B .g-member {… }
/* 公有成员================ */
.g-member {… }
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ” —— 模块 的特性 继承
如果一个模块和另一个模块十分相似,或者一个模块需要调用另一个模块的大部分成员,
就需要以某个模块为基础来创建这个新的模块。
模块 A
模块 a
模块 b
模块 c
当修改基类模块时,会影响子类模块;反之则不会。
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ” —— 模块 的特性 继承
模块 a、 b、 c继承模块A , 而所有模块 “都继承基础模块 mod”:
<div class=“mod mod-A mod-A-a”>
<div class=“mod mod-A mod-A-b”>
<div class=“mod mod-A mod-A-c”>
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ” —— 模块 的特性 继承
/* 模块A======================== */
.mod-A {… }
.mod-A .member1 {… }
.mod-A .member2 {… }
/* 模块 a======================== */
.mod-A-a {… }
.mod-A-a .member1 {… }
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ” —— 模块 的特性 ?
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ” —— 模块 的特性 多态
模块处于不同的环境中时,可以有不同的表现。
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ” —— 模块 的特性 多态
模块 A 模块 A
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ” —— 模块 的特性 多态
/* 模块A======================== */
.mod-A {… }
/* 出现在主栏时 */
.part-main .mod-A {… }
/* 出现在侧栏时 */
.part-sec .mod-A {… }
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
… …其实
不只是模块 “ ”,所有的 小零件 都具备这些特性。
因为模块 “ ” 本身也是 小零件 的一种嘛 ╮ ( ) ╯▽ ╰ ╭ 。
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ” —— 模块 的特性 多态
/* 公有成员======================== */
.g-member {color:#000}
/* 模块A======================== */
.mod-A .g-member {color:#F00}
/* 模块B======================== */
.mod-B . g-member {color:#00F}
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ”模块化 @ 网易邮箱
“ ”网易邮箱在邮箱界面、活动页面都运用到了 模块化 的开发方法。
在邮箱极速 3.5版本中,
“我们按照邮箱功能,划分了 写信” “、 读信” “、 收件箱”等模块,
“将 按钮” “、 工具栏” “、 下拉菜单”等作为公有成员提供给各个模块调用。
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ”模块化 @ 网易邮箱
“ ”网易邮箱在邮箱界面、活动页面都运用到了 模块化 的开发方法。
图标调用:
<span class=“ ico ico- flag ico- flag-1 ”></span>
.ico { background:url(… ); display:inline-block; … }
.ico- flag { width:16px; height:16px; … }
.ico- flag-1 { background-position:… ; } .ico- flag-2 { background-position:… ; } .ico- flag-3 { background-position:… ; } .ico- flag-4 { background-position:… ; } …
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
“ ”模块化 @ 网易邮箱
“ ”网易邮箱在邮箱界面、活动页面都运用到了 模块化 的开发方法。
图标调用:
<span class=“ ico ico- flag ico- flag-1 ”></span>
/* 我写的模块======================== */.mod-me .ico- flag { position:absolute; … }
/* 你写的模块======================== */.mod-you .ico- flag { margin-right:5px; … }
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
演示Classtyle Builder
“ ”模块化 的开发可以有多快?
模块化的 (x)HTML&CSS开发 NetEase Mail FETC
谢谢!