Front End Specification Summary

First, the purpose

According to certain specifications to write the page, one to improve the team's collaboration efficiency, easy to add functionality in the background and post-end optimization maintenance, output high-quality documents, and the page loading speed to maximize

I. Document specification

1. Folder naming

The file name is uniform in lowercase letters, numbers, and underscores, which must not contain Chinese characters, spaces, and special characters;

2. Folder Management

Folder naming and relative paths

                                                                                                                                                                                                      

Note: If the page can be *_html for less PC, the images folder can be removed from the 3rd layer;

"*" represents the name of the project according to the functional module, only need to conform to the file name of a unified lowercase English letters, numbers and underscores combination, which must not contain Chinese characters, spaces and special characters

3.HTML page

Introduce files (principle to reduce HTTP requests)

As a little common sense front-end developers, must be the introduction of external CSS and JS files, here to say the location problem

CSS file Location: the introduction of the CSS file placed in the head tag, but also all the external introduction of the front of the file, the reason is very simple, when loading the page began to render the page so that the page will not appear blank;

JS file location: Introduced before the end of the </body> tag; when the browser encounters JS, it pauses all other loading activities, loads JS, invokes DOM elements in JS, and finds matching DOM elements in the page, if placed in

4.CSS Naming conventions

CSS Common naming:

Head	Header	Content	Content	Tail	Footer	Navigation	Nav
Sub-navigation	Subnav	Column	Column	Subject	Main	News	News
Copyright	Copyright	List of articles	List	Join	Joinus	Our Partners	Partner
Sign	Logo	Side bar	Sidebar	Banner	Banner	State	Status
Menu	Menu	Sub-Menu	Submenu	Rolling	Scroll	Search	Search
tab page	tab	Prompt information	Msg	Little Tricks	Tips	Title	Title
Guide	Guild	Service	Service	Hot	Hot	Download	Download
Registered	Regsiter	Login Bar	Loginbar	Button	Btn	Vote	Vote
Comments	Note	Friendship Link	Friend-link	Coat	Wrap	Bread crumbs	Bread-crumb
The current	Current	Shopping Cart	Shop	Icon	Icon	Text	Txt

Selector should be named, the selector should be as short as possible on the basis of satisfying function, reduce the nesting of selectors, query consumption. But be sure to avoid overriding global style settings.

If you can, color as far as possible with three-bit characters, such as #aabbcc written #abc

If there is no border, do not write border:0, should be written border:none;

Comments in CSS, how to add comments, I do not explain, because of personal, but I would like to say that the comments and the above content is best empty two lines, so easy to read the search.

5.js description

Because I now for JS this piece is also a lack of angle, the apprenticeship is not fine, also do not want to swim, just want to mention again introduce JS position,</body> end.

Third, the picture

Image processing, especially on the mobile side, is a challenging issue for the front end. Image size affects the page loading speed one of the important factors. I'll just make a little description of the picture on the HTML mobile page.

HTML Mobile page Picture description:

(1) Width of full-screen content picture of the actual width of 640px

Why is 640px?

In mobile phone, according to different resolution of various devices, the response interval is "0-640px", flat response zone "641px-1024px", so the mobile HTML page

The actual width of the picture is set to 640px; Then set the picture width relative to its parent element 100%, so that it adapts to different resolutions of the picture.

(2) Compress the image

First when you get the design manuscript when you write the page using Photoshop for the first time compression (Shift+ctrl+alt+s shortcut), and then optimize, in order to improve the page loading speed, a variety of ways, but to ensure that the picture quality is not changed in the case, Using a software tool to compress the properties in the picture, it is also necessary to mention that the software can only be installed on Apple computers.

If there is no animation and there is no translucent effect, save to Png-8

If you have a translucent effect, save it as png-24

PS: Memory is too poor, done, experience, do not record down on the wind up and go, haha is the time, and in the future development of these will not blindly do not need to start afresh. Due to limited technology, there are ill-conceived welcome corrections.

———— a quiet, non-violent front-end field craftsman

Front End Specification Summary