这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
高质量的代码的重要性
高质量的代码体现在两个方面：
- 易于维护。
- Bug少。
当需求发生变化，或出Bug需要改时，易于维护的代码改起来更容易，更快。改那些糟糕的代码，费时费力不说，心情也变得糟糕。
Bug少的代码。有利于提高目标用户的满意度。这也是开发人员的职责所在。
如何写出易于维护的代码？
在我看来，易于维护的代码：
- 有统一的代码风格(Code Style)。
- 合理的代码设计。
- 易于管理的项目版本号。
- 清晰明了的提交信息。
统一的代码风格(Code Style)
代码风格指对代码的缩进，空格，命名等方面的约定。统一的代码风格能减少团队成员的理解成本。下面，我们分别从 HTML，CSS 和 JavaScript 来说。
HTML
1 HTML 是要满足W3C标准。 以下是几个比较重要的：
- HTML文档必须有文档类型定义(DTD)。规范推荐使用:
<!DOCTYPE html>。 - 要定义网页的编码。 推荐:
<meta charset="UTF-8">。 - 标签中的字母必须是小写字母。
- 标签必须闭合。自闭合标签，以 / 闭合标签，如
<input type="text" />。 - 标签属性值用双引号包起来。
- 属性名称中的字母必须是小写字母。
- 自定义属性名，以
data-开头。 - img 标签的 alt 属性必填。图片加载失败时，会显示 alt 属性的值。
可以用HTML标准验证工具检查，HTML 是否符合W3C标准。
2 选择语义化(Semantic)的HTML标签。 标签语义化(Semantic)指根据内容的语义，去选择与之匹配的标签。
使用语义化标签的原因：
- 有利于开发者维护代码。语义化标签能提升代码的可读性，让开发者更快找到目标代码。
- 有利于SEO。爬虫通过语义化标签，能抓取更多页面的信息。
常用的语义化标签有：header, footer, aside, article, section, hgroup, h1~h6, nav, strong, small。推荐通读下HTML Living Standard。
尽量不用 div 和 span 这2个没有实际意义的标签。
CSS
1 CSS的类名用BEM命名法 是由Yandex公司推出的一套CSS命名规范。BEM 的名称来源于该方法学的三个组成部分的英文首字母，分别是块（Block）、元素（Element）和修饰符（Modifier）。
CSS 的样式应用是全局性的，没有作用域可言。 BEM 通过元素的命名遵循遵循 block-name__element-name–-modifier-name 来保证命名的唯一性。因此，BEM 能够帮助你在前端开发中实现可复用的组件和代码共享。
