HTML+CSS风格规范
HTML部分
标签小写、属性名小写
HTML
大小写不敏感,更推荐的风格是全部小写
<SECTION CLASS="red-text">
<P>不好</p>
</SECTION>
<section class="red-text">
<p>好</p>
</section>
唯一的例外是DOCTYPE
,但是再强调一次,大小写都是无错的,这么写只是风格习惯
<!DOCTYPE html>
属性值永远使用引号
属性值内部没有空格的话,引号是可选的,但是推荐永远使用引号,双引号
<!-- 不好 -->
<table class=striped></table>
<table class='striped'></table>
<!-- 好 -->
<table class="striped"></table>
闭合标签
HTML5规范并不严格要求空元素的闭合,但是更规范的写法希望您永远加上斜线
/
进行闭合
<!-- 不好 -->
<p>这是一个没有为标签的段落
<img src="url">
<!-- 好 -->
<p>闭合的标签</p>
<img src="url" />
属性赋值的空格
在JavaScript中我们推崇在
=
左右加上空格,但是HTML中推荐**=
前后不加空格**
<!-- 不好 -->
<link rel = "stylesheet" href = "style.css"/>
<!-- 好 -->
<link rel="stylesheet" href="style.css" />
属性换行
超过三个属性,换行会有更好的可读性
<!-- 不好 -->
<input class="form-style" id="main" type="password" />
<!-- 好 -->
<input
class="form-style"
id="main"
type="password"
/>
CSS部分
分号
JavaScript中有ASI,所以很多人,包括尤雨溪等大神都推崇丢弃分号,但是CSS没有ASI,你需要永远加分号
/* 报错! */
.great-style {
border: 1px green solid
background: red
}
/* 好 */
.great-style {
border: 1px green solid;
background: red;
}
花括号
花括号前留白,花括号换行
/* 不好 */
.great-style{border: 1px green solid;background: red;}
/* 好 */
.great-style {
border: 1px green solid;
background: red;
}
冒号
冒号后跟一空格
/* 不好 */
.great-style {
border:1px green solid
background:red
}
/* 好 */
.great-style {
border: 1px green solid;
background: red;
}
减少内联样式
少量的内联样式书写方便,但是大量使用内联样式会导致追踪困难,样式管理散乱
<!-- 不好 -->
<div style="padding: 5px;background: red;border-radius: 5px;"></div>
/* 好 */
<div class="great-style"></div>
<style>
.great-style {
padding: 5px;
background: red;
border-radius: 5px;
}
</style>
测试时使用自定义属性
在e2e测试中进行元素选择时,优先添加
data-cy
属性
<button
class="btn btn-large"
id="main"
name="submission"
role="button"
data-cy="submit"
>
Submit
</button>
// 优先使用data-cy选择元素,其次content、id、class、tag
cy.get("[data-cy=submit]").click();
cy.contains("Submit").click();
cy.get("#main").click();
cy.get(".btn.btn-large").click();