Golden rule
Every line of code should appear to be written by a single person, no matter the number of contributors.
1.Syntax
- Use soft tabs with two spaces—they‘re the only way to guarantee code renders the same in any environment.
- When grouping selectors, keep individual selectors to a single line.
- Include one space before the opening brace of declaration blocks for legibility.
- Place closing braces of declaration blocks on a new line.
- Include one space after : for each declaration.
- Each declaration should appear on its own line for more accurate error reporting.
- End all declarrations with a semi-colon. The last declaration‘s is optional, but your code is more error prone without it.
- Comma-separated property values should include a space after each comma(e.g., box-shadow).
- Don‘t includes spaces after commas within rgb(), rgba(), hsl(), hsla(), rect().
- Don‘t prefix property values or color parameters with a leading zero. e.g. .5px;
- #fff. not #FFF. not #ffffff.
- Quote attribute values in selectors.e.g., inpput[type="text"].
- Avoid 0px, just 0. e.g., margin: 0;
2.Declaration order
- Related property declarations should be grouped together following the order:
- Positioning
- Box model
- Typographic
- Visual
- Po
3.Language attribute
- <html lang="en-us">
4.Character encoding
- <meta charset="UTF-8">
5.CSS and JavaScript includes
- typically there is no need to specify a type when including CSS and JavaScript files as text/css and text/javascript are there rerspictive defaults
- <link rel="stylesheets href="code-guide.css">
- <script src=code-guide.js“></script>
6.Practicality over purity
- Strive to maintain HTML standards and semantics, but not at the expense of practicality. Use the least amount of markup with the fewest intricacies whenever possible.
7.Attribute order
- HTML attributes should come in this particular order for easier reading of code.
- class
- id, name
- data-*
- src, for, type, href, value
- title, alt
- role, aria-*
- Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly, so they come second.
8.Boolean attributes
- A boolean attributes is one that needs no declared value
- e.g.: <input type="text" disabled>
9.Reducing markup
- Whenever possible, avoid superfluous parent elements when writing HTML.
10.JavaScript generated markup
- Writing markup in JavaScript file makes the content harder to find, harder to edit, and less performant. Avoid it whenever possible.
时间： 2024-11-05 19:39:09