规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,,,,语义化html,结构表现行为分离,,代码要求简洁明了有序,尽可能的减小服务器负载,,以提高css复用率,避免重复开发;减小沉冗代码,,,文件命名规范文件夹命名采用英文,长度一般不超过20个字符,命名采用小写字母。文件夹命名如:Images(存放图形文件)flash(存放Flash文件)style/css(存放CSS文件)scripts(存放Javascript脚本)link(存放友情链接)media(存放多媒体文件)(SEO)进行命名(语义化),,用下划线隔开,头部分表示此图片的大类性质例如广告、标志、菜单、按钮等等。放置在页面顶部的广告、装饰图案等长方形的图片取名:banner标志性的图片取名为:logo在页面上位置不固定并且带有链接的小图片我们取名为button在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu装饰用的照片我们取名:pic不带链接表示标题的图片我们取名:title下面是几个范例:、、、、、、、。:①命名考虑元素本身的作用和语义,通俗易懂。如red/left/big②组合命名[元素类型]-[元素作用/内容]如:搜索按钮:btn-search登录表单:form-login新闻列表:list-news③涉及到交互行为的元素命名凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:鼠标悬停::hover点击:click已浏览:visited如:搜索按钮:btn-search、btn-search-hover、btn-search-visited备注1:常用标签命名对照表(注:命名尽量做到简短,规范,语义化。)标签标签说明备注wrapper/container外层容器包含(外套)header网页头部main-nav主导航/菜单top-nav顶部导航sub-nav侧导航/菜单drop-nav下拉导航/菜单sidebar侧栏main网站主要内容footer/copyright网站底部区域logo标志banner广告条tab切换书签login-bar登录条search-bar搜索条list列表(文章,企业,行业)ment评论order订单shop-pany企业Industry行业msg短信提
前端开发规范,UI设计规范,css规范.doc 来自淘豆网www.taodocs.com转载请标明出处.