写在前面：，以下是对谷歌的规范的摘选和个人理解；阅读时可参考英语原文，避免我的误读漏读。
实际开发时多用 vscode + prettier 插件的代码规范。
一、协议
<!--1. 尽可能使用 https-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
二、格式
1.小写
<img src="google.png" alt="Google">
h4{
color: #e5e5e5;
}
2.使用 utf-8 编码
<meta charset="utf-8">
3.必要的注释
4. 只使用 TODO 高亮待完成任务
<!-- TODO: 实现图表 -->
三、 html
1.使用 h5
<!DOCTYPE html>
2. 不要闭合空标签
<br>
<hr>
<img>
3.语义化
4.重要图片要有alt; 非必需可为空； 不能缺少 alt
5.分离布局、样式和逻辑；将 css 和 js 尽可能压缩到一起； 减少页面的引用数量
6. 除了 < & 之外。尽可能不用 Unicode 字符；
7. 省略标签； 默认省略 link 和 script 的type(除非不是引入css和js)省略规范
<table>
<thead>
<tr>
<th>1
<th>2
</tr>
</thead>
<tbody>
<tr>
<td>11
<td>22
</tr>
</tbody>
</table>
8. h5 格式
8.1 块级元素; list ; table 换行
8.2 属性多时；换行并缩进
8.3 属性值使用 "" 括起
<md-progress-circular
md-mode="indeterminate"
class="md-accent"
ng-show="ctrl.loading"
md-diameter="35">
</md-progress-circular>
四、 css
1. id 和 class 见名知意； 并尽可能短
2. id 和 class 不和标签名混用
/* 不推荐 */
div.error{}
/* 推荐 */
.error{}
3.属性、属性值尽可能使用简写
/* 样式合并 */
p{
padding: 1rem 2rem;
border: 1px solid #EDEDED;
font:100%/1.6 palatino, georgia, serif;
background: #ebc center center no-repeat;
}
/* 0 的省略 */
h4{
font-size:.8rem;
margin:0;
padding:0;
flex:0px; /* flex 中 0px 是必要的*/
}
4. id 和 class 命名时使用分隔符 -
#video-player{}
.ad-poster{}
5.避免使用奇技淫巧；再想想其他办法
6. css 规范
6.1 按照字母顺序排序 css 属性； 前缀例外
h3{
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
}
6.2 代码块缩进
6.3 多个选择器时换行
6.3 属性值加空格； 后加分号；
6.4 属性值需要时使用单引号;
6.4 代码块之间换行隔开；使用注释将代码块分类;
@import url(https://www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
/* Header */
#adw-header {}
/* Footer */
#adw-footer {}
/* Gallery */
.adw-gallery {}
网友评论