Google HTML/CSS/JS Code Style Guide

Last Update:2014-08-27 Source: Internet

Author: User

Tags html validator css validator

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JS version see: http://www.zhangxinxu.com/wordpress/2012/07/google-html-css-javascript-style-guides/Html/cssFix Version 2.1Background

This document defines the authoring format and style rules for html/css. It is designed to improve collaboration and code quality and enable it to support the infrastructure. Applies to html/css files, including GSS files. As long as the code quality can be maintained, it can be well confused, compressed and merged with the tool.

Style rule Protocol Embedded Resource Writing ellipsis protocol header

Omit URL protocol header declarations (,) such as images, media files, style sheets, and scripts http: https: . If not, the URLs for both declarations are not omitted.

Omit the Protocol declaration, make the URL a relative address, prevent the content from confusing the problem and cause the small file to repeat the download.

<!--not recommended--><script src= "Http://www.google.com/js/gweb/analytics/autotrack.js" ></script>

<!--recommended--><script src= "//www.google.com/js/gweb/analytics/autotrack.js" ></script>

/* Not recommended */.example {  background:url (http://www.google.com/images/example);}

/* Recommended */.example {  background:url (//www.google.com/images/example);}

Typographic rules indent two spaces at a time.

Do not indent with the TAB key or multiple spaces.

<ul>  <li>fantastic  <li>Great</ul>

. example {  color:blue;}

The case is written in lowercase letters only.

All code is written in lowercase: applies to element names, attributes, attribute values (except text and CDATA ), selectors, attributes, attribute values (except strings).

<!--not recommended--><a href= "/" >Home</A>

<!--recommended-->

Line trailing white space is deleted at the end of the line.

There is no need to have a line trailing space.

<!--not recommended--><p>what?_

<!--recommended--><p>yes.

The metadata rule encoding is encoded with the UTF-8 without the BOM header.

Have your editor write in a UTF-8 encoded format that does not have a byte-order tag.

Specifies the encoding in HTML templates and files <meta charset="utf-8"> . No coding of the stylesheet is required, it defaults to UTF-8.

(For more information about encoding and how to specify it, see Character Sets & Encodings in XHTML, HTML and CSS.) ）

Note as much as possible to explain the code you write.

Explain the code with comments: What does it consist of, what it is intended for, what it can do, why use this solution, or just because of the preference?

(This rule is optional, it is not necessary to have a full description of each code, it will add weight to HTML and CSS code.) This depends on how complex the project is. ）

Active entries are used TODO Mark the items of the agent and the active

Use only TODO to emphasize the matter, not in other common formats, for example @@ .

Attach a contact (user name or e-mail list), enclosed in parentheses, for example TODO(contact) .

You can attach a description of the activity item after the colon, for example TODO: 活动条目说明 .

{# TODO (CHA.JN): Reset in #}<center>test</center>

<!--TODO: Remove optional elements--><ul>  <li>Apples</li>  <li>Oranges</li></ul>

HTML code style rule document type use the HTML5 standard.

HTML5 is currently preferred in all HTML document types: <!DOCTYPE html> .

(It is recommended to use HTML text document format, ie text/html . Do not use XHTML.) XHTML format, that is application/xhtml+xml , two browsers are not supported at all, and more storage space than HTML. ）

HTML code validity uses valid HTML code as much as possible.

Write valid HTML code, otherwise it is difficult to achieve performance improvement.

Use a tool like this to test your HTML validator.

HTML code Effectiveness is an important quality metric and ensures that the HTML code is used correctly.

<!--not recommended--><title>test</title><article>this is only a Test.

<!--recommended--><! DOCTYPE html><meta charset= "Utf-8" ><title>test</title><article>this is only a test.</ Article>

Semantics are used in accordance with the purpose of each element of HTML.

Use elements (sometimes wrongly called "tags") to know why to use them and whether they are correct. For example, construct headings with heading elements, p construct paragraphs with elements, a construct anchor points for elements, and so on.

It is important to use the various elements of HTML in terms of the accessibility, reuse, and code efficiency of the document.

<!--not recommended--><div onclick= "gotorecommendations (); >all recommendations</div>

<!--recommended--><a href= "recommendations/" >all recommendations</a>

The multimedia Backup program provides alternative content for multimedia.

For multimedia, like, video, by canvas reading the animated elements, make sure to provide alternatives. Use meaningful alternative copy () for images to alt use valid copies and copy instructions for video and audio.

It is important to provide alternative content for the blind user with some suggestive text, to tell him what the @alt image is about, and to give hints to users who may not understand the content of the video or audio.

(The attributes of the image alt create redundancy, and if you use the image just to not decorate it immediately with CSS, you do not need to use an alternative copy, which can be written .) ）

<!--not recommended-->

<!--recommended-->

Separation of concerns separates performance from behavior.

Strictly keep the structure (mark), behave (style), and act (script) separate, and try to keep the interactions between the three to a minimum.

Make sure that the documents and templates contain only the HTML structure, put all the performance into the stylesheet, and put all the behaviors into the script.

In addition, try to make the script and style sheet in the document and template with the smallest contact area, that is, reduce the outer chain.

It is important to maintain the performance and behavior separately, because changing the structure and template of the HTML document will cost more than updating the style sheets and scripts.

<!--not recommended--><! DOCTYPE html><title>html sucks</title><link rel= "stylesheet" href= "base.css" media= "screen" > <link rel= "stylesheet" href= "grid.css" media= "screen" ><link rel= "stylesheet" href= "Print.css" media= "print" >
<!--recommended--><! DOCTYPE html><title>my First css-only redesign</title><link rel= "stylesheet" href= "Default.css" >
    doing it:separating concerns and avoiding anything in the HTML of  my website so is Presentational.<p>it ' s AW esome!
   
Entity references do not use entity references.
You do not need to use similar &mdash;  , &rdquo;  and &#x263a;  equal entity references, assuming that the files and editors used between the teams are the same encoding (UTF-8).
Characters that have special meanings in HTML documents (such as <  and &  ) are exceptions, oh yes, and "invisible" characters (such as no-break spaces).
<!--not recommended--the euro currency symbol is &ldquo;&eur;&rdquo;.
<!--recommended--The euro currency symbol is "€".
Optional label omit optional label (optional).
For optimized file size and validation, consider omitting optional labels and which are optional tags to refer to HTML5 specification.
(This approach may require more precise specifications to be developed, and many developers have a different view of it.) For reasons of consistency and brevity, it is necessary to omit all optional tokens. ）
<!--not recommended--><! DOCTYPE html>
<!--recommended--><! DOCTYPE html><title>saving money, saving BYTES</TITLE><P>QED.
The Type property is ignored in the label of the style sheet and scripttype Property
The properties are not written in the style sheet (unless you don't use CSS) and the script (unless JavaScript is not used) type  .
HTML5 default type  to text/css  and text/javascript  type, so no need to specify. Even the old browser is supported.
<!--not recommended--><link rel= "stylesheet" href= "//www.google.com/css/maia.css"  type= "Text/css" >
<!--recommended--><link rel= "stylesheet" href= "//www.google.com/css/maia.css" >
<!--not recommended--><script src= "//www.google.com/js/gweb/analytics/autotrack.js"  type= "Text/javascript" > </script>
<!--recommended--><script src= "//www.google.com/js/gweb/analytics/autotrack.js" ></script>
HTML code format rule format each block element, list element, or TABLE element is exclusively one row, and each child element is indented relative to the parent element.
The style of the standalone element (as CSS allows elements to assume a different role per property display  ), place the block element, list element, or table element in a new row.
In addition, you need to indent a block element, a list element, or a child element of a TABLE element.
(If there is a problem with the empty text node for the list item, try putting all the li  elements on one line.) A linter is encouraged to throw a warning instead of an error.)
<blockquote>  <p><em>space</em>, the final frontier.</p></blockquote>
<ul>  <li>moe  <li>larry  <li>Curly</ul>
<table>  <thead>    <tr>      <th scope= "col" >income      <th scope= "col" >taxes  <tbody>    <tr>      <td>$ 5.00      <td>$ 4.50</table>
CSS code style rules CSS code validity as far as possible using valid CSS code.
Use a valid CSS code unless you are dealing with a CSS Validator program error or require a proprietary syntax.
Test for effectiveness with tools like the CSS validator.
Using effective CSS is an important quality metric, and if you find that some CSS code doesn't have any effect to delete, make sure the CSS usage is appropriate.
ID and class are named for the ID and class to take a generic and meaningful name.
It should be seen from the name of the ID and class that the element is used, not the appearance or the ambiguous name.
Priority should be given to naming this element specifically, so that he is the easiest to understand and reduce updates.
Generic names can be added to elements that are not special or have no individual meaning, and can be named like "Helpers".
Using a functional or generic name reduces unnecessary changes to the document or template.
/* Not recommended: Meaningless difficult to understand */#yee-1901 {}/* Not recommended: Express not specific */.button-green {}.clear {}
/* Recommended: Clear Details */#gallery {} #login {}.video {}/* recommended: Universal */.aux {}.alt {}
ID and class naming styles are not necessary, the name of the ID and class should be as short as possible.
Briefly convey ID or class is about what.
In this way, the code is understandable and efficient.
/* Not recommended */#navigation {}.atr {}
/* Recommended */#nav {}.author {}
Type selector avoids the use of CSS type selectors.
Do not use element tag signatures and ID or class combinations when not necessary.
For performance reasons, avoid using parental nodes as selectors performance reasons.
/* Not recommended */ul#example {}div.error {}
/* Recommended */#example {}.error {}
Abbreviations are used whenever possible when attributes are abbreviated to write property values.
CSS many properties support abbreviation shorthand (for example font  ) use abbreviations as much as possible, or even set only one value.
Using abbreviations can improve the efficiency and ease of understanding of your code.
/* Not recommended */border-top-style:none;font-family:palatino, Georgia, Serif;font-size:100%;line-height:1.6;padding-bottom: 2em;padding-left:1em;padding-right:1em;padding-top:0;
/* Recommended */border-top:0;font:100%/1.6 Palatino, Georgia, serif;padding:0 1em 2em;
0 and units omit 0 units behind.
No additional units are required at the back of the case 0  .
margin:0;padding:0;
0 The decimal point of the beginning is omitted 0 begins with the 0 preceding the decimal.
The value or length of the decimal between 1 and 1, which can be ignored before the decimal is 0  not written.
Font-size:. 8em;
Quotation marks outside the URI omit the quotation marks outside the URI.
Do not url()  use ( ""  ,) in the ‘‘  .
@import URL (//www.google.com/css/go.css);
hexadecimal hexadecimal uses 3 characters as much as possible.
It is used when adding color values, and is shorter and more concise with 3-character hexadecimal.
/* Not recommended */color: #eebbcc;
/* Recommended */color: #ebc;
Prefix selector preceded by a prefix (optional) with a special app identifier.
It is best to include this identifier prefix (namespace) before the ID or class name in a large project, using a short dash link.
Namespaces can be used to prevent naming conflicts and facilitate maintenance, such as in search and replace operations.
. adw-help {}/* AdWords */#maia-note {}/* Maia */
The ID and class name delimiter IDs and class names have multiple word combinations with the short dash "-" separated.
Do not use short dashes "-" in the selector name (including nothing) to enhance the understanding and search of the name.
/* Not recommended: "Demo" and "image" do not add "-" */.demoimage {}/* not recommended: With the underscore "_" is the style of the cock silk */.error_status {}
/* Recommended */#video-id {}.ads-sample {}
Hacks best to avoid using the damned CSS "hacks"--try using other workarounds first.
Although it is tempting, can be used as a user agent detection or special CSS filter, but its behavior is too frequent, will be long-term damage to project efficiency and code management, so can use other solutions to find other.
CSS code formatting rules are declared in alphabetical order.
are declared in alphabetical order and are easy to remember and maintain.
Ignore the browser's specific prefix ordering, but a multi-browser-specific CSS property prefix should be relative to the sort (for example,-moz prefix in front of-webkit).
background:fuchsia;border:1px Solid;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color: Black;text-align:center;text-indent:2em;
The code block content indents the contents of all code blocks ("{}").
Indents the contents of all code blocks, which improves the clarity of the hierarchy.
@media screen, projection {  HTML {    background: #fff;    Color: #444;  }}
The declaration ends with all statements being ";" End.
For consistency and extensibility, add semicolons at the end of each statement.
/* Not recommended */.test {  display:block;  height:100px}
/* Recommended */.test {  display:block;  height:100px;}
Property name completion adds a null character after the end of the property name Colon.
For consistency reasons, add a space between the property name and the value (not between the property name and the colon).
/* Not recommended */H3 {  font-weight:bold;}
/* Recommended */H3 {  font-weight:bold;}
The selector and the declaration line are interlaced with the selector and declaration.
Each selector and declaration is independent of the new row.
/* Not recommended */a:focus, a:active {  position:relative; top:1px;}
/* Recommended */H1,H2,H3 {  font-weight:normal;  line-height:1.2;}
Rule branches each rule on a separate line.
Two rules are interlaced between each other.
HTML {  background: #fff;} body {  Margin:auto;  width:50%;}
The CSS Metadata rule comment section writes comments by group. (optional)
If possible, write a uniform comment on a set of style sheets according to the category of the feature. Independent.
/* Header */#adw-header {}/* Footer */#adw-footer {}/* Gallery */.adw-gallery {}
Spit Groove Part
Adhere to the principle of consistency
If you want to edit the code, take a few minutes to look at its code style, and if it does, you should do the same.
Style is unified, there is a common thinking environment, the participants can focus on what you want to say, rather than first think you are talking about the language of the planet. Although we present uniform style rules here, we just want to let everyone know and learn from them and revise their own style. Of course, it's also important to keep your own style. Balabala ...
Google HTML/CSS/JS Code Style Guide

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More