|
| 1 | +# Google HTML/CSS Style Guide Summary |
| 2 | + |
| 3 | +This document summarizes key rules and best practices from the Google HTML/CSS Style Guide. |
| 4 | + |
| 5 | +## 1. General Rules |
| 6 | +- **Protocol:** Use HTTPS for all embedded resources. |
| 7 | +- **Indentation:** Indent by 2 spaces. Do not use tabs. |
| 8 | +- **Capitalization:** Use only lowercase for all code (element names, attributes, selectors, properties). |
| 9 | +- **Trailing Whitespace:** Remove all trailing whitespace. |
| 10 | +- **Encoding:** Use UTF-8 (without a BOM). Specify `<meta charset="utf-8">` in HTML. |
| 11 | + |
| 12 | +## 2. HTML Style Rules |
| 13 | +- **Document Type:** Use `<!doctype html>`. |
| 14 | +- **HTML Validity:** Use valid HTML. |
| 15 | +- **Semantics:** Use HTML elements according to their intended purpose (e.g., use `<p>` for paragraphs, not for spacing). |
| 16 | +- **Multimedia Fallback:** Provide `alt` text for images and transcripts/captions for audio/video. |
| 17 | +- **Separation of Concerns:** Strictly separate structure (HTML), presentation (CSS), and behavior (JavaScript). Link to CSS and JS from external files. |
| 18 | +- **`type` Attributes:** Omit `type` attributes for stylesheets (`<link>`) and scripts (`<script>`). |
| 19 | + |
| 20 | +## 3. HTML Formatting Rules |
| 21 | +- **General:** Use a new line for every block, list, or table element, and indent its children. |
| 22 | +- **Quotation Marks:** Use double quotation marks (`""`) for attribute values. |
| 23 | + |
| 24 | +## 4. CSS Style Rules |
| 25 | +- **CSS Validity:** Use valid CSS. |
| 26 | +- **Class Naming:** Use meaningful, generic names. Separate words with a hyphen (`-`). |
| 27 | + - **Good:** `.video-player`, `.site-navigation` |
| 28 | + - **Bad:** `.vid`, `.red-text` |
| 29 | +- **ID Selectors:** Avoid using ID selectors for styling. Prefer class selectors. |
| 30 | +- **Shorthand Properties:** Use shorthand properties where possible (e.g., `padding`, `font`). |
| 31 | +- **`0` and Units:** Omit units for `0` values (e.g., `margin: 0;`). |
| 32 | +- **Leading `0`s:** Always include leading `0`s for decimal values (e.g., `font-size: 0.8em;`). |
| 33 | +- **Hexadecimal Notation:** Use 3-character hex notation where possible (e.g., `#fff`). |
| 34 | +- **`!important`:** Avoid using `!important`. |
| 35 | + |
| 36 | +## 5. CSS Formatting Rules |
| 37 | +- **Declaration Order:** Alphabetize declarations within a rule. |
| 38 | +- **Indentation:** Indent all block content. |
| 39 | +- **Semicolons:** Use a semicolon after every declaration. |
| 40 | +- **Spacing:** |
| 41 | + - Use a space after a property name's colon (`font-weight: bold;`). |
| 42 | + - Use a space between the last selector and the opening brace (`.foo {`). |
| 43 | + - Start a new line for each selector and declaration. |
| 44 | +- **Rule Separation:** Separate rules with a new line. |
| 45 | +- **Quotation Marks:** Use single quotes (`''`) for attribute selectors and property values (e.g., `[type='text']`). |
| 46 | + |
| 47 | +**BE CONSISTENT.** When editing code, match the existing style. |
| 48 | + |
| 49 | +*Source: [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html)* |
0 commit comments