实用前端实践
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
前端开发远不止编写简洁的代码。虽然编写简洁易读的代码并非强制要求，但它能避免日后很多麻烦。编写出永远不会被修改或再次查看的代码的可能性微乎其微，而浪费时间在分析旧代码上纯属浪费时间。以下是一些针对 HTML、CSS 和 JavaScript 的关键 Web 开发最佳实践。
代码一致性
布局
代码应始终保持缩进、嵌套、包含大括号、引号和换行符的规范，以确保代码清晰易读。新增代码绝不能偏离现有的格式规范或改变缩进级别。
可读性
合理使用空格、注释和描述性变量名，使代码易于阅读。
为了节省文件大小，没有必要以混淆或压缩的方式编写代码。
使用自动化服务器端或其他构建流程来优化文件。
这包括文件合并、代码压缩和gzip压缩。
对于其他开发者而言，能够阅读代码是最重要的，高于其他任何考虑因素，尤其是在可以通过其他方式进行优化的情况下。
第三方库
选择合适的工具来完成合适的工作。
如果条件允许，应在本地开发环境中使用未压缩的库和第三方脚本，以便于调试。代码应以未修改的状态提交到源代码控制系统，或者仅在依赖管理组件中引用，以便在构建过程中解析文件。最终产品将与其余源代码一起压缩后交付。
同样，第三方代码和库绝不应被修改，其原始源代码和许可证必须有文档记录，并且必须适用于项目。对第三方代码的任何更改都必须事先获得同意，并且必须有明确的理由。如果更改是出于修复错误的目的，则应将更改提交给相应的上游项目（假设代码属于开源代码库）。
库代码应被视为外部依赖项，并且应考虑到将来可能需要全面更新或替换。
引入任何第三方代码都应经过仔细考虑和验证，以确保其是解决特定问题的合适方案。添加插件并非总是最佳解决方案。
HTML
超文本标记语言（HyperText Markup Language，简称HTML）是用于创建网页的标准标记语言。网页浏览器可以读取HTML文件并将其渲染成可见或可听的网页。HTML以语义化的方式描述网站的结构以及呈现方式，因此它是一种标记语言，而不是编程语言。——维基百科
语义元素
语义元素是指带有标签的元素，这些标签能够清晰地定义其内容，方便开发者和浏览器理解。基本的 HTML 包含诸如 `<b>`（表示粗体）和 `<i>`（表示斜体）之类的标签。在 HTML 4.01 中，引入了 `<strong>`（表示强，通常为粗体）和 `<em>`（表示强调，通常为斜体）。HTML5，即 HTML 的最新版本，引入了对语义元素的支持；例如 `<header>` 和 `<nav>`，它们的含义一目了然。
感谢Natalie de Weerd更正了以上历史事实。
这些元素如今被开发者更广泛地使用，并能改进文档的自动化处理；所有主流浏览器，如谷歌Chrome浏览器、Mozilla Firefox浏览器和苹果Safari浏览器，都支持HTML5和语义元素。
ID 和类别
同时使用 ID 和类名是定义元素的实用且相关的 HTML 实践。在 HTML 中，类属性用于定义元素的特定样式。类属性可以在多个元素之间重复使用，从而允许元素拥有相同的修饰符。
ID 标签用于定义特定变量，可以与类属性一起使用。ID 只能分配给一个特定元素，并且绝不能重复使用。这样，就可以使用 ID 标签对元素进行特定自定义，而不会影响同一类中的其他元素。
CSS
层叠样式表 (CSS) 几乎是网站所有视觉效果的幕后功臣。HTML 负责网站的内容，而 CSS 则负责网站的视觉样式。
层叠样式表 (CSS) 是一种样式表语言，用于描述用标记语言编写的文档的外观和格式。虽然它最常用于更改用 HTML 和 XHTML 编写的网页和用户界面的样式，但这种语言也可以应用于任何类型的 XML 文档，包括纯 XML、SVG 和 XUL。CSS 与 HTML 和 JavaScript 一起，是大多数网站用来创建视觉效果出色的网页、Web 应用程序用户界面以及许多移动应用程序用户界面的基石技术。—— 维基百科
CSS重置
所有浏览器默认都会添加各自的样式，而且每个浏览器应用这些样式的方式都各不相同。例如，许多浏览器默认将链接设置为蓝色，将已访问的链接设置为紫色。其他浏览器可能会给表格添加特定的边框和内边距。使用 CSS Reset 可以重置所有样式，从而从头开始重新设置样式，这是一个很好的做法。
CSS 重置（或称 CSS 重置）是一组简短且通常经过压缩的 CSS 规则，它会将所有 HTML 元素的样式重置为一致的基线。使用 CSS 重置后，所有浏览器的样式都会重置为 null，从而有助于避免跨浏览器差异。
例如……
一致的 CSS 结构
CSS 文件的结构应该与 HTML 文件的结构保持一致。这有利于开发者以及将来可能需要修改代码的人员。如果 CSS 代码杂乱无章，不遵循与 HTML 文档相同的模式和流程，那么在进行修改之前，可能需要花费大量时间和精力来理解两者之间的关系。
内联样式
通常，CSS 代码写在单独的 CSS 文件中，文件扩展名为.css。内联样式则是将 CSS 代码直接嵌入到 HTML 文档中。编写 HTML 和 CSS 代码时，几乎应该避免使用内联样式。
何时使用行内样式
虽然大多数 Web 开发人员避免使用内联样式，但也有一些例外情况应该使用它们。例如：
- HTML电子邮件
- 生成性能基准
- 内容管理系统内容（WordPress、Drupal 等）
- 动态内容（由 JavaScript 创建或修改的 HTML）
- 旧网站
DOM
文档对象模型 (DOM) 是一种跨平台、与语言无关的约定，用于表示 HTML、XHTML 和 XML 文档中的对象并与之交互。每个文档的节点都组织成一个树状结构，称为 DOM 树。可以使用对象的方法来访问和操作 DOM 树中的对象。DOM 的公共接口在其应用程序编程接口 (API) 中定义。—— 维基百科
JavaScript
JavaScript 是 HTML 和 Web 的编程语言。超过 90% 的网站都使用 JavaScript，因为它有助于创建动态和交互式网页。
作为一名 Web 开发人员，需要了解几种流行的 JavaScript 框架。框架是预先编写好的大型代码库，包含许多类，可用于创建代码库。利用这些框架可以快速创建 JavaScript 应用程序。
JavaScript 是一种高级、动态、无类型且解释执行的编程语言。它已在 ECMAScript 语言规范中标准化。与 HTML 和 CSS 并列，它是万维网内容制作的三大核心技术之一；大多数网站都使用它，并且所有现代浏览器都无需插件即可支持它。JavaScript 基于原型，并拥有一等函数，使其成为一种多范式语言，支持面向对象、命令式和函数式编程风格。它提供用于处理文本、数组、日期和正则表达式的 API，但不包含任何 I/O 功能，例如网络、存储或图形处理，这些功能依赖于它所嵌入的宿主环境。——维基百科
许多开发者常用的流行 JavaScript 框架（或工具）包括：
适配所有浏览器和设备
前端开发人员编写 HTML、CSS 和 JS，这些代码通常运行在由以下操作系统之一提供的 Web 平台上：
- 安卓
- 铬
- iOS
- OS X
- Ubuntu（或某些 Linux 发行版）
- Windows Phone
- 视窗
这些操作系统通常运行在以下一种或多种设备上：
- 台式电脑
- 笔记本电脑/上网本
- 手机
- 药片
- 电视
- 手表
- 物品（例如，你能想到的任何东西，汽车、冰箱、灯具、恒温器等等）
一般来说，前端技术可以在上述操作系统和设备上运行，并采用以下运行时 Web 平台场景：
- 网络浏览器（例如：Chrome、IE、Safari、Firefox）。
- 无头浏览器。
- WebView/浏览器标签页（类似于iframe）嵌入到原生应用程序中，作为运行时环境，并提供与原生API的桥接。WebView应用程序通常包含一个由Web技术（例如HTML、CSS和JS）构建的用户界面。（例如：Apache Cordova、NW.js、Electron）
- 这是一个基于 Web 技术构建的原生应用程序，它在运行时通过桥接器连接到原生 API 来进行解释执行。其用户界面将使用原生 UI 组件（例如 iOS 原生控件），而不是 Web 技术。（例如：NativeScript、React Native）
仅仅为桌面屏幕设计网页的时代已经过去。移动网页浏览量已经超过了传统电脑。应对这种变化最有效的方法是设计一个能够适应不同屏幕尺寸的网站。这就是响应式网页设计的意义所在。
RWD响应式网页设计
优秀的响应式网站会利用流式网格、灵活的图片以及特定的 CSS 样式技巧，根据浏览器窗口的宽度调整网站设计并进行渲染。开发者必须确保在所有浏览器上测试网站，而不仅仅是自己常用或偏爱的浏览器。不同的浏览器对 CSS 的解析方式不同，需要使用各自独特的 CSS 属性才能实现特定的样式。
大局观
库和框架（依赖项）
精通某个特定的库或框架并没有错。重要的是不要完全依赖它们。所有库和框架都是基于原生语言构建的，并且会不断更新迭代。只有对原生语言有扎实的理解，开发者才能持续学习，从而确保工作始终与时俱进。
页面速度
网站加载速度至关重要。虽然页面加载速度对于小型网站来说通常不是问题，但内容更丰富、结构更复杂的网站加载速度会更慢。诚然，在某些情况下，某些因素不可避免地会影响页面加载速度。然而，有一些最佳实践值得我们始终关注，以确保网站尽可能地节省资源。
图像文件
实际所需的图片尺寸确实需要注意。大图片加载时间长，而且会占用大量带宽。如果网站上有大量大图片，每张图片都会增加额外的加载时间。
文件格式也很重要。浏览器可以快速流畅地加载 JPG、PNG 和 GIF 图片。但是，像 TIFF 或 BMP 这样体积较大的格式会增加加载时间。
尽可能避免使用图片来显示文本。再次强调，即使文本需要大量的样式，图片也比文本占用更多空间。
代码密度
尽可能优化代码。冗长、密集的代码会降低网站速度，浏览器也需要更多时间来处理代码。对相似元素复用样式有助于缩短 CSS 文件。保持 JavaScript 代码简洁（不要重复自己）。
超越技术层面
团队
前端开发人员通常是团队中的一员，负责设计和开发网站、Web应用程序或基于Web技术运行的原生应用程序。
一个用于构建专业网站或网络平台软件应用程序的基本开发团队，通常至少包含以下角色。
- 用户体验/用户界面设计师
- 前端开发工程师（客户端）
- 后端开发工程师（服务器端）
假设上述团队由项目负责人和/或某种产品负责人（即利益相关者、项目经理、项目主管等）领导。
一个规模较大的网站团队可能包含以下未在上文列出的角色：
- DevOps工程师
- 数据库管理员
- 质量保证工程师/测试人员
结论
前端开发远不止编写简洁的代码那么简单：它需要巧妙地平衡多个要素。有时，它更像是一门艺术而非科学；当然，两者各有其用。编写出永远不会被修改或再次被查看的代码的可能性微乎其微，而浪费时间在研究旧代码上纯属浪费时间。以下是一些关于 HTML、CSS 和 JavaScript 的关键 Web 开发最佳实践，供您在未来的开发工作中参考。
文章来源：https://dev.to/rfornal/practical-front-end-practices-32in