7. The order of writing css attributes is recommended to be followed: Layout positioning attribute-->Self attribute-->Text attribute -->Other attributes. This article can be written according to your own habits, but try to ensure that similar attributes are written together. Attribute enumeration: Layout positioning attributes mainly include: display & list-style & position (corresponding top, right, bottom, left ) & float & clear & visibility & overflow; Its own properties mainly include: width & height & margin & padding & border & background; Text properties mainly include: color & font & text-decoration & text-align & vertical-align & white- space & other& content; The attributes I listed are only the most commonly used ones, and do not represent all;
8. Before writing code, consider and improve the rate of style reuse;
9. Make full use of HTML's own attributes and style inheritance principles to reduce the amount of code, for example:
Here is the title list2010-09- 15 define ul.list li{position:relative} ul.list li span{position:absolute; right:0} to display the date on the right
10. The Chinese font name in the style sheet must be converted into unicode code to avoid garbled characters when encoding errors;
11. Please use sprite technology as much as possible for background images to reduce http requests, taking into account Multi-person collaborative development, sprites are made according to modules;
12. When using table tags (try to avoid using table tags), please do not use table attributes such as width/height/cellspacing/cellpadding to directly define the performance. Try to Use the table's own private attributes to separate structure and performance, such as thead, tr, th, td, tbody, tfoot, colgroup, scope; (css control method of cellspaing and cellpadding: 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. Avoid using Compatible with ie8;
14. When using png pictures to make pictures, the picture format is required to be png-8 format. If png-8 really affects the picture quality or half of it Transparency effect, please define the background separately for ie6:
15. Avoid the use of compatibility attributes, such as text-shadow || CSS3 related attributes;
16. Reduce the use of attributes that affect performance, such as position:absolute || float;
17. Comments must be added for large block styles, and appropriate comments for small blocks;
18. Code indentation and format: It is recommended to write in a single line, according to your own habits, and I will handle it in a unified manner for later optimization;
JavaScript writing specifications
1. The file encoding is unified to utf-8, and after the writing process, there must be a semicolon at the end of each line of code; in principle, all functions are developed natively according to the needs of the XXX project. Avoid code pollution caused by code downloaded from the Internet (redundant code || conflicts with existing code || ...);
2. Library introduction: In principle, only the jQuery library is introduced. If you need to introduce the Third-party libraries must be discussed and decided with other members of the team;
3. Variable naming: camel case naming. Native JavaScript variables are required to be pure English letters, and the first letter must be lowercase, such as iTaoLun;
jQuery Variables require the first character to be '_', and other rules are the same as native JavaScript, such as: _iTaoLun;
In addition, variables are required to be declared in a centralized manner and avoid global variables.
4. Class naming: first letter Uppercase, camel case naming. Such as ITaoLun;
5. Function naming: lowercase camel case naming. Such as iTaoLun();
6. Semantic naming, use English words or Its abbreviation;
7. Try to avoid using methods or attributes that have compatibility and consume resources, such as eval_r() & innerText;
8. In later optimization, JavaScript non-comment Chinese characters Must be converted to unicode encoding to avoid garbled display when encoding errors occur;
9. The code structure is clear, add appropriate comments. Improve function reuse rate;
10. Pay attention to separation from html, reduce Small reflow, focus on performance.
Image specifications
1. All page element pictures are placed in the img folder, and test pictures are placed in the img/demoimg folder;
2. The image format is limited to gif || png || jpg;
3. All names should be a combination of lowercase English letters || numbers || _, which must not contain Chinese characters || spaces || Special characters; try to use easy-to-understand vocabulary to facilitate understanding by other team members; in addition, the name is divided into two parts, the first and last parts, separated by underscores, such as ad_left01.gif || btn_submit.gif;
4. While ensuring visual Choose the smallest image format and image quality to reduce loading time;
5. Try to avoid using translucent png images (if used, please refer to the relevant instructions of the css specification);
6. Use css sprite technology to focus on small background images or icons to reduce page http requests, but please be sure to draw reference lines in the corresponding sprite psd source image and save it to the img directory.
Annotation specifications
1. HTML comments: Comment format , '--' can only be used at the beginning and end of the comment, and cannot be placed in the comment text area;
2. css comment: Comment format;
3. JavaScript comments, single-line comments use '//This is a single-line comment', multi-line comments use;
Development and testing tool conventions
It is recommended to use Aptana || Dw || Vim, you can also choose according to your own preferences, but you must follow the following principles:
1. Do not use the IDE's view mode to 'draw' code;
2 . Do not use IDE to generate related function codes, such as some functional js built into Dw;
3. Coding must be formatted, such as indentation;
Testing tools: only FireFox & IE6 are tested in early development & IE7 & IE8, add Opera & Chrome & Safari during later optimization; Recommended test order: FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-- >Safari, it is recommended to install firebug and IE Tab Plus plug-ins.
Other specifications
1. During the development process, complete the page strictly according to the division of labor to improve the css reuse rate and avoid duplication Development; 2. Reduce redundant code and write code that everyone can understand. Being concise and easy to understand is a virtue. Think about users and think about the server.
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
