Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what is the web front-end development specification", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what is the web front-end development specification" this article.

I. css Writing Standard

1. The code is unified as utf-8

two。 Collaborative development and division of labor: I will write a general framework file in advance according to each module and similar procedures on the page, and assign it to the front-end staff to achieve internal structure-performance-behavior; shared css file base.css is written by I, collaborative development process, please be sure to introduce each page, this file contains reset and header bottom style, this file can not be modified at will

3. The use of class and id: id is unique and parent, class is repeatable and child, so id is only used on large modules, class can be used in high reuse rate and children; in principle, id is named by me when I distribute framework files, except those that reserve hooks for JavaScript

4. Name the hook reserved for JavaScript, starting with js_, such as js_hide, js_show

5. Class and id naming: large frame names such as header/footer/wrapper/left/right are uniformly named by I in 2, other style names are named by lowercase English & numbers & _, such as i_comment, fontred, width300; to avoid using Chinese pinyin, try to use simple word combinations; in short, naming should be semantic and concise.

6. Avoid class and id naming (this is important, please communicate with I in time if you don't understand):

A) avoidance through subordinate writing regulations

B) partial naming of the parent element id/class

C) for names with high repeated usage, please start with your own code name with an underscore, such as i_clear

D) A div b is suitable for pages that have been framed in 2, for example, to add new elements to the framed page code in 2.

7. Css attribute writing order, it is recommended to follow: layout positioning attributes-> own attributes-> text attributes-> other attributes. This article can be written according to your own habits, but try to ensure that similar attributes are written together.

8. Consider and improve style reuse before writing code

9. Make full use of html's own attributes and the principle of style inheritance to reduce the amount of code

10. The Chinese font name in the stylesheet, please be sure to transcode it into unicode code to avoid garbled coding errors.

11. For background images, please use sprite technology as much as possible to reduce http requests. Considering the collaborative development of multiple people, sprite is produced according to the module.

twelve。 When using table tags (avoid using table tags as far as possible), do not use table attributes such as width/ height/cellspacing/cellpadding to define the representation directly. Instead, use table's own private attributes to separate the structure from the performance as much as possible, such as thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing and cellpadding's css control method: table {border:0;margin:0;border-collapse:collapse;} table th, table td {padding:0). }, I will initialize the table style in the base.css file)

13. If possible, please use less compatibility.

14. When making pictures with png pictures, the picture format is required to be png-8 format. If png-8 really affects the quality of the picture or has a translucent effect, please define the background for ie6 separately.

15. Avoid the use of compatibility attributes, such as text-shadow | | related attributes of css3

16. Reduce the use of properties that affect performance, such as position:absolute | | float

17. You must add comments to the large block style, and the appropriate amount of comments for the cell block

18. Code indentation and format: it is recommended to write on a single line, according to your own habits, and later optimization will be dealt with uniformly.

II. JavaScript Writing Standard

1. The file code is unified as utf-8, and there must be a semicolon at the end of each line of code; in principle, all functions are developed natively according to the requirements of the XXX project, in order to avoid code pollution caused by the code under the down on the Internet (redundant code | | conflict with existing code | |...)

two。 Library introduction: in principle, only jQuery libraries are introduced. If you need to introduce third-party libraries, you must discuss and decide with the rest of the team.

3. Variable naming: hump naming. Native JavaScript variables are required to be pure English letters with lowercase initials

4. Class naming: initials capitalized, hump naming. Such as ITaoLun

5. Function naming: initials lowercase hump naming. Such as iTaoLun ()

6. Semantic naming, using English words or their abbreviations as much as possible

7. Try to avoid using methods or properties that are compatible and consume resources.

8. In the later optimization, JavaScript non-annotated Chinese characters should be converted to unicode coding to avoid garbled display when coding errors.

9. The structure of the code is clear and appropriate comments are added. Improve the function reuse rate

10. Pay attention to separation from html, reduce reflow, and pay attention to performance.

These are all the contents of the article "what is the web front-end development specification?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.