孙极模块化的(X)html&css开发

模块化的 (x)HTML&CSS开发网易邮箱前端技术中心 / 孙极

2010年 Webrebuild年会广州站

模块化的 (x)HTML&CSS开发 NetEase Mail FETC

CSS3HTML5

XHTML切片

我是分隔线！

语义化

DOM

CSS Sprite

分离

浏览器兼容

图片优化

模块化

Me！渲染效率


你是否遇到了以下的麻烦？

杂乱无章的 class、 id？

维护时畏手畏脚，怕影响到其他不相关的地方？

团队合作时担心冲突，无从下手？

CSS重用率太低？

… …


“ ”什么是模块化？


“ ”什么是模块？

“ ” “ ” “ ”将页面中的元素看成相对独立但又彼此联系的小零件，

“ ”设想这些小零件可以随时被拖放到页面中的任意位置，

“ ”制作页面时，就像玩拼图或者搭积木一样，将小零件拼凑起来。

而不影响其内部元素的正常运作。





“ ”什么是模块？

“ ” 这些小零件散布在页面各处，难于管理。

“ ” “ ”因此，需要将一些相近的小零件先拼装起来，形成一个比较大的零件，

… …但是

“ ”我们以这些比较大的零件为中心，来编写CSS，管理样式。

“ ” “这些比较大的零件，我们把它叫做模块”。

“ ” “ ” “组成模块的那些小零件，我们称之为模块的成员”。


模块 .mod

塞进去 ~


“ ”模块之外

“ ”我们设想模块是可以被任意拖放的，

“ ”因此，在模块之外，需要一些容器来接纳它们，

“ ”我们设定了一些小零件作为页面的框架，并简单地设置浮动和宽度实现布局。


模块 A

模块 B

再塞 ~


… …于是，我们的开发流程变成了

我在这儿！

布局模块+ + 成员( )


“ ”模块的特性

我们通过约定CSS的写法，使模块具有一些特性。

利用这些特性，无论是开发新项目或者维护旧代码，都是轻松愉快的事情。


“ ” —— 模块的特性封装

一般情况下，不同的两个模块是没有联系的，

当我们修改模块A的外观或模块A的某个成员时，并不希望与它无关的模块B受到影响。

模块 A 模块 B



/* 模块A================ */

.mod-A {… }

.mod-A .member1 {… }



/* 模块B================ */

.mod-B {… }

.mod-B .member1 {… }





这样做虽然可以使模块保护自己不受其他模块影响，

却大大的降低了CSS ——的重用性模块A无法使用模块B的成员。

因此我们设定了一些特殊的公有成员，它们不属于某个模块特有，可以被任何模块调用。

模块 A 模块 B

公有成员



/* 模块A================ */

.mod-A {… }



.mod-A .g-member {… }

/* 模块B================ */

.mod-B {… }



.mod-B .g-member {… }

/* 公有成员================ */

.g-member {… }


“ ” —— 模块的特性继承

如果一个模块和另一个模块十分相似，或者一个模块需要调用另一个模块的大部分成员，

就需要以某个模块为基础来创建这个新的模块。

模块 A

模块 a

模块 b

模块 c

当修改基类模块时，会影响子类模块；反之则不会。



模块 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”>



/* 模块A======================== */

.mod-A {… }



/* 模块 a======================== */

.mod-A-a {… }

.mod-A-a .member1 {… }


“ ” —— 模块的特性？


“ ” —— 模块的特性多态

模块处于不同的环境中时，可以有不同的表现。



模块 A 模块 A



/* 模块A======================== */

.mod-A {… }

/* 出现在主栏时 */

.part-main .mod-A {… }

/* 出现在侧栏时 */

.part-sec .mod-A {… }


… …其实

不只是模块 “ ”，所有的小零件都具备这些特性。

因为模块 “ ” 本身也是小零件的一种嘛 ╮ ( ) ╯▽ ╰ ╭ 。



/* 公有成员======================== */

.g-member {color:#000}

/* 模块A======================== */

.mod-A .g-member {color:#F00}

/* 模块B======================== */

.mod-B . g-member {color:#00F}


“ ”模块化 @ 网易邮箱

“ ”网易邮箱在邮箱界面、活动页面都运用到了模块化的开发方法。

在邮箱极速 3.5版本中，

“我们按照邮箱功能，划分了写信” “、读信” “、收件箱”等模块，

“将按钮” “、工具栏” “、下拉菜单”等作为公有成员提供给各个模块调用。




图标调用：

<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:… ; } …




图标调用：

<span class=“ ico ico- flag ico- flag-1 ”></span>

/* 我写的模块======================== */.mod-me .ico- flag { position:absolute; … }

/* 你写的模块======================== */.mod-you .ico- flag { margin-right:5px; … }


演示Classtyle Builder

“ ”模块化的开发可以有多快？


谢谢！

Technology

孙极 模块化的(X)html&css开发

孙极模块化的(X)html&css开发