HTML
语义
HTML5为我们提供了大量的语义元素，旨在精准地描述内容。确保你受益于其丰富的词汇。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!-- bad --> <div id="main"> <div class="article"> <div class="header"> <h1>Blog post</h1> <p>Published: <span>21st Feb, 2015</span></p> </div> <p>…</p> </div> </div> <!-- good --> <main> <article> <header> <h1>Blog post</h1> <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p> </header> <p>…</p> </article> </main> |
确保您理解您正在使用的语义元素。以错误的方式使用语义元素比不使用更糟糕。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- bad --> <h1> <figure> <img alt=Company src=logo.png> </figure> </h1> <!-- good --> <h1> <img alt=Company src=logo.png> </h1> |
简洁
保持代码简洁。忘记旧的XHTML习惯。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!-- bad --> <!doctype html> <html lang=en> <head> <meta http-equiv=Content-Type content="text/html; charset=utf-8" /> <title>Contact</title> <link rel=stylesheet href=style.css type=text/css /> </head> <body> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required=required /> </label> <script src=main.js type=text/javascript></script> </body> </html> <!-- good --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Contact</title> <link rel=stylesheet href=style.css> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required> </label> <script src=main.js></script> </html> |
可访问性
可访问性不应该是一个事后的想法。你不必成为一位WCAG专家来提升你的网站，你可以立即开始修复这些小问题，它将产生巨大的改善，如:
- 学会正确使用alt属性
- 确保你的链接和按钮等都很好地标记(没有<div class =button>这种暴行)
- 不要完全依赖颜色来传达信息
- 显式地给表单控件加标签
|
1 2 3 4 5 |
<!-- bad --> <h1><img alt="Logo" src="logo.png"></h1> <!-- good --> <h1><img alt="My Company, Inc." src="logo.png"></h1> |
语言
虽然定义语言和字符编码是可选的，但推荐在文档级别声明它们，即使它们已经在HTTP请求头部已经指定。字符编码优先使用utf – 8。
|
1 2 3 4 5 6 7 8 9 10 |
<!-- bad --> <!doctype html> <title>Hello, world.</title> <!-- good --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Hello, world.</title> </html> |
性能
除非有一个合理的理由在内容之前加载脚本，否则请不要把它放在前面阻止页面的渲染。如果您的样式表很大，分离出初始化时必须的样式，并在一个独立样式表中延迟加载其它部分。两次HTTP请求显著低于一次，但感知速度是最重要的因素。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- bad --> <!doctype html> <meta charset=utf-8> <script src=analytics.js></script> <title>Hello, world.</title> <p>...</p> <!-- good --> <!doctype html> <meta charset=utf-8> <title>Hello, world.</title> <p>...</p> <script src=analytics.js></script> |
CSS
分号
技术上来讲，分号在CSS里充当一个分隔符，但请把它当作一个终结符。
|
1 2 3 4 5 6 7 8 9 |
/* bad */ div { color: red } /* good */ div { color: red; } |
盒模型
盒模型对整个文档应该是相同的。虽然全局样式 * { box-sizing:border-box;} 很好，但不要在特定元素改变默认的盒模型（如果你可以避免这么做）。
|
1 2 3 4 5 6 7 8 9 10 11 |
/* bad */ div { width: 100%; padding: 10px; box-sizing: border-box; } /* good */ div { padding: 10px; } |
流
不要改变元素的默认行为（如果你可以避免这么做）。尽量保持元素在普通的文档流中。例如，删除图像下面的空白，不应该改变其默认显示:
|
1 2 3 4 5 6 7 8 9 |
/* bad */ img { display: block; } /* good */ img { vertical-align: middle; } |
同样的，不要让一个元素脱离文档流（如果你可以避免这么做）。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* bad */ div { width: 100px; position: absolute; right: 0; } /* good */ div { width: 100px; margin-left: auto; } |
位置
有很多方法可以在CSS中定位元素，但尝试限制自己使用下面的属性/值。优先顺序如下:
