前端工程师-前端工程师高性能开发规范文档.docxVIP

高性能网站前端开发规范V 1.00更新时间 2011-07-28版本号 V1.0文件名称制作人 曾祥瑚备注 平湖中商港科技有限公司高性能网站前端开发规范高性能网站前端开发规范 V1.0中国商务港华东总部— 中国商务港华东总部—平湖中商港科技有限公司 时间： 2011 年 07 月第 1 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-28目目录 录 2一、为什么要遵循规范 3 二、目标 3 三、受众 3 四、通用规范 31、文件与目录命名规范 3 2、文件编码约定 3 3、id 和 class 命名规范 4 4、文件存储约定 4 5、文件压缩 4 6、使用外部 JS 和 CSS 4 7、兼容性规范 5五、HTML 规范 5HTML 语言规范 5 HTML 元素 7六、JAVASCRIPT 规范 8JavaScript 语言规范 8 JavaScript 编码风 9七、CSS 规范 121、样式文件命名规范 12 2、选择器运用规范 12 3、CSS 样式命名规范 12 4、CSS 书写顺序 14 5、CSS Sprite 15 6、不使用滤镜 15 7、尽量不使用 hack 15 8、背景平铺规范 15 9、简写 15第 2 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-28一、为什么要遵循规范 为什么要遵循规范国外专家对 Alexa 排名较前的一些网站做过测试，发现浏览一个网站的总耗时一般 80%-90%花在了前端， Web 的性能 80%-90% 有前端决定， 并且网站对搜索引擎的友好程度， 也主要取决与前端。因此，我们必须深入研究前端页面的渲染规则及搜索引擎收录规则，并 以此为依据，设置相关的规范，以开发出符合 W3C 规范、搜索引擎友好、性能极高的网站。二、目标开发符合 W3C 规范、搜索引擎友好、高性能的网站。三、受众开发团队中的所有前端工程师。四、通用规范 1、文件与目录命名规范 、文件与目录命名规范1) 文件名一律小写，必须是英文单词或产品名称的拼音，考虑到 seo，多个单词用连 字符（-）连接，而不用下划线，google 不认同“_”为连字符。 只能出现英文字 母、数字和连字符，严禁出现中文。 2) 出现版本号时，需要用字母 v 作为前缀，小版本号用点号（.）隔开，比如 global-v1.js 或 common-v2.2.js。 3) 该命名规范适用于 html, css, js, swf, php, xml, png, gif, jpg, ico 等前端 维护的所有文件类型和相关目录。 4) js 和 css 压 缩 文 件 ， 统 一 以 .min 结 尾 ， 比 如 源 码 文 件 为 style.css 和 common-v2.2.js，压缩后则为 style.min.css 和 common-v2.2.min.js 。2、文件编码约定 、前端开发涉及的所有文本文件视后台程序 而定，推荐使用 utf-8。第 3 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-283、id 和 class 命名规范 、 命名规范1) id 和 class 的命名总规则为：内容优先，表现为辅。首先根据内容来命名，比如 main_nav. 如 果 根 据 内 容 找 不 到 合 适 的 命 名 ， 可 以 再 结 合 表 现 来 定 ， 比 如 skin_blue, present_tab, col_main. 2) id 和 class 名称一律小写， 多个单词用下划线连接， 比如 recommend_presents. 3) id 和 class 名称中只能出现小写的 26 个英文字母、数字和下划线（_） ，任何其 它字符都严禁出现。 4) id 和 class 尽量用英文单词命名 。确实找不到合适的单词时，可以考虑使用产 品的中文拼音，比如 wangwang, dating. 对于中国以及特色词汇，也可以使用拼 音，比如 xiaobao, daogou. 除了产品名称和特色词汇，其它任何情况下都严禁使 用拼音。 5) 在不影响语义的情况下，id 和 class 名称中可以适当采用英文单词缩写，比如 col, nav, hd, bd, ft 等，但切忌自造缩写。 6) id 和 class 名称中的第一个词必须是单词全拼或语义非常清晰的单词缩写， 比如 present, col.4、文件存储约定 、1) 网页： 根据频道的文件夹进行存储,例:商家报价频道,项目内对应的目录为/price/, 如