资源描述:
《高性能网站前端开发规范—平湖中商港科技有限公司v.》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、高性能网站前端开发规范V1.00更新时间2011-07-28版本号文件名称制作人备注V1.0高性能网站前端开发规范曾祥瑚平湖中商港科技有限公司高性能网站前端开发规范V1.0中国商务港华东总部—平湖中商港科技有限公司时间:2011年07月第16页/共16页高性能网站前端开发规范V1.00更新时间2011-07-28目录目录2一、为什么要遵循规范3二、目标3三、受众3四、通用规范31、文件与目录命名规范32、文件编码约定33、id和class命名规范44、文件存储约定45、文件压缩46、使用外部JS和CSS47、兼容性规范5五、HTML规范5HTML语言规范5HT
2、ML元素7六、JavaScript规范8JavaScript语言规范8JavaScript编码风格9七、CSS规范111、样式文件命名规范112、选择器运用规范123、CSS样式命名规范124、CSS书写顺序145、CSSSprite146、不使用滤镜157、尽量不使用hack158、背景平铺规范159、简写15第16页/共16页高性能网站前端开发规范V1.00更新时间2011-07-28一、为什么要遵循规范国外专家对Alexa排名较前的一些网站做过测试,发现浏览一个网站的总耗时一般80%-90%花在了前端,Web的性能80%-90%有前端决定,并且网站对搜索
3、引擎的友好程度,也主要取决与前端。因此,我们必须深入研究前端页面的渲染规则及搜索引擎收录规则,并以此为依据,设置相关的规范,以开发出符合W3C规范、搜索引擎友好、性能极高的网站。二、目标开发符合W3C规范、搜索引擎友好、高性能的网站。三、受众开发团队中的所有前端工程师。四、通用规范1、文件与目录命名规范1)文件名一律小写,必须是英文单词或产品名称的拼音,考虑到seo,多个单词用连字符(-)连接,而不用下划线,google不认同“_”为连字符。只能出现英文字母、数字和连字符,严禁出现中文。2)出现版本号时,需要用字母v作为前缀,小版本号用点号(.)隔开,比如gl
4、obal-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。第16页/共16页高性能网站前端开发规范V1.00更新时间2011-07-283、id和class命名规范1)id和
5、class的命名总规则为:内容优先,表现为辅。首先根据内容来命名,比如main_nav.如果根据内容找不到合适的命名,可以再结合表现来定,比如skin_blue,present_tab,col_main.2)id和class名称一律小写,多个单词用下划线连接,比如recommend_presents.3)id和class名称中只能出现小写的26个英文字母、数字和下划线(_),任何其它字符都严禁出现。4)id和class尽量用英文单词命名。确实找不到合适的单词时,可以考虑使用产品的中文拼音,比如wangwang,dating.对于中国以及特色词汇,也可以使用拼音
6、,比如xiaobao,daogou.除了产品名称和特色词汇,其它任何情况下都严禁使用拼音。5)在不影响语义的情况下,id和class名称中可以适当采用英文单词缩写,比如col,nav,hd,bd,ft等,但切忌自造缩写。6)id和class名称中的第一个词必须是单词全拼或语义非常清晰的单词缩写,比如present,col.4、文件存储约定1)网页:根据频道的文件夹进行存储,例:商家报价频道,项目内对应的目录为/price/,如果创建的网页是商家报价频道的,该网页就必须存储在/price/目录下面.2)CSS:公共文件存储在/css/common/目录下;网页私
7、有CSS文件需要存储到网页文件相对应的/CSS/的路径下,例:商家报价频道首页/css/price/index.css3)Image:图片文件的存储与CSS文件的存储规则一样.4)Js:Js文件的存储跟CSS类似.5、文件压缩 Js文件和css文件的发布文件均用“JsCompressor”工具进行压缩存储。6、使用外部JS和CSS1)全部使用外联样式或的方式。2)所有CSS外联样式均放在head中,JS外联样式放在网页的底部。第16页/共16页高性能
8、网站前端开发规范V1.00更新时间20