testdino-hq Google HTML/CSS Style Guide
Official Google HTML and CSS coding standards for consistent web development.
Quick Reference
Golden Rules
- Semantic HTML — use appropriate elements
- Lowercase everything — tags, attributes, values
- Close all tags — even optional ones
- Use meaningful class names — describe purpose, not appearance
- Accessibility first — ARIA, alt text, semantic structure
- Mobile-first CSS — start with mobile, enhance for desktop
- BEM or similar — consistent naming methodology
HTML Conventions (Preview)
<!-- ✓ CORRECT -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<header class="site-header">
<h1>Welcome</h1>
</header>
</body>
</html>
CSS Conventions (Preview)
/* ✓ CORRECT */
.user-profile {
display: flex;
padding: 1rem;
}
.user-profile__avatar {
width: 48px;
height: 48px;
}
When to Use This Guide
- Writing new HTML/CSS
- Refactoring existing markup/styles
- Code reviews
- Setting up linting rules
- Onboarding new team members
Install
npx skills add testdino-hq/google-styleguides-skills/html-css
Full Guide
See html-css.md for complete details, examples, and edge cases.