前端代码指南(一)
本文翻译自bendc的《Frontend Guidelines》，由于篇幅过长，这里我分成了三篇，分别为HTML、CSS、Javascript，主要介绍了HTML/CSS/Javascript的代码指南，文章中所提出的指南也并不绝对，一切从实际出发，大家可以根据自己所需来取舍。说实话，英语真的不好,请见谅，欢迎大家纠错，Thanks。
前端代码指南(一)
前端代码指南(二)
前端代码指南(三)
HTML
语义化
HTML5为我们提供了大量的语义化标签使我们可以准确地描述内容，所以请使用这些语义化标签。
<!-- 糟糕的 -->
<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>
<!-- 推荐的-->
<main>
<article>
<header>
<h1>Blog post</h1>
<p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p>
</header>
<p>…</p>
</article>
</main>
但是请确保你了解你使用的语义化标签。如果错误地使用语义化标签还不如不用。
<!-- 糟糕的 -->
<h1>
<figure>
<img alt=Company src=logo.png>
</figure>
</h1>
<!-- 推荐的 -->
<h1>
<img alt=Company src=logo.png>
</h1>简洁
保持代码简洁，忘记你XHTML的旧习惯。
<!-- 糟糕的 -->
<!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 [email protected] required=required />
</label>
<script src=main.js type=text/javascript></script>
</body>
</html>
<!-- 推荐的 -->
<!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 [email protected] required>
</label>
<script src=main.js></script>
</html>可访问性
可访问性不是事后才解决的。你不需要成为一个WCAG专家才能提高你网站的可访问性,你可以通过修复一些小细节来实现,比如：
- 学会正确使用alt属性;
- 确保标记你的超链接和按钮(即让别人看到就明白那个地方是超链接或按钮)
- 不要仅使用色彩来传达意思(主要考虑视力障碍者)
- 显式地标记(label)字段(使用label标签)
<!-- 糟糕的 -->
<h1><img alt="Logo" src="logo.png"></h1>
<!-- 推荐的 -->
<h1><img alt="My Company, Inc." src="logo.png"></h1>语言
虽然声明语言和字符编码是可选的,但是强烈建议在文档内声明(即使他们已经在HTTP头内指定)。编码格式建议优先考虑utf-8。
<!-- 糟糕的 -->
<!doctype html>
<title>Hello, world.</title>
<!-- 推荐的 -->
<!doctype html>
<html lang=en>
<meta charset=utf-8>
<title>Hello, world.</title>
</html>性能
除非某个脚本必须在内容之前加载,否则不要让js阻止页面的呈现。如果你的css文件很大，请将这个css文件分离为俩个css文件(需要首先加载的和可延迟加载的)。俩个http请求虽然比一个慢得多，但是"感官上的速度"才是最重要的因素。
<!-- 糟糕的 -->
<!doctype html>
<meta charset=utf-8>
<script src=analytics.js></script>
<title>Hello, world.</title>
<p>...</p>
<!-- 推荐的 -->
<!doctype html>
<meta charset=utf-8>
<title>Hello, world.</title>
<p>...</p>
<script src=analytics.js></script>如果觉得本文不错的话，帮忙点击下面的推荐哦
>>>>点击阅读原文