Hugging Face's logo

Spaces:
PHhTTPS
/
ProxyCLI
Sleeping

App Files Community
ProxyCLI / conductor /code_styleguides /html-css.md
PHhTTPS's picture
PHhTTPS
conductor(setup): Add conductor setup files
298442c
preview code
|
raw
history blame contribute delete
2.75 kB

Google HTML/CSS Style Guide Summary

This document summarizes key rules and best practices from the Google HTML/CSS Style Guide.

1. General Rules

  • Protocol: Use HTTPS for all embedded resources.
  • Indentation: Indent by 2 spaces. Do not use tabs.
  • Capitalization: Use only lowercase for all code (element names, attributes, selectors, properties).
  • Trailing Whitespace: Remove all trailing whitespace.
  • Encoding: Use UTF-8 (without a BOM). Specify <meta charset="utf-8"> in HTML.

2. HTML Style Rules

  • Document Type: Use <!doctype html>.
  • HTML Validity: Use valid HTML.
  • Semantics: Use HTML elements according to their intended purpose (e.g., use <p> for paragraphs, not for spacing).
  • Multimedia Fallback: Provide alt text for images and transcripts/captions for audio/video.
  • Separation of Concerns: Strictly separate structure (HTML), presentation (CSS), and behavior (JavaScript). Link to CSS and JS from external files.
  • type Attributes: Omit type attributes for stylesheets (<link>) and scripts (<script>).

3. HTML Formatting Rules

  • General: Use a new line for every block, list, or table element, and indent its children.
  • Quotation Marks: Use double quotation marks ("") for attribute values.

4. CSS Style Rules

  • CSS Validity: Use valid CSS.
  • Class Naming: Use meaningful, generic names. Separate words with a hyphen (-).
    • Good: .video-player, .site-navigation
    • Bad: .vid, .red-text
  • ID Selectors: Avoid using ID selectors for styling. Prefer class selectors.
  • Shorthand Properties: Use shorthand properties where possible (e.g., padding, font).
  • 0 and Units: Omit units for 0 values (e.g., margin: 0;).
  • Leading 0s: Always include leading 0s for decimal values (e.g., font-size: 0.8em;).
  • Hexadecimal Notation: Use 3-character hex notation where possible (e.g., #fff).
  • !important: Avoid using !important.

5. CSS Formatting Rules

  • Declaration Order: Alphabetize declarations within a rule.
  • Indentation: Indent all block content.
  • Semicolons: Use a semicolon after every declaration.
  • Spacing:
    • Use a space after a property name's colon (font-weight: bold;).
    • Use a space between the last selector and the opening brace (.foo {).
    • Start a new line for each selector and declaration.
  • Rule Separation: Separate rules with a new line.
  • Quotation Marks: Use single quotes ('') for attribute selectors and property values (e.g., [type='text']).

BE CONSISTENT. When editing code, match the existing style.

Source: Google HTML/CSS Style Guide