Google Styleguide
FreeGoogle's HTML/CSS style guide for code quality and consistency.
FreeFree tier
About Google Styleguide
The Google HTML/CSS Style Guide is a comprehensive set of formatting and style rules for HTML and CSS, including Sass and GSS files. Published by Google, it aims to improve collaboration, code quality, and enable supporting infrastructure. The guide covers protocol usage (HTTPS), indentation (2 spaces), capitalization (lowercase), trailing whitespace removal, character encoding (UTF-8), comments, action items (TODO), document type (HTML5), and HTML validity. It is intended for raw, working files and allows tools to obfuscate, minify, and compile as long as general code quality is maintained.
Key Features
Use HTTPS for embedded resources (images, media, stylesheets, scripts)
Indent by 2 spaces; no tabs
Use only lowercase for HTML elements, attributes, CSS selectors, and properties
Remove trailing whitespace
Use UTF-8 encoding without BOM
Use comments to explain code purpose and decisions
Mark action items with `TODO:`
Use `!doctype html` for no-quirks mode
Prefer valid HTML code whenever possible
Pros & Cons
Pros
- Improves collaboration by providing a shared style standard
- Measurable baseline quality attribute through valid HTML
- Reduces subtle quirks and incompatibilities in browsers
- Covers both HTML and CSS in one guide
- Backed by Google's engineering practices
Cons
- May require additional linter configurations to enforce rules automatically
- Some rules (e.g., strict lowercase for all properties) may be too opinionated for certain projects
- Does not cover advanced CSS methodologies like BEM or SMACSS
Best For
Establishing consistent coding standards across projects or teamsImproving code review efficiency with a shared referenceOnboarding new developers to team conventionsEnsuring baseline code quality and cross-browser compatibilityLearning best practices for HTML and CSS development
FAQ
What protocol should I use for embedded resources?
Always use HTTPS (https:) for images, media, style sheets, and scripts, unless the files are not available over HTTPS.
What indentation style is recommended?
Indent by 2 spaces at a time. Do not use tabs or mix tabs and spaces.
Should HTML element names be uppercase or lowercase?
Use only lowercase for HTML element names, attributes, attribute values (unless text/CDATA), CSS selectors, properties, and property values.
What doctype should I use?
Use `!doctype html` to ensure no-quirks mode. A document without a doctype is rendered in quirks mode, which can cause subtle failures and incompatibilities.