重构经验分享

重构经验分享 医网技术部陈俊勇 2012-03-20

你：你在公司是做什么的？ 我：哦，网页设计师~~ 你：那帮我设计一个xxx吧~~ 我：噢，我不做设计的~~ 你：那你又叫网页设计师~~ 我：…… 我：好吧，我现在是前端开发~~ 他：那你帮我开发一个小小的功能吧~ 我：可我不会那些后台开发语言~~ 他：那你又叫开发~~ 我：…… 我：好吧，简单点，我算是页面制作的吧~~ 你：哦？那不是美工做的吗？我：那是设计师，不叫美工~~ 你：那还不是一样，你到底是做什么的？我：好吧，直接点，我写div + css的~ 你：哦，原来是写div + css的，早说嘛~~这个，我懂！我：……

HTML是用来结构化文档 (M) CSS是用来实现内容的视觉效果 (V) JavaScript是用来实现用户的交互行为 (C)

该是什么就用什么

关注结构设计 关注语义理解block、inline、inline-block 理解嵌套考虑可访问性、扩展性、复用性

通用文档结构：h1~h6、p 强调： strong、em 引用或者参考：blockquote, q, cite 表格：table(tr, th, th, tbody, colgroup……) 表单：form, fieldset, length, label, input, select, textarea, button 列表：ul(li), ol(li), dl(dt, dd) 媒体：img, object 程序：pre, code, var 通用容器：div, span

仅仅是display:block、inline、inline-block就够了吗？仅仅是display:block、inline、inline-block就够了吗？块格式化上下文( Block formatting context ) 行内格式化上下文( Inline formatting context ) hasLayout

block与block或inline之间的嵌套 • Inline与inline之间的嵌套 • 必须组合使用的标签之间的嵌套

HTML是用来结构化文档 (M) CSS是用来实现内容的视觉效果 (V) JavaScript是用来实现用户的交互行为 (C)

CSS： Cascading Style Sheets • CSS用来做什么：用来描述界面如何呈现，实现丰富的排版和布局 • CSS Hack • CSS3：更丰富的布局、更精致的UI表现、更生动的动画 • LESS、JSS、SASS……

层叠样式表（英语：Cascading Style Sheets，简写CSS）， • 由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。 • 目前最新版本是CSS2.1，为W3C的候选推荐标准。CSS3现在已被大部分现代浏览器支援，而下一版的CSS4仍在开发过程中。

叠层和继承 • 优先级 • 性能 • 盒子模型 • 格式化 • 布局方式

property:value; /* 所有浏览器 */ • property:value\9; /* 所有IE浏览器 */ • Property:value!important; • +property:value; /* IE6、IE7 */ • *property:value; /* IE6、IE7 */ • _property:value; /* IE6 */ • -webkit- /* chrome、Safari */ • -khtml- /* chrome、Safari */ • -moz- /* Firefox */ • -ms- /* MSIE */ • -o- /* Opera */

圆角 border-radius • 阴影 box-shadow • 文字阴影 text-shadow • 变形 transform • 进渡 transition • 渐变 gradient • 动画 animation • 选择器 • :first-child、:only-child、:nth-child(n)、:nth-last-child(n)、 • :first-of-type、:last-of-type、:only-of-type、:nth-of-type(n)、:nth-last-of-type(n)

能干这么多事，还有其它的吗？……

OOCSS

HTML5/CSS3

响应式设计 http://mediaqueri.es/

结束了 ？？性能优化、SEO、数据化运营

这回真的是结束了~ 谢谢~

重构经验分享

重构经验分享

Presentation Transcript