title: Web Style Guide 前端代码规范
date: 2015-11-09 00:31:45
在此记录自己已理解并开始遵循的前端代码规范。What How Why
## General style rules
- Start a file name with a letter and avoid numbers:
> Start a filename with a special sign in order to flag it for a special purpose.
- Lower case in filename:
> Some operating systems support case sensitive file names and we should not mix the cases to minimize confusion and possible sources for human errors.
- Use minus (-) sign as separating parts:
> 1. For readability purpose. Users may mistake the underscores for spaces, as the underlining in the link hides the underscores;
> 1. It's a common separator in canonical URL and URL slugs;
- Use dot's to separate the clear purpose of this additional meta-data in a filename:
- Omit the protocol portion (http:, https:):
> 1. Makes the URL relative—prevents mixed content issues;
> 1. Saves file size.
### Text indentation
- Indent by 4 spaces at a time. Hitting the Tab key in your text editor should generate four space characters rather than one tab character:
> 1. Make code appearing identical across platforms;
> 1. Developers can make adjustments to their editing environments a single time.
- Comment why it was coded this way and comment the thinking behind. Also include links in your comments to open issues, specifications etc.
var offset = 0;
// If the labels are included we need to have a minimum offset of 20 pixels
// We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1
offset = 20;
- Use tools to generates API documentation from comments. [JSDoc](http://usejsdoc.org/) or [YUIDoc](http://yui.github.io/yuidoc/)
### Code linting
- Writing and following a style guide is a good practice but having an automated process that is enforcing it is even better.
## HTML style rules
### Document type
- HTML5 (HTML syntax) is preferred for all HTML documents:
### Script loading
- Add your script element just before the body close tag and add them with a async attribute:
> 1. On modern browsers, this will asynchronously load the script and don't wait for CSSOM to complete before loading;
> 1. On older browsers (IE9-), prevent DOM parser blocking, not affecting the user experience too much.
### Type attributes
- Omit type attributes for style sheets and scripts:
> This can be safely done even for older browsers.
### ID in Headings
- Give all headings a ID:
> 1. IDs for anchors, enter the URL to scroll to the position this element.
### Quotation marks
- Use double quotation marks ("") to quote attributes values:
### 0 values
- Do not use units after 0 values unless they are required:
### Shorthand Properties
- Should be used whenever possible, even in cases where only one value is explicitly set.
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
> 1. Useful for code efficiency and understandability.
### Hexadecimal Notation
- Use 3 character hexadecimal notation where possible and lower case hex digits:
## To be continued
1. ***Isobar Front-end Code Standards*** by **Isobar** on 2015/8/25:
1. ***[译文] Isobar 前端代码规范 及 最佳实践*** by **老码农** on 2015/8/25: