Google html css 代码规范

写在前面：，以下是对谷歌的规范的摘选和个人理解；阅读时可参考英语原文，避免我的误读漏读。
实际开发时多用 vscode + prettier 插件的代码规范。

一、协议

@import 'https://fonts.googleapis.com/css?family=Open+Sans';

二、格式

1.小写

h4{
    color: #e5e5e5;
}

2.使用 utf-8 编码

3.必要的注释

4. 只使用 TODO 高亮待完成任务

三、 html

1.使用 h5

2. 不要闭合空标签

3.语义化

4.重要图片要有alt; 非必需可为空； 不能缺少 alt

5.分离布局、样式和逻辑；将 css 和 js 尽可能压缩到一起； 减少页面的引用数量

6. 除了 < & 之外。尽可能不用 Unicode 字符；

7. 省略标签； 默认省略 link 和 script 的type(除非不是引入css和js)省略规范

    

        

            
1
            
2
        
    
    

        

            
11
            
22
        
    

8. h5 格式

8.1 块级元素; list ; table 换行

8.2 属性多时；换行并缩进

8.3 属性值使用 "" 括起

四、 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 {}