1. Coding Standards

1.1 Project Structure

---/html/
|---- /index                       
|---- /index/index.html         首页  
|---- /user/                    与用户相关的页面  
|---- /user/login.html          登录页
---/css/
|---- /base.css                 重置浏览器样式    
|---- /page                     逻辑页面的css
|---- /page/pagename.css        单独书写的css
|---- /common.css               css通用样式库
---/js/
|---- /lib                      公用组件
|---- /lib/jquery.2.2.3.min.js  调用jq库文件 
|---- /page                     逻辑页面的js
|---- /page/pagename.js         单独书写的js
|---- /common.js                公用方法
---/img/
|---- /page                     页面对应的图片
|---- /page/wap                 手机端图片夹
|---- /page/wap/wap_icon.png    手机端图标
|---- /logo.png                 公用图片

1.2 Project Naming Conventions

Project: Name it using the corresponding English word for the project

Files and folders:

• All lowercase English letters, hyphens (middle dashes) are allowed, no other characters may appear, e.g., login, my-order
• Files called from `/lib` must include a version number, compressed files must include the keyword `min`, other plugins may omit it, e.g., `/lib/jquery.1.9.1.js`

1.3 Format & Encoding

• Text files: `.xxx` UTF-8_(without BOM)_ encoding
• Image files: `.png` _(PNG-24)_ `.jpg` _(compression ratio 8-12)_
• Animated images: `.gif`
• Compressed files: `.tar.gz` `.zip` `.rar`

2. CSS Standards

2.1 CSS Naming Conventions

• All names should use lowercase English words
• Do not directly use simple directional words as names, such as "left", "bottom"
• Do not abbreviate words unless they are immediately understandable
• Long names or phrases can use underscores as connectors
• Avoid excessive selector nesting levels; keep it under 3 levels
• Do not use ids arbitrarily; ids should be used as needed and not overused
• Use CSS shorthand properties, such as padding:0 10px 5px 5px, etc. This streamlines the code and improves the user's reading experience.

Naming reference is as follows:

2.2 CSS Writing Standards

Move toward the guideline of "no IDs, no nesting levels, no tags" to effectively improve reusability, reduce file size, and improve rendering efficiency

2.3 CSS Comment Format

Comments used to distinguish pages, e.g., /******************************************Product Center****************************************/

Module comments, e.g., /*Homepage navigation bar*/

2.4 Order of CSS Properties: Not strictly required

• Positioning (e.g., position, top, z-index)
• Box model (e.g., display, box-sizing, width, border)
• Typographic (e.g., font, line-height, text-align)
• Visual (e.g., background, color, opacity)
• Other (e.g., cursor)

Since positioning can remove elements from the normal document flow and can also override box model related styles, it is placed first. The box model determines the component's size and position, so it is placed second. Other properties only affect the inside of the component or do not affect the first two groups of properties, so they are placed last.

2.5 CSS Formatting

Write in a non-wrapping style to increase writing speed

.box{background: none repeat scroll 0 0 transparent;bottom: 11px;position: relative;width: 22px;z-index: 33;}

2.6 CSS Font Units

• px is a pixel (Pixel), a relative length unit. The pixel px is relative to the screen resolution of the monitor.
• em is a relative length unit. It is relative to the font size of the text within the current object. If the font size of the current inline text has not been manually set, it is relative to the browser's default font size.
• rem is also a relative length unit, but it is only relative to the HTML root element.
• vw represents 1% of the viewport width. If the viewport width is 1000px, then 50vw = 500px
• vh represents a percentage of the viewport height. If the viewport height is 800px, then 50vh = 400px
• Notes for company project use: Existing projects all use px as the unit. It is now recommended to use rem, vw, vh as units

3. JS Standards

3.1 JS Naming Conventions

3.1.1 JS Variable Naming

Naming method: lower camel case naming

Naming convention: The prefix should be a noun. (Function names have verb prefixes to distinguish functions from variables)

Naming suggestion: Try to reflect the type in the variable name, e.g., length, count, etc., for number types; and names containing name, title for string types.

Example

// 好的命名方式
var maxCount = 10;
var tableTitle = 'LoginTable';

// 不好的命名方式
var setCount = 10;
var getTitle = 'LoginTable';

3.1.2 JS Function Naming

Naming method: lower camel case naming

Naming convention: The prefix should be a verb

Naming suggestion: Common verb conventions can be used

3.1.3 JS Constant Naming

Naming method: All uppercase

Naming convention: Use uppercase letters and underscores combined for naming; underscores are used to separate words

Example

var MAX_COUNT = 10;
var URL = 'http://www.example.com';   

3.1.4 JS File Naming

Use hyphens (-) or periods (.) as separators; periods are recommended. Use lowercase English characters preferably, and do not use other symbols or extended characters. For example, the source file of jQuery UI 1.9.0 can be named "jquery-ui-1.9.0.js"

Use the .js extension, which has the best compatibility. In fact, any extension works as long as it is text type and correctly encoded.

Use dots to indicate subordinate relationships in names, with the broader scope first. For example, jQuery's form plugin Form can be named jquery.form.js.

3.2 JS comment format

Use multi-line comments, starting with /* and ending with */

3.3 JS notes

Formatting

• JS line break indentation: use tab (expanded to 4 spaces)
• End lines with a semicolon `;`

Performance

• Try to use local variables instead of global variables
• Try to use chaining style
• Minimize DOM calls
• Place JS scripts at the bottom of the page
• Use jQuery's data to store and retrieve data, reducing DOM operations
• Use the on method to bind events; this is jQuery's recommended practice
• Selector choices: try not to use tag selectors; if an ID selector can be used, don't use a class selector

4. HTML Standards

4.1 Tag Usage Standards

Minimize tag hierarchy

Double tags must be closed; single tags are closed with a slash

The first line of HTML should uniformly use the HTML5 standard <!DOCTYPE html>

Uniformly use the trailing slash format for tags: `<br />` `<hr />` note the space between them

Avoid obsolete tags, such as: `<font>` `<frame>` `<s>`

`<img>` tag default format: `<img src="../index.html" alt="DefaultwhentextCharacter" />`

`<a>` tag default format: `<a href="../index.html" title="LinksName">xxx</>` Note: `target="_blank"` depends on requirements

style, link, script can omit the type attribute, because text/css and text/javascript are their default values respectively

4.2 HTML comments

<!--内容-->
<div class="content">
    <p>content</p>
</div>

4.3 Notes

For mobile responsive layout, try to use flexible layout rather than percentages

`css` files should all be placed in the head

HTML line break indentation: use tab spaces

Other effect `js` and `statistics code` files should be placed at the bottom

Mobile pages should be designed at 750px, with display effects at 375px

5. Image Standards

5.1 Image Standards

Image size: use web format when slicing images to reduce file size

Image dimensions: always use integers, e.g., 20X20, 50X50

Image merging: small images must be merged, and the corresponding PSD files should be saved for later modifications

Original link: https://lingdianit-com.github.io/Front-End-Standards/