基于web的展现方式,其根本原理是html+css!javascript只是作为一种改变Html结构和css属性的手段.
遵循web标准的网页设计,基本的原则是:html决定结构,而css负责显示,而javascript则改变这两者.
      
UI组件外观设计目标:
      设计开发基于组件化模型的UI时,在UI外观设计上的一个要点是:保持UI组件的外观独立性.如:Menu可以加入不同的MenuItem,形成一个满足需求的菜单,这里组成MenuItem的html不能受到Menu的外观样式影响.
      在一般的网页设计中,通常有这样的样式定义:div{...},.menu span{...}...等.这两个样式定义具有一个特性,就是"泛样式化"!.如div{...}这样定义把网页中所有的div元素都应用到此样式;而.menu span{...}则把使用.menu样式类的元素包含的所有span元素都应用到此样式.
      在设计开发可组合分离的UI组件时,我们必须去除掉这样的"泛样式化"设计!当我们设计一个UI是,给这个UI设计的样式,应该只影响此UI,不能影响以后可能加入此UI中的其他UI的html外观.
      设计组件的样式,应该可以轻松更换"皮肤",以及特殊的外观定制.

UI组件化样式设计原则:
      1)html决定UI结构,css决定外观显示,javascript改变两者.
      2)所有的外观设置,全部通过style和css样式类设计.(style的优先级最高,样式类可以多附加,后加的样式类,将覆盖前样式类的同名属性!)
      3)设计样式时,只使用"样式类",如".my{...}".并且"样式类"之间可以进行一定的继承与派生.
      4)避免设计"泛应用"的样式,如"p{...}",".my span{...}"等.
      5)避免设计基于元素id的样式,如"#menu{...}"等.
      6)样式统一抛弃简写方式,如"border:solid 1px #000;"全部写成"border-right:solid 1px #000;","border-top:solid 1px #000;","border-bottom:solid 1px #000;","border-left:solid 1px #000;",以保持最大的灵活性.(注:样式的精简不是UI组件设计首要追求的,样式的灵活性设置和切换才是!)
      7)出于样式的统一和简化设计,统一使用标准的像素"px"作为基本单位.
      8)必须满足IE和FF两个主流浏览器的兼容性!
      9)使用YUI的样式文件(才2K),以达到兼容不同浏览器初始样式的目的.
      10)抛弃样式中,一些不必要的属性

嗯.了解了.