MVC4+FluentData+EasyUI框架(二):前端开发规范

一、基本准则

符合Web标准,语义化html,结构表现行为分离,兼容性优良,代码简洁有序,减少服务器负载,最优化的解析速度。

二、图片规范

1、页面元素类图片放入img文件夹,测试用图片放在img/demoimg文件夹。

2、图片格式:gif/png/jpg。

3、仅由小写英文字母+数字+"_"组成。

4、最优化图片大小与质量,减少加载时间。

5、减少使用半透明png,参考css规范说明。

6、背景图片运用css sprite技术集中背景图片,减少页面http请求,保存sprite源文件到img中。

三、文件规范

1、html、css、images文件归档约定的目录中。

2、html文件命名:英文命名,后缀.htm,界面设计稿同时拷入该文件下,命名同.htm文件,以便后台查找该页面。

3、css文件命名:英文命名,后缀.css,引入公用base.css,首页命名index.css,其它根据需求命名。

4、js文件命名:英文命名,后缀.js,引入公用common.js,其它根据需求命名。

四、注释规范

1、html注释:<!--注释内容-->

2、css注释:

/*
 * 注释内容
 */

3、javascript

单行注释://

多行注释:

/*
 * 注释内容
 */

五、css书写规范

1、编码:utf-8

2、id与class:id是父级和大模块的,class是子级和小模块的。大框架要采用标准命名:header/footer/wrapper/left/right,其它样式由英文数字/数字/"_"组成。

3、base.css:定义大体框架,头部、脚部以及其它公用模块的css样式,分配给前端人员开发内部结构和行为。

4、规避命名重复:#id .classname .classname{...},以id起头。

5、css属性书写顺序:布局定位属性,自身属性,文本属性,其它属性。

6、尽量减少使用table标签。

7、杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容 ie8;

8、单行书写。

9、注释:大块添加注释,小块适量注释。

10、避免存在兼容性的属性的使用,避免使用position:absolute|float等影响性能的属性使用。

时间: 2024-10-14 00:31:42

MVC4+FluentData+EasyUI框架(二):前端开发规范的相关文章

MVC4+FluentData+EasyUI框架(三):框架解读

一.项目结构 项目结构分为两大部分: Zephyr.Net下有5个程序集: Zephyer.WorkFlow是工作流部分,跟目前的项目没有关系. Zepher.Generator是快速代码生成器相关的代码.这个是一个与其它部分不相关的单独的框架. Zepher.Data即FluentData的源码部分,是一个第三方的代码. Zephyr.Web为MVC的项目部分. 本项目主要集中于Zepher.Core.zepher.Generator.Zepher.Utils和Zepher.Web的讲解与开发

web前端开发规范

本文原创,这里首先声明,转载注明本文出处,翻版必究! web前端开发规范的现实意义 1.提高团队的协作能力 2.提高代码的重复利用率 3.可以写出质量更高,效率更好的代码 4.为后期维护提供更好的支持 5.可读性高 一.命名规则 1.html命名规则: a.文件名称命名规则:统一使用小写英文字母.数字.下划线的组合,不得包含汉字空格和特殊字符 2.命名原则:方便理解.方便查找 b.索引文件命名原则:index.html.index.htm.index.asp.index.aspx.index.j

WEB前端开发规范文档(转)

http://codeguide.bootcss.com/  编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或

前端开发规范文档(html,css,js)

首先吐槽一句,本来想上传word文档的,可是发现博客不能上传word文档,这就很尴尬了. 首先声明该规范不是本人写的,网上搜前端规范发现这个很详细就先复制下来做笔记,当然不可能啥都按规范来,每个公司的规范都不一样..仅供参考 前端开发规范文档 Html规范 1 代码风格 1.1 缩进 **[强制]**使用 4 个空格作为一个缩进层级,不允许使用 2 个空格或 tab 字符: 2 属性 2.1 属性引号 **[强制]**对于属性的定义使用双引号,不允许使用单引号,不允许不使用引号: 示例: <!-

前端开发规范-CSS规范

前端开发规范-CSS规范 1.通用约定 (1)代码组织 以组件为单位组织代码段: 制定一致的注释规范: 组件块和子组件块以及声明块之间使用一空行分隔,子组件块之间三空行分隔: 如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动: 良好的注释是非常重要的.请留出时间来描述组件(component)的工作方式.局限性和构建它们的方法.不要让你的团队其它成员 来猜测一段不通用或不明显的代码的目的. 提示:通过配置编辑器,可以提供快捷键来输出一致认可的注释模

麦子新课上线之web前端开发规范

同学们,Web前端开发又有课程上线啦!对Web前端感兴趣的同学们,速来围观哦~~下面简单介绍一下课程. [学霸学新,课快人一步] 课程简介: Web前端开发规范,可以帮助同学们,了解web前端开发规范的意义,掌握前端开发中的开发规范,掌握web前端开发中的实用技巧.面对企业团队开发,可以很快融入团队合作中,高效率的完成团队给予的任务. 课程地址→http://www.maiziedu.com/course/web/621-8960/ 老师简介: 何虎:8年软件开发经验,擅长互联网应用程序开发,曾

前端开发规范

前端开发规范 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约定的目录中; 2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面; 3. css文件命名: 英文命名, 后缀

前端开发规范总结 总结前端开发模式和规范

1.前端开发规范 WEB客户端开发自成体系, 主要用于智能终端(iPhone.Android手机.iPad.Android Pad)和传统PC的开发.JS规范.HTML规范和CSS规范对客户端开发进行全方位指导,统一编码规范.提高可读性.降低维护成本. 1.1一般规范 应用在 HTML, JavaScript 和 CSS上的通用规则. 1.1.1文件/资源命名 1)     以可读性而言,减号(-)用来分隔文件名: 2)     使用驼峰方式命名文件名与文件所在的文件夹,便于统一配置: 3)  

前端开发规范总结

1.前端开发规范 WEB客户端开发自成体系, 主要用于智能终端(iPhone.Android手机.iPad.Android Pad)和传统PC的开发.JS规范.HTML规范和CSS规范对客户端开发进行全方位指导,统一编码规范.提高可读性.降低维护成本. 1.1一般规范 应用在 HTML, JavaScript 和 CSS上的通用规则. 1.1.1文件/资源命名 1)     以可读性而言,减号(-)用来分隔文件名: 2)     使用驼峰方式命名文件名与文件所在的文件夹,便于统一配置: 3)