WEB front-end development specifications

1. The purpose of front-end development specification

In order to improve the efficiency of teamwork, it is convenient for back-end personnel to add functions and optimize the maintenance of the front-end, output high-quality documents, and lay a solid foundation for the website to have a better front-end architecture and the development and future of the website.

2. Basic criteria

Conforms to web standards, semantic HTML, separation of structure, performance, and behavior, and excellent compatibility. In terms of page performance, the code requirements are concise and clear, and the server load is reduced as much as possible to ensure the fastest resolution speed.

Three, document specifications

1. html, css, js, p_w_picpath files are archived to the agreed directory;

2. html file naming: name in English, suffix .html and put the corresponding interface draft in the same directory at the same time. If the interface draft is named in Chinese, please rename it with the same name as the html file to facilitate the search for the corresponding page when adding functions in the backend;

3. CSS file naming: English naming, suffix .css. Common base.css, others are named according to the module or page content

4. Js file naming: English name, suffix .js. Common.js is shared, and others are named according to actual module requirements.


Four, html writing standard

1. Document type declaration and encoding: If html5 is supported, unified as html5 declaration type <!DOCTYPE html> ; if html5 is not supported, unified as html4.01 transitional declaration type < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >;  mate attributes are unified as <meta http-equiv="Content-Type" content="text/html;charset= utf-8"> , the coding is unified as utf-8, use IDE to achieve hierarchical indentation when writing, such as code formatting commands in dreamweave, use TAB key for code indentation, try not to use spaces


2. The css and js files are linked to..., the css file should be placed on the js file, and the js can be placed at the end according to the needs


3. When importing style files or JavaScript files, (rules under html5), the default type declaration must be omitted and written as follows:

<link rel="stylesheet" href="…" /><style>…</style><script src="…"></script>

4. Introduce JS library files, the file name must include the library name and version number and whether it is a compressed version, such as jquery-1.4.1.min.js; import plug-ins, the file name format is library name + plug-in name, such as jQuery.cookie .js;

5. All codes follow the xhtml standard, tags and attributes are in lowercase letters, and all tags must be closed,  including br (<br />), hr (<hr />), etc.;  attribute values ​​must be enclosed in double quotes; such as ,height=80, should be written as height=”80”

6.  The module in <body> should be commented, such as <!—content--><!—left sidebar--> etc.


7.
Comment specification. Use of html comments<!--Here is the content ("-" is not allowed to appear in it)-->


8. Semantic html, such as the h series of title tags according to the importance of the title, the definition of h1-h6 should follow the principle of from large to small, which reflects the structure of the document and is also conducive to search engine queries (the same page can only have one h1, LOGO is the logo of a site, the most important place in the page, so it is assigned to the LOGO), the h tag cannot be segmented; the paragraph mark uses p, the list uses ul, ol, etc., and inline elements cannot nest blocks Level element;

Follow the principle of separation of performance and structure, and no performance elements are involved in the code, such as <center> <font> tags, etc.


9. Pictures that can be presented in the form of a background, try to write them into the css style; important pictures must add alt attributes; add title to important elements and truncated elements


10. Reduce div nesting as much as possible. In principle, div nesting does not exceed two levels, such as

<div class="box"><div class="welcome">Welcome to XXX, your user name is <div class="name">user name</div></div></div> and it’s fully usable Replace with the following code: <div class="box">
 <p>Welcome to XXX, your username is <span>username</span></p></div>

11. Special symbols should use escape characters, such as <(<) & >(>)& space (  ), etc.;

12. A label must be added to the descriptive form elements (input, textarea), such as

<p>姓名: <input type=”text” id=”name” name=”name” /></p>

须写成:<p><label for=”name”>姓名:</label><input type=”text” id=”name” /></p>

13.Focus on label semantics

Five, css coding standards

1. Basic writing standards:

1) The coding is unified to utf-8

2) Try not to abbreviate as much as possible, unless you can see the words at a glance

3) Use a combination of English and a minus sign to name the class (such as: solution - title ), use either underscore or camel case to name the ID (such as: mian_menu_nav mainMenuNav personally prefer to write underscore for convenience) Pinyin is not allowed And numbers; naming should be based on the content of the module

4) css is all lowercase, each definition is written on a line, a space should be added after the colon of the attribute, and a semicolon should be added after each definition; such as

.box{

    width: 150px;

   }

5) All decorative background pictures must be written in css, and the background pictures use css sprite

6) 减少使用影响性能的属性, 比如position:absolute || float ; 不允许在css中使用滤镜表达式, 也尽量少用图片repeat, 尤其在body当中,渲染性能极差, 如果需要用repeat的话, 图片的宽或高不能少于8px

7) 请注意采用css 缩写, 简少代码大小, 提高下载速度, 同时使代码简洁可读. 如

.box{

border-color: #fff;

border-width: 1px;

border-style: solid;

   }

可以写为一句:

.box{

       border: 1px solid #fff;

   }

8) css属性书写顺序, 建议遵循以下顺序

影响文档流的属性–>自身盒模型属性–>排版相关属性–>装饰属性–>生成内容属性.

位置属性–>大小–>文字系列–>背景–>其他.

此条可根据自身习惯书写, 但尽量保证同类属性写在一起.

属性列举:

1. 影响文档流的属性(比如:display, position, float, clear, visibility,  table-layout等)

2. 自身盒模型的属性(比如:width, height, margin, padding, border等)

3. 排版相关属性(比如:font, line-height, text-align, text-indent, vertical-align等)

4. 装饰性属性(比如:color, background, opacity, cursor等)

5. 生成内容的属性(比如:content, list-style, quotes等)

以上所列出的这些属性只是最常用到的, 并不代表全部

9) 充分利用html自身属性及样式继承原理减少代码量, 比如:

<ul class=”list”>

<li>这儿是标题列表<span>2010-09-15</span></li>

</ul>

css定义

ul.list li{

position: relative;

}

ul.list li span{

position: absolute;

right: 0

}

10)注意权值:标签权值:0.0.0.1;类权值:0.0.1.0;属性权值:0.0.1.1;ID权值:0.1.0.0;important权值:1.0.0.0

11) 必须为大区块样式添加注释, 小区块适量注释; 注释使用 /*注释内容*/

12)书写代码前, 考虑并提高样式重复使用率

2. 命名规则:

命名应以体现结构或内容为原则.css命名以小写英文字母和减号组合,避免使用数字,要以字母开头. 以下列出常见的基本命名,这个可以根据个人习惯,但是请保证命名符合内容

[ 模块前缀 ] - 类型 - ( 作用 | 状态 ) n - [ 位置 n ]

图例说明:
//   ( 必选 ):必需存在。
//   [ 可选 ]:可根据需要选择。
//   |:多选一。
//   n:可有多个。

名词说明:
模块前缀     模块定义时使用的前缀。
类型            定义类的内容类型。如输入框、文本、段落等等。
作用            定义类的作用,用于对类型的补充。
状态            定义类的状态,用于对类型的补充。
位置            定义类所使用的位置,如首页、导航等等,不排除使用左、右这样的词,但应尽量避免。
   * 每项都可有自己的一个缩写表,同一名称的缩写尽量统一。
   * 所选用的单词应选择不过于具体表示某一状态(如颜色、大小等)的单词,以避免当状态改变时名称失去意义。
   * 由不以数字开头的小写字母(a-z)、数字(0-9)组成。
   * 确保类(.class)的重用性与对象(#id)的唯一性,id避免使用保留字。

页面布局:

-页面头部:header

-图标:logo

-右上快捷区域:quick-links

-页面中部:main

-侧栏:side

-主栏:content

-区块:section

-区块顶部:box-top

-区块中部:container

-区块底部:box-bottom

-页面底部:foot

-版权说明:copyright


模块前缀:

 * 弹出 pop  

 * 公共 global,gb  

 * 标题 title,tit  

 * 提示 hint

 * 菜单 menu  

 * 信息 info  

 * 预览 pvw  

 * Tips tips  

 * 导航 nav

类型:

 * 按钮 bt  

 * 文本 tx  

 * 段落 p  

 * 图标 icon  

 * input input  

 * 颜色 color,c  

 * 背景 bg  

 * 边框 bor

作用:

 * 设置 set  

 * 添加 add  

 * 删除 del  

 * 操作 op  

 * 密码 pw

状态:

 * 成功 suc  

 * 失败 lost  

 * 透明 tran

位置:

 * 公共 gb  

 * 边框 bor  

 * 段落 p  

 * 弹出 pop  

 * 标题 title,tit  

 * 菜单 menu  

 * 内容 cont  

 * 导航 nav

六、图片规范

1.  图片格式仅限于gif || png || jpg

背景图尽量使用png-8的格式(IE6下支持其图片透明度),对于图片质量要求高的背景图片,使用png-24(IE6下不支持其透明度). 基本原则就是在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

2. 图片命名根据图片用途使用小写字母和下划线组合, 如send_btn.png等,方便其它成员理解.

3. 运用css sprite技术集中小的背景图或图标,减小页面http请求(注意图片大小最好能不超过200K).

<link 前端学习、视频教程、学习路线,添加威信  kaixin666haoyun  ></script>


Guess you like

Origin blog.51cto.com/14895198/2570390