Web Front-end development specifications and Web development specifications

Web Front-end development specifications and Web development specifications

I. Purpose of frontend development specifications

This document is specially formulated to improve team collaboration efficiency, facilitate background staff to add functions, optimize and maintain the front-end, and output high-quality documents. once confirmed, front-end developers must develop front-end pages according to the specifications of this document. if any errors or exceptions are found in this document, please submit them in a timely manner and make changes after discussion.

Ii. Basic Principles

Compliant with web standards and semantic html tags;

The structure, performance, and behavior are separated from each other, with excellent compatibility;

In terms of page performance, the Code requirements are concise, clear, and orderly. The server load should be minimized to ensure the fastest resolution speed.

Iii. html specifications

1. unified use of DTD <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;

2. Unified UTF-8 coding;

3. In general, the css file is not linked to the head, and the js file is not linked to the bottom of the body;

4. html should minimize the number of nested Layers Based on elasticity;

5. Tag semantics, good readability after style removal;

6. Avoid using the style attribute on the page;

7. Try to write the images that can be presented as backgrounds into css styles;

8. The alt attribute must be added to important images, and the title must be added to important elements and truncated elements;

9. When writing pages, consider backward scalability;

10. It is convenient for server programmers to set templates. html needs to add comments to the template in the format of "<! -Starting from xxx {--> content <! --} Xxx ended --> ";

Iv. CSS specifications

1. CSS Reset with yui css Reset;

2、css1_base.css1_common.css1_app.css format;

32.16app.css adopts the division of labor. A front-end engineer is responsible for a column. if many people maintain the column, add comments;

4、combines existing classes in common.css to reduce the number of custom classes;

5. CSS is written in one line to avoid too long rows and unfavorable search;

6. Make full use of html attributes and style inheritance principles to reduce the amount of code

7. When using the table label, do not use the table attribute to directly define the performance. tablestore should use its own unique separation structure and performance as far as possible. It is best to initialize the table style in the base.css file first;

8. Avoid using compatibility attributes, such as text-shadow | related attributes of css3;

9. Reduce the performance impact attributes, such as position: absolute | float;

10. Compression should be performed before the official release. After compression, the file name should be suffixed with "_ min;

V. JavaScript Specification

1. JavaScript tries its best to avoid using global variables. variables are encapsulated into closures through namespaces or anonymous functions;

2. Library Introduction: in principle, only the jQuery library is introduced;

3. JS adopts the form of base. js + common. js + app. js;

4. Class naming: the first letter is in upper case and the camper name is used;

5. Function naming: the first letter is named in lower case;

6. Name semantics. Use English words or abbreviations as much as possible;

7. Avoid using methods or attributes with compatibility and resource consumption, such as eval () & innerText;

8. The code structure is clear and some comments are added to improve the function reuse rate;

9. Focus on separation from html, reduce reflow, and focus on performance;

10. Compression should be performed before the official release. After compression, the file name should be suffixed with "_ min;

Vi. Image specifications

1. All page element images are placed in the img folder, and images used for testing are placed in the img/demoimg folder;

2. The image format is limited to gif | png | jpg;

3. lowercase English letters are used for naming. | Number | _ a combination of Chinese characters | space | special characters. easy-to-understand words are recommended, it is easy for other team members to understand. In addition, the names are separated by underscores (_), such as ad_left01.gif | btn_submit.gif;

4. Select the minimum image format and quality to reduce the loading time while ensuring the visual effect;

5. Avoid using translucent png images whenever possible;

6. Use css sprite technology to set a small background image or icon to reduce http requests on the page. However, be sure to draw reference lines in the corresponding sprite psd source image and save them to the img directory.

VII. annotation specifications

1. Public components and maintainers in various columns must add comments to the file header:

/**

* File usage instructions

* Author's name

* Contact information

* Production date

**/

2. Large Module comments

// ==============

// Code usage

// ==============

3. Small comments: One Line occupies no comments in the same line after the code

// Code Description

High Web Front-end development or high background

Web Front-end background development requirements are not high, because you do not need to design deep program algorithms, and it is not comparable with programming such as game development.

If the web Background has a natural front-end programming, you must understand the basics, but the front-end scripts are easy to use.
What makes it difficult for web Front-end to earn a high salary is that the monthly salary of a designer who designs a set of good interfaces is absolutely broken, but the front-end development is limited to 3-4 K caps. If the front-end effect is developed, it cannot exceed 7 K at most.
The background program is like 4-7 K.

What technologies are included in front-end web development?

Front-end developers (frontend developers) are short for Web Front-end developers. They have been paying attention to a new career in the last five years. Web Front-end development technology is a process that is easy and difficult, mainly including three elements: HTML, CSS and JavaScript. This requires front-end development engineers not only to master the basic Web Front-end development technology, the basic knowledge of website performance optimization, SEO, and servers should also be learned to use various tools for auxiliary development and theoretical knowledge, it includes code maintainability, component usability, hierarchical semantic templates, and hierarchical browser support.
Jiangxi xinhua diannao xueyuan specializes in answering questions and answers from your computer. I hope this will help you. Thank you for choosing