平台前端开发规范.doc

会聚中国 平台前端开发规范 Requirements of auction site for Nbicon.org Ltd. This Doc: Nbicon_ptkfdmgf会聚中国 2014年12月 主文档编号： 子系统名称： 子系统编号： 负 责 人： 预完成时间： 平台前端开发规范 1.CSS浏览器支持标准 WinXP Win7 OS X IE11 A A IE10 A A IE9 B B IE8 A A IE7 B B IE6 B B IE5.5 C C Chrome 14+ A A A Firfox 9+ A A A Safari B B B Opera B B B A级－交互和视觉完全符全设计的要求 B级－视觉上允许有所差异，但不破坏页面的整体效果 C级－可忽略设计上的细节，但不防碍使用 2.目录结构 Web ├ 1-image 图片目录 │ ├ icon * 小图标前缀 │ ├ bg * 背景图前缀 ├ 2-assets 第三方工具包 │ └* ├ 3-css 样式文件目录 │ ├ core 核心css目录 │ ├ public.css 公共类 │ ├ reset.css reset │ └ nbic *.css 资源文件 portal 门户样式目录 │ └ * 门户所用样式文件 │ ├ hotel 酒店样式目录 │ └ * 酒店所用样式文件 │ ├ place 场地样式目录 │ └ * 场地所用样式文件 ├ 4-data json数据文件目录（后续与平台对接） 5-js js文件目录 3.CSS的模块化组织 当前静态文件管理系统已支持SCSS和导入语法。开发中，应尽量按功能分解大文件，实现模块化的文件组织。 单个CSS文件避免过大（建议少于300行）。 CSS文件嵌套不要超过一层 不要轻易改动全站级CSS和通用CSS库。改动后，要经过全面测试 单条CSS规则的书写格式要求 5.1.单行形式 适用于直接写在页面中和长文件的情况。声明写在一行。需要在“{和}”前后加空格。 （注：在很长的文件中，单行形式有利于检索选择器） 简短规则声明（1或2个）也适用单行形式。 5.2.格式化书写形式 适用于不是很长的模块文件或CSS3语法。冒号后加空格。 CSS3兼容书写形式和对齐方式： CSS3中逗号分隔的长属性值： 5.3.多个(2)selector每个占一行： 5.4.规则声明的顺序 定位、盒模型（width/height/padding/border/margin）、行高、字体/字号/颜色、背景、CSS3效果等 6-5. 兼容多个浏览器时，将标准规则声明写在后面，如： 6.注释书写形式 6.1.注释内容单行控制在40个中文或80个英文字符宽。 注释的格式： SCSS中支持单行注释 6.2.规则分类放在一起。通用规则在具体业务规则的前面 如： 6.3.HTML注释 模块间使用!--mod start--与!-- mod end--包含，如 7.ID和Class命名 命名不要用缩写(除一些公认的缩写)，单词间用”、“_”做为连接符其中s使用“-”，id使用“_”。 7.1.ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。 如： #joinmeet_city_select、#group_member_list等。 7.2.Class是用来标识某一类型的对象，命名简洁表意清楚。 部分尽量简单，如：.list 其他部分要求class命名能解释模块， 如：.newest-techhot-tools. 8. 使用after或overflow的方式清浮动，不要在html里增加多余的标签 9. CSS必须放在head里 10. 避免使用filter 11. 避免直接定义标签的样式。如： div { ... } 12. 避免在标签上直接写样式。如： 13. 避免在CSS中使用expression 14. 避免在CSS中使用@import 15. 尽量不要在CSS中使用!important 16. 绝对不要在CSS中使用*选择符