Home > Developer > Web Develop
I. File naming specification
images //Picture Resources, if the project multi-person development inside also need to use subfolders separate
Fonts //font resources, usually is special font embedding or icon font
Styles //css file
-App.css//reset style, if the project is small directly on the inside, if more than one developer will need to separate such as: App.xxx.css
-app.a.css
-app.b.css
Scripts//javascripts
-Jquery.js
-app.js//main program
Videos //video
sounds //audio
index.html//html file
Note: All folders and filenames are lowercase and encoded with UTF-8 encoding
Two, writing specification
1. All HTML tags must use lowercase.
2.CSS can use ID as far as possible ID, can be reused to use class.
3. The style file will be in the head tag, and the script will be at the bottom.
4. If the page picture is large, use the JS script to load dynamically on demand.
5. If you want to be compatible with the Retina screen, use Srcset and-webkit-image to set the 2x quality picture.
6. If the document mode is <!doctype html> can not write the slash in <br/>. (Of course include other no content tag)
7. The reference script and the style of the person to remove the type attribute, you can save a little bit.
8. Whether it is HTML or CSS or JS need to write comments, code not only to understand, so that others can understand is also very important.
9. When developing CSS do not stack in a row, and so on when the project is fully written and then compressed with the compression tool as a whole.
10. Write JS when the opening curly braces to follow the syntax not another line, JS naming style using hump.
function Isemail () {//do something ...}11. transduction when the full-color picture is used in JPG format and with 80% quality, if with transparency to use the PNG24 format.
12. When writing a link address, you must avoid redirection, for example: href= "http://jinzhe.net/", i.e., add "/" after the URL address.
13. Try to avoid using the style attribute on the page, i.e. style= "...".
14. Add comments to the block code and important functions (such as loops) to make the function easier in the background.
15. Images that can be rendered in a background format, as much as possible in CSS styles.
16.important images must be prefixed with the ALT attribute, plus title for important and truncated elements.
17.CSS attribute writing order, recommended to follow: Layout positioning properties--Self-properties--Text properties--other properties. This article can be written according to its own habits, but as far as possible to ensure that similar attributes are written together. Attribute enumeration: Layout positioning properties mainly include:Display & List-style & position (corresponding Top,right,bottom,left) & float & clear & visibility & OverflowThe main properties include:Width & height & margin & padding & border & background;text attributes mainly include:Color & font & text-decoration & text-align & vertical-align & white-space & other & Content ;The properties I've listed are just the ones that are most commonly used and do not represent all of them.
18.The Chinese font name in the stylesheet, be sure to transcode to Unicode code, to avoid coding errors when garbled.
19.jQuery variable before adding $
three, picture specification
1. All page element class pictures are placed in the Images folder, test with pictures placed in the Images/demo folder; The
2. picture format is limited to png,jpg;
3. names All lowercase English letters, numbers, _ combination, which must not contain Chinese characters, spaces, special characters, as far as possible to use easy-to-understand vocabulary, for other members of the team to understand; another, The name split tail two parts, with the underline separates, such as Ad_1.jpg,btn_submit.png;
4. Choose the smallest picture format and picture quality, to reduce loading time in the case of visual effects;
5. try to avoid using translucent PNG images;
6. use css sprite technology to centralize small background plots or icons, reduce page HTTP requests, But note, Be sure to draw a reference line in the corresponding SPRITE&NBSP;PSD source map, Save to the images directory.
four, annotation specification
1. HTML Comment: Note Format <!--here is the comment-->, '--' can only be in the beginning and ending position of the comment, cannot be placed in the annotation text area;
2. CSS Comments: note Format/* Here is the comment */;
3. JavaScript comments, single-line comments using '//Here is a single-line comment ', multiline comments using/* There are multiple lines of comments */;
Web Front end Development specification
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
