| name | html-css |
| description | Google's official HTML/CSS style guide. Covers formatting, naming, semantics, accessibility, and best practices for web markup and styling. |
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)
<!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)
.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.
