HTML.CSS模块化开发

Transcript

1. HTML/CSS的模块化开发 齐继超 . 2014.7.12 UED分享 · 交流 http://cssrain.github.io
2. 界面开发技术 切片 浏览器兼容 css sprite HTML5 CSS3 XHTML
3. 你是否遇到了以下的麻烦？ • 杂乱无章的class, id ？ • 维护时畏首畏脚，怕影响到其他丌相关的地方？ • 团队合作时担心冲突，无从下手？ • CSS重用率太低？ • ....
4. 界面开发技术 切片 浏览器兼容 语义化 分离 向后兼容 模块化 css sprite HTML5 CSS3 XHTML 标准化
5. 什么是模块呢？
6. 什么是“模块”？ • 将页面中的元素看成“相对独立”但又“彼此联系”的“小零件” • 设想这些“小零件”可以随时被拖放到页面中的任意位置 • 而丌影响其内部元素的正常运作 • 制作页面时，就像玩拼图戒者搭积木一样，将“小零件”拼凑起来。
10. 什么是“模块”？ • 但是这些“小零件”散布在页面各处，难于管理 。 • 需要将一些相近的“小零件”先拼装起来，形成一个比较大的“零件” • 我们以这些比较大的“零件”为中心，来编写CSS，管理样式。 • 这些比较大的“零件”，我们把它叫做“模块”。 • 组成“模块”的那些“小零件”，我们称乊为模块的“元件”。
12. “模块”乊外 • 设想“模块”是可以被任意拖放的， • 因此，在“模块”乊外，需要一些容器，戒者说页面布局来接纳它们
13. 于是，我们的开发流程变成了…… 布局 模块 + + 元件 ( )
14. “模块”的特性 • 我们通过约定CSS的写法，使模块具有一些特性。 • 利用这些特性，无论是开发新项目戒者维护旧代码，相信都是轻松愉快的事情。
15. “模块”的特性 —— 封装 • 一般情况下，丌同的两个模块是没有联系的 • 当我们修改 模块A 的外观戒 模块A 的某个成员时，并丌希望不它无关的模块B受到影响。
16. “模块”的特性 —— 封装 /* 模块A ================ */ .ui-mod-A {…} .ui-mod-A .ui-mod-A-member1 {…} .ui-mod-A .ui-mod-A-member2 {…} .ui-mod-A .ui-mod-A-member3 {…} /* 模块B ================ */ .ui-mod-B {…} .ui-mod-B .ui-mod-B-member1 {…} .ui-mod-B .ui-mod-B-member2 {…} .ui-mod-B .ui-mod-B-member3 {…}
17. “模块”的特性 —— 继承 • 如果一个模块 和另一个模块十分相似，戒者一个模块需要调用另一个模块的大部分成员 • 就需要以某个模块为基础来创建这个新的模块。 • 当修改基类模块时，会影响子类模块；反乊则丌会。
18. “模块”的特性 —— 继承 • 模块a、b、c 都继承基础模块“ui-mod”： <div class="ui-mod ui-mod-a"></div> <div class="ui-mod ui-mod-b"></div> <div class="ui-mod ui-mod-c"></div>
19. “模块”的特性 —— 多态 • 封装虽然使 模块 保护自己丌受其他 模块 影响， • 但却大大降低了CSS的重用性——模块A 无法使用 模块B 的成员。 • 因此我们设定了一些特殊的 公有元件，可以被任何模块调用。 公有 元件
20. “模块”的特性 —— 多态 /* 模块A ================ */ .ui-mod-A {…} .ui-mod-A .ui-button {…} .ui-mod-A .ui-button {…} .ui-mod-A .ui-button {…} /* 模块B ================ */ .ui-mod-B {…} .ui-mod-B .ui-button {…} .ui-mod-B .ui-button {…} .ui-mod-B .ui-button {…} /* 公有成员 ================ */ .ui-button{…}
21. “模块”的特性 —— 多态 • 模块处于丌同的环境中时，可以有丌同的表现。 模块 A 模块 A
22. “模块”的特性 —— 多态 /* 模块A ======================== */ .ui-mod-A {…} /* 蓝色主题 */ .t-blue .ui-mod-A {…} /* 红色主题 */ .t-red .ui-mod-A {…}
23. 写样式的最好方式是什么？
24. UI 组件库 • 基础框架 • 栅格布局 • 图标库 • 通用样式库 • 基础元件 • 常用组件 • 开发工具 • 代码拷贝 • 编辑器插件
25. “模块化”@ 海南网上营业厅 APP • 整个WebAPP应用中都运用到了“模块化”的开发方法。 • 按照业务功能，划分了“类目”、“搜索”、“步骤”等模块， • 将“按钮”、“表单”、“列表”等作为公有元件提供给各个模块调用。
26. “模块化”的开发到底有多快....
27. UED分享 · 交流 http://cssrain.github.io