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 {} 选择器 除非需要,否则不要在 id 或 class 前加元素名。 /* 不推荐 */ 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;
使用带前缀的命名空间可以防止命名冲突,同时提高代码可维护性。
.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 {
每行 CSS 都应以分号结尾。
/* 不推荐 */ .test { display: block; height: 100px } /* 推荐 */ .test { display: block; height: 100px; } 5.3 属性名结尾属性名和值之间都应有一个空格。
/* 不推荐 */ h3 { font-weight:bold; } /* 推荐 */ h3 { font-weight: bold; } 5.4 声明样式块的分隔