Google HTML/CSS 编写格式规范(2)

HTML 引号 属性值用双引号。

<!-- 不推荐 --> <a class='maia-button maia-button-secondary'>Sign in</a> <!-- 推荐 --> <a class="maia-button maia-button-secondary">Sign in</a> 4、CSS 风格规范 4.1 ID 和 Class 命名

使用有含义的 id 和 class 名称。

/* 不推荐: 含义不明确 */ #yee-1901 {} /* 不推荐: 按直觉来的 */ .button-green {} .clear {} /* 推荐: 指定含义 */ #gallery {} #login {} .video {} /* 推荐: 通用 */ .aux {} .alt {} 4.2 ID 和 Class 命名风格

id 和 class 应该尽量简短,同时要容易理解。

/* 不推荐 */ #navigation {} .atr {} /* 推荐 */ #nav {} .author {} 选择器 除非需要,否则不要在 idclass 前加元素名。 /* 不推荐 */ ul#example {} div.error {} /* 推荐 */ #example {} .error {} 4.3 属性简写

尽量使用 CSS 中可以简写的属性 (如 font),可以提高编码效率以及代码可读性。

/* 不推荐 */ 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; 4.4 0和单位

值为 0 时不用添加单位。
margin: 0;
padding: 0;
开头的 0
值在 -1 和 1 之间时,不需要加 0。
font-size: .8em;

4.5 16进制表示法 /* 不推荐 */ color: #eebbcc; /* 推荐 */ color: #ebc; 4.6 前缀

使用带前缀的命名空间可以防止命名冲突,同时提高代码可维护性。

.adw-help {} /* AdWords */ #maia-note {} /* Maia */ 4.7 ID 和 Class 命名分隔符

选择器中使用连字符可以提高可读性。

/* 不推荐: “demo” 和 “image” 之间没有分隔符 */ .demoimage {} /* 不推荐: 使用下划线 */ .error_status {} /* 推荐 */ #video-id {} .ads-sample {} 5、CSS 格式规范 5.1 书写顺序

按照属性首字母顺序书写 CSS 易于阅读和维护,排序时忽略带有浏览器前缀的属性。

background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em; 5.2 块级内容缩进

为了反映层级关系和提高可读性,块级内容都应缩进。
@media screen, projection {

html { background: #fff; color: #444; } } 5.3 声明结束

每行 CSS 都应以分号结尾。

/* 不推荐 */ .test { display: block; height: 100px } /* 推荐 */ .test { display: block; height: 100px; } 5.3 属性名结尾

属性名和值之间都应有一个空格。

/* 不推荐 */ h3 { font-weight:bold; } /* 推荐 */ h3 { font-weight: bold; } 5.4 声明样式块的分隔

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/c86e0ed77f8e9cf239d05b9ab8a5b9d9.html