一、script,css,url中引用外部资源,省略http或者https直接以//开头
二、通用代码风格:
1. 缩进两个空格
2. 只使用小写,包括标签名、属性名、属性值
3. 移除结尾多余的空格
三、通用Meta规则
1. 确保你的IDE使用的是UTF-8编码来保存文件的,且不要带上BOM
2. 在需要地地方进行注释
3. 用 TODO 来标志代码中需要完善的地方
四、HTML书写规则
1. 使用语义化的html标签,根据用途来选择标签
<!-- 不推荐 --> <div onclick="goToRecommendations();">All recommendations</div> <!-- 推荐 --> <a href="recommendations/">All recommendations</a>
2. 把多媒体元素可知化。像图片、视频、动画等多媒体元素,要有相关的文字来体现其内容,比如<img> 可以使用alt属性来说明图片内容。
<!-- 不推荐 --> <img src="spreadsheet.png"> <!-- 推荐 --> <img src="spreadsheet.png" alt="Spreadsheet screenshot.">
4. 确保页面的 结构、样式、行为三者相分离
5. 优化标签。有些标签是不需要用到的,能少就少
6. 省略<style>和<script>的type属性
五、css书写规则
1. ID和class的命名尽可能短,并符合语义
2. 尽量少用多重选择器或后代选择器,因为这会影响性能。
3. 使用组合属性
<!-- 不推荐 --> padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; <!-- 推荐 --> padding: 0 1em 2em;
4. 如果css属性的值为0,则后面不要带上单位。省略小数前面的0。比如 0.8 可以写成 .8
5. 在URI类型的值里不要加上引号
@import url(//www.google.com/css/go.css);
6. 在ID和class中使用 - 来作为连字符。
7. 每个css属性声明后都要使用一个分号,即使是最后的那个。
8. 在紧跟属性名的冒号后使用一个空格
六、 google css/html代码规则
1. 只使用小写:包括标签、选择器、属性以及属性值
2. 尾部空格:删除多余的尾部空格
3. 使用TODO关键字标志待办事项
4. 在style和script标签中省略type属性
5. ID和class的命名使用
6. 使用双引号:
<a class="maia-button maia-button-secondary">Sign in</a>