平台前端开发规范.doc

会聚中国技术部平台前端开发规范Requirements of auction site for N Ltd.（样本）This Doc: Nbicon_ptkfdmgf_20141229会聚中国技术部2014年12月主文档编号：子系统名称： 子系统编号：负 责 人：预完成时间：平台前端开发规范1.CSS浏览器支持标准WinXPWin7OS XIE11AAIE10AAIE9BBIE8AAIE7BBIE6BBIE5.5CCChrome 14+AAAFirfox 9+AAASafariBBBOperaBBBA级交互和视觉完全符全设计的要求B级视觉上允许有所差异，但不破坏页面的整体效果C级可忽略设计上的细节，但不防碍使用2.目录结构Web 1-image图片目录 icon *小图标前缀 bg *背景图前缀 2-assets第三方工具包 * 3-css样式文件目录 core核心css目录 public.css公共类 reset.cssreset nbic *.css资源文件 portal门户样式目录 *门户所用样式文件 hotel酒店样式目录 *酒店所用样式文件 place场地样式目录 *场地所用样式文件 4-datajson数据文件目录（后续与平台数据对接） 5-jsjs文件目录3.CSS的模块化组织当前静态文件管理系统已支持SCSS和导入语法。开发中，应尽量按功能分解大文件，实现模块化的文件组织。单个CSS文件避免过大（建议少于300行）。CSS文件嵌套不要超过一层4.不要轻易改动全站级CSS和通用CSS库。改动后，要经过全面测试5.单条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注释模块间使用与包含，如7.ID和Class命名命名不要用缩写(除一些公认的缩写)，单词间用“-”、“_”做为连接符。其中css使用“-”，id使用“_”。7.1.ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。如： #joinmeet_city_select、#group_member_list等。7.2.Class是用来标识某一类型的对象，命名简洁表意清楚。通用部分尽量简单，如：.list、.nav、.header、.footer其他部分要求class命名能解释模块，如：.newest-tech、.hot-tools.8. 使用after或overflow的方式清浮动，不要在html里增加多余的标签9. CSS必须放在head里10. 避免使用filter11. 避免直接定义标签的样式。如： div . 12. 避免在标签上直接写样式。如：13. 避免在CS