2021 年 9 个 Web 开发最佳实践

Web 开发项目的范围从高度复杂到相对简单。无论您的项目有多复杂，处理错误和调试代码都是不可避免的。编码标准和最佳实践可以让这项任务变得轻松很多。

除了简化调试之外，遵循最佳实践还能确保代码更简洁，并减少不必要的错误。这些是每个开发人员必须具备的技能。以下是 2021 年每个 Web 开发人员必须遵循的 9 条最佳实践。

1. 对 div 标签进行排序

在页面底部看到多个div 标签闭合是很常见的。虽然 div 比表格更简洁，但如果不进行排序，只会造成难以清理的混乱。缩进是组织标签闭合的好方法。

不过，整理div 标签的最佳方法是注释要关闭的标签。例如，添加类似 <!--#header -- > 的注释，可以帮助读者理解要关闭的标签。

2. 使用 CSS 重置
CSS 重置是 Web 开发中的常见做法，但令人惊讶的是，许多新手开发者都忽略了这一点。结果就是跨浏览器渲染问题，破坏了用户体验。

CSS 重置会从所有元素中删除单独的样式，这样浏览器就没有空间用其默认值覆盖您的样式元素。

3. 避免使用 @import
导入 CSS 文件时，@import 是许多开发者的常用选择。使用此指令可以轻松地将一个样式表包含到另一个样式表中。或者， CSS 文件也可以包含在 HTML 文档中。

然而，随着浏览器放弃默认导入支持，开发人员不得不寻找其他方法在主文件中引入外部 HTML 文件。将外部 HTML 文件扩展名重命名为 .shtml，并在 HTML 中使用服务器端包含 (SSI) 是最佳方法。请注意，使用 SSI 命令的文件必须以 shtml 扩展名命名。

4. 牢记无障碍性
网络正变得越来越包容，每个网站都应该照顾到不同能力的人士。过去，开发者必须定制和重新配置每个元素，才能使其网站更易于访问。一个典型的例子是为所有图片添加 Alt 文本，以便屏幕阅读器能够理解并向屏幕阅读器用户解释图片的含义。

如今，accessiBe 推出的基于人工智能的网页无障碍解决方案实现了这一流程的自动化。他们的人工智能技术每 24 小时扫描一次网站，寻找需要实现无障碍的新内容。最终，网站将完全符合 ADA 和 WCAG 标准，并在网站发展过程中持续提供支持。

5. 压缩和优化图片
即使使用 Photoshop 的“另存为网页”命令，优化网页图片也很困难。如果您不担心网站带宽，那么未优化的图片就不成问题。然而，在创建商业网站时，开发人员几乎总是需要考虑到带宽问题。

TinyJPG和compressjpeg等工具是开发人员可以使用的优秀免费选择。Smush it和RIOT是不错的付费选择。

6. 不要将 CSS 与 HTML 和 JavaScript 混用。HTML
的目的是通过定义页眉、页脚等来组织 Web 文档。前端开发人员有时会使用已弃用的 HTML 属性来设置元素的样式。然而，这往往会导致开发人员使用 style 属性将 CSS 直接插入 HTML。

这种做法在开发或快速测试中没问题，但在生产环境中却不太适用。避免使用 style 属性插入 CSS，因为这完全违背了 CSS 的本质。同样，在 HTML 中插入 JavaScript 也是不好的做法。

使用畅通无阻的 Javascript 可能看起来很乏味，但它会产生更清晰的 HTML 和更好的代码结果。

7. 条件注释
微软已宣布终止对 Internet Explorer 的支持，这将使这项要求在几年后变得多余。然而，目前它仍然存在，这意味着开发人员必须考虑在这个过时的浏览器上显示的网页。

您可以使用一些技巧来自定义代码，但问题是 CSS 验证会失败。您可以使用条件注释来针对特定版本的 Internet Explorer 进行修改。

8. 使用语义化 HTML
HTML 是一种标记语言，用于创建结构化文档。开发人员应该使用它来表示标题、段落和其他设计元素。使用语义化 HTML 可以赋予页面更多含义，这一点非常重要。

语义标签使页面信息对浏览器和搜索引擎清晰易懂。它们允许通过巧妙运用 CSS 增强自定义功能。

9. 并行构建和测试
跨浏览器渲染是每个 Web 开发者都必须考虑的一大难题。与其在一个浏览器中渲染，然后再调整到其他浏览器，不如在构建代码时进行测试。这样可以节省时间，并且更容易调试任何代码。