Google HTML/CSS Style Guide

This article introduces the HTML and CSS formatting conventions recommended by Google to establish good personal coding habits.

General Style Rules

Omit the protocol portion of URLs for images, styles, scripts, and other media files (http:,https:), unless the file is not available over both protocols. This scheme is called a protocol-relative URL. The benefit is that whether you access the page using HTTPS or HTTP, the browser will request page resources using the same protocol, and it can also save some bytes.

<!-- 不推荐 -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>

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

/* 不推荐 */
.example {
  background: url("https://www.google.com/images/example");
}

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

General Formatting Rules

Indentation

Indent by 2 spaces at a time. Do not use tabs or mix tabs and spaces for indentation.

<ul>
  <li>Fantastic
  <li>Great
</ul>

.example {
  color: blue;
}

Capitalization

Use only lowercase for the following: HTML element names, attributes, attribute values (unless text/CDATA), CSS selectors, properties, and property values.

<!-- 不推荐 -->
<A HREF="/">Home</A>

<!-- 推荐 -->
<img src="google.png.html" alt="Google">

/* 不推荐 */
color: #E5E5E5;

/* 推荐 */
color: #E5E5E5;

Trailing Whitespace

<!-- 不推荐 -->
<p>What?_

<!-- 推荐 -->
<p>Yes please.

General Meta Rules

Encoding

Specify the encoding in HTML via <meta charset="utf-8">. There is no need to specify it in CSS, because UTF-8 is the default.

Comments

Use comments to explain code: the modules it contains, its functionality, and its advantages.

Task Items

Use TODO to mark to-do items, rather than other markers like @@.

<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

HTML Style Rules

Document Type

HTML documents should use the HTML5 document type: <!DOCTYPE html>.

Void elements do not need to close themselves,<br>Do not write<br />。

HTML Validity

Use valid HTML wherever possible.

<!-- 不推荐 -->
<title>Test</title>
<article>This is only a test.

<!-- 推荐 -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

Semantics

<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>

<!-- 推荐 -->
<a href="recommendations/index.html">All recommendations</a>

Multimedia Fallback

For multimedia elements such as images, videos, and canvas animations, ensure that other accessible content is provided. Images can use alternative text (alt), and videos and audio can use text versions.

<!-- 不推荐 -->
<img src="spreadsheet.png.html">

<!-- 推荐 -->
<img src="spreadsheet.png.html" alt="Spreadsheet screenshot.">

Separation of Concerns

Separate markup, style, and script, ensuring minimal coupling between them.

Entity References

If the team's files and editors use the same encoding, there is no need to use entity references, such as—， ”，☺, except for some characters that have special meaning in HTML (like < and &) and invisible characters (like spaces).

<!-- 不推荐 -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.

<!-- 推荐 -->
The currency symbol for the Euro is “€”.

type Attribute

Do not specify the type attribute when referencing style sheets and scripts, unless it is not CSS or JavaScript.
Because in HTML5, the default type for styles is text/css, and for scripts it is text/javascript.

<!-- 不推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css"
  type="text/css">

<!-- 推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">

<!-- 不推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
  type="text/javascript"></script>

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

HTML Formatting Rules

HTML Quotes

Use double quotes for attribute values.

<!-- 不推荐 -->
<a class='maia-button maia-button-secondary'>Sign in</a>

<!-- 推荐 -->
<a class="maia-button maia-button-secondary">Sign in</a>

CSS Style Rules

ID and Class Naming

Use meaningful id and class names.

/* 不推荐: 含义不明确 */
#yee-1901 {}

/* 不推荐: 按直觉来的 */
.button-green {}
.clear {}

/* 推荐: 指定含义 */
#gallery {}
#login {}
.video {}

/* 推荐: 通用 */
.aux {}
.alt {}

ID and Class Naming Style

id and class should be as short as possible while remaining easy to understand.

/* 不推荐 */
#navigation {}
.atr {}

/* 推荐 */
#nav {}
.author {}

Selectors

Do not prefix an element name before an id or class unless necessary.

/* 不推荐 */
ul#example {}
div.error {}

/* 推荐 */
#example {}
.error {}

Property Shorthand

Use shorthand properties wherever possible in CSS (such as font), which improves coding efficiency and code readability.

/* 不推荐 */
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;

/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0 and Units

Do not add a unit when the value is 0.

margin: 0;
padding: 0;

Leading 0

When the value is between -1 and 1, a leading 0 is not needed.

font-size: .8em;

Hexadecimal Notation

/* 不推荐 */
color: #EEBBCC;

/* 推荐 */
color: #ebc;

Prefixes

Using prefixed namespaces can prevent naming conflicts and improve code maintainability.

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

ID and Class Name Separators

Using hyphens in selectors improves readability.

/* 不推荐:  “demo” 和 “image” 之间没有分隔符 */
.demoimage {}

/* 不推荐: 使用下划线 */
.error_status {}

/* 推荐 */
#video-id {}
.ads-sample {}

CSS Formatting Rules

Declaration Order

Writing CSS in alphabetical order of property names is easy to read and maintain. Ignore properties with browser prefixes when sorting.

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

Block Content Indentation

To reflect hierarchy and improve readability, all block content should be indented.

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

Declaration Stops

Every line of CSS should end with a semicolon.

/* 不推荐 */
.test {
  display: block;
  height: 100px
}

/* 推荐 */
.test {
  display: block;
  height: 100px;
}

Property Name Stops

There should be a space between the property name and value.

/* 不推荐 */
h3 {
  font-weight:bold;
}

/* 推荐 */
h3 {
  font-weight: bold;
}

Declaration Block Separation

Use a space between the selector and {}.

/* Not recommended: missing space */
#video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
#video
{
  margin-top: 1em;
}

/* 推荐 */
#video {
  margin-top: 1em;
}

Selector and Declaration Separation

Each selector starts on a new line.

/* 不推荐 */
a:focus, a:active {
  position: relative; top: 1px;
}

/* 推荐 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

Rule Separation

Separate rules with blank lines.

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

CSS Quotes

Use single quotes for attribute selectors and property values. URI values do not need quotes.

/* 不推荐 */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}

/* 推荐 */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

CSS Meta Rules

Section Comments

Use comments to divide CSS into sections.

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

Original URL: https://google.github.io/styleguide/htmlcssguide.xml