HTML/CSS代码规范：Google Web前端开发指南
项目地址: https://gitcode.com/gh_mirrors/styleguide4/styleguide 你是否曾在协作开发中遇到过代码格式混乱、风格不统一的问题？是否因为缩进不一致、命名不规范而浪费大量时间在代码审查上？本文将详细介绍Google开源项目的HTML/CSS编码规范，帮助你写出专业、易维护的前端代码。读完本文后，你将掌握Google的HTML/CSS最佳实践，包括缩进规则、命名约定、代码组织等关键要点，并能应用这些规范提升你的项目质量。
一、通用规范
1.1 缩进规则
使用2个空格进行缩进，不要使用制表符（Tab）或混合使用空格和制表符。这样可以确保在不同编辑器和环境中代码显示一致。
<!-- 推荐 -->
<ul>
<li>Fantastic
<li>Great
</ul>
/* 推荐 */
.example {
color: blue;
}
1.2 大小写规范
所有代码都应使用小写，包括HTML元素名、属性、属性值（除非text/CDATA）、CSS选择器、属性和属性值（字符串除外）。
<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png" alt="Google">
/* 不推荐 */
color: #E5E5E5;
/* 推荐 */
color: #e5e5e5;
1.3 编码格式
使用UTF-8编码（无BOM）。在HTML模板和文档中通过<meta charset="utf-8">指定编码，样式表无需指定编码，默认采用UTF-8。
1.4 协议规范
尽可能使用HTTPS协议加载嵌入式资源，如图片、样式表和脚本。
<!-- 不推荐：省略协议 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- 不推荐：使用HTTP -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- 推荐 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
二、HTML规范
2.1 文档类型
使用HTML5文档类型：<!DOCTYPE html>。推荐使用HTML语法（text/html），不要使用XHTML，因为XHTML缺乏浏览器和基础设施支持，且优化空间小于HTML。
<!-- 推荐 -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>
2.2 语义化标签
根据元素的用途使用合适的HTML标签。例如，使用标题元素（<h1>-<h6>）表示标题，<p>表示段落，<a>表示链接等。这有助于提高可访问性、代码复用性和效率。
<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 -->
<a href="recommendations/">All recommendations</a>
2.3 多媒体备选内容
为多媒体提供替代内容，如图像的alt属性、视频和音频的文字记录和字幕。这对无障碍访问至关重要，例如盲人用户需要通过alt属性了解图像内容。
<!-- 不推荐 -->
<img src="spreadsheet.png">
<!-- 推荐 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
2.4 关注点分离
严格分离结构（标记）、表现（样式）和行为（脚本）。确保文档和模板只包含HTML，且仅用于结构目的；将所有表现相关的内容移至样式表，行为相关的内容移至脚本。
<!-- 不推荐 -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
<u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
my website without doing everything all over again!</center>
<!-- 推荐 -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
doing it: separating concerns and avoiding anything in the HTML of
my website that is presentational.
<p>It’s awesome!
2.5 可选标签省略
为了优化文件大小和可读性，可以省略HTML5规范中定义的可选标签。例如，<html>、<head>、<body>、<p>的结束标签等。
<!-- 不推荐 -->
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>
<!-- 推荐 -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
三、CSS规范
3.1 类命名约定
使用有意义或通用的类名，避免使用表现性或晦涩的名称。类名应反映元素的用途，或在没有特定含义时使用通用名称。
/* 不推荐：无意义 */
.yee-1901 {}
/* 不推荐：表现性 */
.button-green {}
.clear {}
/* 推荐：特定含义 */
.gallery {}
.login {}
.video {}
/* 推荐：通用 */
.aux {}
.alt {}
3.2 类名风格
类名应尽可能简短但又能清晰传达其含义。在保证可理解性的前提下，使用简洁的类名有助于提高代码效率。
/* 不推荐 */
.navigation {}
.atr {}
/* 推荐 */
.nav {}
.author {}
3.3 类名分隔符
使用连字符（-）分隔类名中的单词，不要使用其他字符（包括不使用分隔符），以提高可读性和可扫描性。
/* 不推荐：未分隔"demo"和"image" */
.demoimage {}
/* 不推荐：使用下划线而非连字符 */
.error_status {}
/* 推荐 */
.video-id {}
.ads-sample {}
3.4 简写属性
尽可能使用CSS简写属性，如font、padding、margin等。简写属性可以减少代码量，提高可读性。
/* 不推荐 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
3.5 0值和单位
“0”值后不需要指定单位，除非必须。这可以简化代码并避免不必要的字符。
/* 推荐 */
flex: 0px; /* flex-basis组件需要单位 */
flex: 1 1 0px; /* 在IE11中需要单位 */
margin: 0;
padding: 0;
3.6 十六进制表示法
尽可能使用3字符十六进制表示法表示颜色值，它比6字符表示法更简洁。
/* 不推荐 */
color: #eebbcc;
/* 推荐 */
color: #ebc;
四、代码组织
4.1 文件结构
合理组织HTML和CSS文件，遵循关注点分离原则。将HTML文件放在项目根目录，CSS文件放在assets/css目录下，如本项目中的assets/css/style.scss。
4.2 注释规范
使用注释解释代码的用途、覆盖范围以及选择特定解决方案的原因。虽然HTML和CSS代码的注释要求不如其他语言严格，但适当的注释可以提高代码的可维护性。
<!-- TODO: 移除可选标签 -->
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
五、总结与展望
Google的HTML/CSS编码规范为前端开发提供了一套全面的指导原则，涵盖了从基本格式到高级实践的各个方面。遵循这些规范可以提高代码的一致性、可读性和可维护性，减少协作开发中的摩擦。
随着Web技术的不断发展，这些规范也在不断更新和完善。建议定期查看项目中的htmlcssguide.html文件，以获取最新的规范内容。同时，结合自动化工具如linters和格式化器，可以更轻松地执行这些规范，确保项目代码质量。
希望本文能够帮助你理解并应用Google的HTML/CSS编码规范。如果你有任何问题或建议，欢迎在项目仓库中提出issue或PR，共同完善这份指南。
如果你觉得本文对你有帮助，请点赞、收藏并关注我们，以获取更多前端开发的最佳实践和技巧！下期我们将介绍JavaScript代码规范，敬请期待。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
