Google HTML/CSS Style Guide

https://google.github.io/styleguide/htmlcssguide.html
Admin
A comprehensive style guide that defines formatting and style rules for HTML and CSS to improve...
Tokens:5,669
Snippets:70
Trust Score:8.3
Update:7 months ago
Show doc for...
Tokens:
Raw
### CSS Declaration Order Example

Source: https://google.github.io/styleguide/htmlcssguide.html

Demonstrates alphabetized CSS declarations, including vendor-specific prefixes. This optional rule aims for consistent and maintainable code.

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

--------------------------------

### CSS Section Comments Example

Source: https://google.github.io/styleguide/htmlcssguide.html

Provides an example of using section comments in CSS to group related styles, separated by new lines for better organization.

```css
/* Header */

.adw-header {}

/* Footer */

.adw-footer {}

/* Gallery */

.adw-gallery {}
```

--------------------------------

### CSS Block Content Indentation Example

Source: https://google.github.io/styleguide/htmlcssguide.html

Illustrates indentation for block content within CSS rules, such as media queries, to reflect hierarchy and improve readability.

```css
@media screen, projection {

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

}
```

--------------------------------

### HTML Document Type and Validity

Source: https://google.github.io/styleguide/htmlcssguide.html

This code example illustrates the correct way to declare the HTML document type using `<!doctype html>` to ensure no-quirks mode rendering. It also shows the recommended inclusion of `<meta charset="utf-8">` for proper character encoding, promoting valid and consistent HTML structure.

```html
<!-- 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>
```

--------------------------------

### Provide Multimedia Fallback Content

Source: https://google.github.io/styleguide/htmlcssguide.html

Ensure multimedia elements like images have meaningful alternative text. This is critical for accessibility, allowing screen readers to describe content to users.

```html
<!-- Not recommended -->
<img src="spreadsheet.png">

<!-- Recommended -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
```

--------------------------------

### Remove Trailing Whitespace (HTML)

Source: https://google.github.io/styleguide/htmlcssguide.html

This example demonstrates the removal of trailing whitespace in HTML content. Trailing whitespace can complicate code diffs and is generally considered unnecessary, so the recommended practice is to eliminate it.

```html
<!-- Not recommended -->
<p>What?_

<!-- Recommended -->
<p>Yes please.
```

--------------------------------

### CSS Selector and Declaration Separation

Source: https://google.github.io/styleguide/htmlcssguide.html

Illustrates the recommended practice of placing each CSS selector and declaration on a new line for improved readability and structure.

```css
/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}

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

--------------------------------

### Use HTTPS for Embedded Resources (HTML/CSS)

Source: https://google.github.io/styleguide/htmlcssguide.html

This snippet demonstrates the recommended practice of using HTTPS for all embedded resources like scripts, images, and stylesheets. It contrasts this with non-recommended methods that omit the protocol or use HTTP, which can lead to security warnings or broken content.

```html
<!-- Not recommended: omits the protocol -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Not recommended: uses HTTP -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Recommended -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
```

```css
/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
```

--------------------------------

### CSS Declaration Block Separation

Source: https://google.github.io/styleguide/htmlcssguide.html

Demonstrates the recommended spacing between a CSS selector and its declaration block, requiring a single space before the opening brace which should be on the same line.

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

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

/* Recommended */
.video {
  margin-top: 1em;
}
```

--------------------------------

### Lowercase Usage in HTML and CSS

Source: https://google.github.io/styleguide/htmlcssguide.html

This code snippet highlights the importance of using only lowercase for HTML element names, attributes, attribute values, CSS selectors, properties, and property values. It shows examples of non-recommended uppercase usage versus the recommended lowercase standard.

```html
<!-- Not recommended -->
<A HREF="/">Home</A>

<!-- Recommended -->
<img src="google.png" alt="Google">
```

```css
/* Not recommended */
color: #E5E5E5;

/* Recommended */
color: #e5e5e5;
```

--------------------------------

### CSS Class Naming Conventions

Source: https://google.github.io/styleguide/htmlcssguide.html

Demonstrates recommended and not recommended approaches for naming CSS classes. Prefers meaningful, specific, or generic names over presentational or cryptic ones. This improves understandability and reduces the likelihood of unnecessary changes.

```css
/* Not recommended: meaningless */
.yee-1901 {}

/* Not recommended: presentational */
.button-green {}
.clear {}

/* Recommended: specific */
.gallery {}
.login {}
.video {}

/* Recommended: generic */
.aux {}
.alt {}
```

--------------------------------

### CSS Selector Prefixes

Source: https://google.github.io/styleguide/htmlcssguide.html

Shows the optional use of application-specific prefixes for CSS selectors. Prefixes act as namespaces to prevent naming conflicts in large projects or embedded code, making maintenance easier.

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

--------------------------------

### Indentation and Formatting (HTML/CSS)

Source: https://google.github.io/styleguide/htmlcssguide.html

This section illustrates the recommended indentation style using 2 spaces for both HTML and CSS code. It explicitly advises against using tabs or mixing tabs and spaces to maintain consistent code formatting across projects.

```html
<ul>
  <li>Fantastic
  <li>Great
</ul>
```

```css
.example {
  color: blue;
}
```

--------------------------------

### CSS Shorthand Properties

Source: https://google.github.io/styleguide/htmlcssguide.html

Demonstrates the use of CSS shorthand properties for improved code efficiency and understandability. Shorthand properties like `font` and `padding` allow multiple related properties to be set in a single declaration.

```css
/* 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;
```

--------------------------------

### Omit Optional HTML Tags

Source: https://google.github.io/styleguide/htmlcssguide.html

Consider omitting optional tags as defined by the HTML5 specification to optimize file size and improve code scannability.

```html
<!-- Not recommended -->
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- Recommended -->
<!doctype html>
<title>Saving money, saving bytes</title>
<p>Qed.
```

--------------------------------

### Separate Structure, Presentation, and Behavior

Source: https://google.github.io/styleguide/htmlcssguide.html

Maintain a strict separation between HTML structure, CSS presentation, and JavaScript behavior. Avoid inline styles and presentational HTML tags to improve maintainability.

```html
<!-- Not recommended -->
<h1 style="font-size: 1em;">HTML sucks</h1>
<center>I can’t believe there’s no way to control the styling...</center>

<!-- Recommended -->
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>It’s awesome!
```

--------------------------------

### CSS Declaration Termination (Semicolon)

Source: https://google.github.io/styleguide/htmlcssguide.html

Shows the recommended practice of ending every CSS declaration with a semicolon for consistency and extensibility, contrasting it with the non-recommended approach.

```css
/* Not recommended */
.test {
  display: block;
  height: 100px
}

/* Recommended */
.test {
  display: block;
  height: 100px;
}
```

--------------------------------

### Avoid Unnecessary Entity References

Source: https://google.github.io/styleguide/htmlcssguide.html

Use UTF-8 encoding for files and directly include special characters instead of using HTML entity references, except for characters that have special meaning in HTML syntax.

```html
<!-- Not recommended -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.

<!-- Recommended -->
The currency symbol for the Euro is “€”.
```

--------------------------------

### CSS Rule Separation

Source: https://google.github.io/styleguide/htmlcssguide.html

Shows the recommended practice of separating distinct CSS rules with a blank line (two line breaks) to enhance visual organization.

```css
html {
  background: #fff;
}

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

--------------------------------

### CSS Property Name Spacing

Source: https://google.github.io/styleguide/htmlcssguide.html

Highlights the correct spacing between a CSS property name and its value, emphasizing a single space after the colon and no space before it.

```css
/* Not recommended */
h3 {
  font-weight:bold;
}

/* Recommended */
h3 {
  font-weight: bold;
}
```

--------------------------------

### HTML Line-Wrapping for Readability

Source: https://google.github.io/styleguide/htmlcssguide.html

Optionally wrap long HTML lines to enhance readability. Indent continuation lines to distinguish them from child elements. Consistency within a project is key, ideally enforced by automated formatting tools.

```html
<button
  mat-icon-button
  color="primary"
  class="menu-button"
  (click)="openMenu()">
  <mat-icon>menu</mat-icon>
</button>

<button mat-icon-button color="primary" class="menu-button"
    (click)="openMenu()">
  <mat-icon>menu</mat-icon>
</button>

<button
    mat-icon-button
    color="primary"
    class="menu-button"
    (click)="openMenu()">
  <mat-icon>menu</mat-icon>
</button>

<button mat-icon-button
        color="primary"
        class="menu-button"
        (click)="openMenu()">
  <mat-icon>menu</mat-icon>
</button>
```

--------------------------------

### Mark Action Items with TODO (HTML/CSS)

Source: https://google.github.io/styleguide/htmlcssguide.html

This snippet shows the recommended way to mark action items or todos within HTML and CSS comments using the `TODO` keyword followed by a colon and the action item description. This ensures clear identification of tasks that need attention.

```html
{# TODO: Revisit centering. #}
<center>Test</center>
```

```html
<!-- TODO: Remove optional tags. -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>
```

--------------------------------

### CSS Unit and Leading Zero Handling

Source: https://google.github.io/styleguide/htmlcssguide.html

Provides guidelines for handling zero values and leading zeros in CSS. Unit specifications can be omitted after zero values unless required for clarity or compatibility. Leading zeros should always be included for values between -1 and 1.

```css
flex: 0px; /* This flex-basis component requires a unit. */
flex: 1 1 0px; /* Not ambiguous without the unit, but needed in IE11. */
margin: 0;
padding: 0;

font-size: 0.8em;
```

--------------------------------

### HTML General Formatting: New Lines and Indentation

Source: https://google.github.io/styleguide/htmlcssguide.html

Format HTML by placing each block, list, or table element on a new line and indenting child elements. This improves readability, especially for nested structures. Exceptions for list items (`<li>`) are allowed if whitespace issues arise, with linters encouraged to warn rather than error.

```html
<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 Hexadecimal Color Notation

Source: https://google.github.io/styleguide/htmlcssguide.html

Recommends using 3-character hexadecimal notation for CSS color values when possible. This shorthand notation is more succinct and reduces the overall code length.

```css
/* Not recommended */
color: #eebbcc;

/* Recommended */
color: #ebc;
```

--------------------------------

### Use Semantic HTML Elements

Source: https://google.github.io/styleguide/htmlcssguide.html

Use HTML elements for their intended purpose to improve accessibility and code efficiency. Avoid using generic containers like div for interactive elements when semantic tags like anchor are appropriate.

```html
<!-- Not recommended -->
<div onclick="goToRecommendations();">All recommendations</div>

<!-- Recommended -->
<a href="recommendations/">All recommendations</a>
```

--------------------------------

### CSS Quotation Mark Usage

Source: https://google.github.io/styleguide/htmlcssguide.html

Details the preference for single quotes (`''`) over double quotes (`""`) for attribute selectors and property values in CSS, with exceptions for `url()` and `@charset`.

```css
/* Not recommended */
@import url("https://www.google.com/css/maia.css");

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

/* Recommended */
@import url(https://www.google.com/css/maia.css);

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

--------------------------------

### CSS !important Declarations

Source: https://google.github.io/styleguide/htmlcssguide.html

Advises against the use of `!important` declarations in CSS. These declarations disrupt the natural cascade of styles, making them difficult to manage and override. Selector specificity should be used instead to control style application.

```css
/* Not recommended */
.example {
  font-weight: bold !important;
}

/* Recommended */
.example {
  font-weight: bold;
}
```

--------------------------------

### CSS Class Name Style and Delimiters

Source: https://google.github.io/styleguide/htmlcssguide.html

Illustrates best practices for CSS class name length and word separation. Class names should be as short as possible but as long as necessary to convey meaning. Words within class names should be separated by hyphens for improved readability and scannability.

```css
/* Not recommended */
.navigation {}
.atr {}

/* Recommended */
.nav {}
.author {}

/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}

/* Not recommended: uses underscore instead of hyphen */
.error_status {}

/* Recommended */
.video-id {}
.ads-sample {}
```

--------------------------------

### Ensure CSS Validity

Source: https://google.github.io/styleguide/htmlcssguide.html

Write valid CSS code whenever possible. Utilize tools like the W3C CSS validator to check for errors. Valid CSS ensures that styles are applied correctly, prevents unused code, and maintains a higher baseline quality for stylesheets.

```css
/* Example of valid CSS */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  width: 960px;
  margin: 0 auto;
}
```

--------------------------------

### Avoid Unnecessary ID Attributes in HTML

Source: https://google.github.io/styleguide/htmlcssguide.html

Prefer `class` for styling and `data` attributes for scripting over `id`. When `id` is necessary, include a hyphen in its value (e.g., `user-profile`) to prevent conflicts with JavaScript global variables, as `id` attributes are exposed as properties on the `window` object.

```html
<!-- Not recommended: `window.userProfile` will resolve to reference the <div> node -->
<div id="userProfile"></div>

<!-- Recommended: `id` attribute is required and its value includes a hyphen -->
<div aria-describedby="user-profile">
  ...
  <div id="user-profile"></div>
  ...
</div>
```

--------------------------------

### Use Double Quotation Marks for HTML Attributes

Source: https://google.github.io/styleguide/htmlcssguide.html

Consistently use double quotation marks (`"`) for all HTML attribute values. This standard practice ensures consistency and avoids potential parsing issues that can arise with single quotes (`'`).

```html
<!-- Not recommended -->
<a class='maia-button maia-button-secondary'>Sign in</a>

<!-- Recommended -->
<a class="maia-button maia-button-secondary">Sign in</a>
```

--------------------------------

### Omit Type Attributes for Scripts and Stylesheets

Source: https://google.github.io/styleguide/htmlcssguide.html

Avoid using `type` attributes for `<link rel='stylesheet'>` and `<script>` tags when using standard CSS and JavaScript. HTML5 provides default values (`text/css` and `text/javascript`), making explicit declaration redundant and improving compatibility.

```html
<!-- Not recommended -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css"
    type="text/css">

<!-- Recommended -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css">

<!-- Not recommended -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"
    type="text/javascript"></script>

<!-- Recommended -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
```

--------------------------------

### CSS Type and ID Selector Usage

Source: https://google.github.io/styleguide/htmlcssguide.html

Advises against qualifying class names with type selectors and avoiding ID selectors. This practice improves performance by reducing unnecessary ancestor selectors and avoids the difficulties of ensuring ID uniqueness across a page. Class selectors are preferred.

```css
/* Not recommended */
ul.example {}
div.error {}

/* Recommended */
.example {}
.error {}

/* Not recommended */
#example {}

/* Recommended */
.example {}
```
Tokens:
Raw