2021 年需要改掉的 21 个前端坏习惯

我明白。2020年可不是最好的一年。我们停止了锻炼，开始在推特上花太多时间，吃了很多垃圾食品，总的来说，我们放纵自己——这当然是有原因的！

但2021年可能会有所不同。以下是21个前端开发中的不良习惯，我们最好都摒弃它们。

注：我协助开展CSS 现状和JS 现状调查。如果您想知道下次调查何时开始，请留下您的邮箱！

1. 抱怨 CSS

CSS 乍一看很容易上手。想把文字变成红色？color: red一键搞定。但之后事情就开始变得棘手，不知不觉你就已经在 Twitter 上抱怨 CSS 居中了。我自己也经历过这种情况。

但当你看到 CSS 的庞大功能描述（处理各种设备和各种格式，更不用说不同的浏览器和操作系统）时，你就会发现 CSS 实际上是一门非常棒的语言，尤其是在它最近的改进之后。如果你不相信我，你会发现在“CSS 现状”调查中，76% 的受访者真的喜欢写 CSS！

2. 抱怨 JavaScript

继 CSS 抨击之后，Twitter 排名第二的前端奥林匹克运动项目又要开始抱怨 JavaScript 了。它让我们的网站臃肿不堪！它损害了可访问性！它被过度使用了！它正在侵蚀我们的 CSS！

但 JavaScript 也在朝着正确的方向发展。React 在可访问性方面确实做得相当不错。Svelte的出现引入了一种生成更轻量级包的新方法。Next.js正在尝试更智能的服务器端渲染。即使你讨厌CSS-in-JS，额外的竞争也可能会推动“传统”CSS 进行更多创新。

3. 撰写关于 HTML/CSS“技术栈”的尖刻博客文章

我相信你肯定遇到过一两个这样的情况。作者会告诉你，他们如何只使用 HTML 和 CSS，无需任何框架、打包器或库，就能完美地满足于此。

这对他们来说很棒，但尽管保持简单确实有很多“不合理的有效性”可言（没错，一个过期的package.json文件就能毁掉你的一天），但事实是，当今许多复杂的事物都是为了满足不断发展的网络需求而产生的。在2021年，我们大多数人不再只是在处理简单、静态的登录页面，而且HTML/CSS也并不总是足够的！

4. 说 Tailwind CSS 令人厌恶

Tailwind CSS 的创建者 Adam Wathan 已经习惯了收到反馈，以至于Tailwind CSS 主页采用了一种近乎抱歉的语气，承诺“如果你能抑制呕吐的冲动，给它一个机会，[…] 你会想知道你曾经是如何以其他方式使用 CSS 的。”

当然，Tailwind CSS 可能看起来很奇怪并且违背了传统的最佳实践，但它的受欢迎程度是肯定的，它是今年CSS 状况报告中的一大趋势。

而87% 的 Tailwind CSS 开发者对其感到满意这一事实足以说明它具有真正的优势。

5. Tailwind CSS 是 CSS 的圣杯

与此同时，反对 Tailwind CSS 的论据也不少。如果你是一位满意的 Tailwind CSS 用户，那当然很好，但我们应该时刻警惕，不要让我们的热情演变成霸凌或教条主义。

6. 到处张贴 Cookie 横幅

我知道，我知道GDPR之类的规定，但从用户体验的角度来看，这些横幅广告是净损失。如果你要加一个，至少也得体面地把简报注册表单也加进去，这样我就可以一口气把两个都删掉。

7. 使用 Cookie

那么，如果没有 Cookie 横幅，该如何避免布鲁塞尔的官僚们来骚扰你呢？很简单，别用 Cookie！我们接触的绝大多数应用实际上只需要 Cookie 来进行身份验证，而这些应用并不需要横幅。

8. 拥有客户端分析

如果你停止使用 Cookie，就必须停止使用客户端分析和跟踪，我说，这下可好！Google Analytics 是我用过的最让人困惑的应用程序之一，它并不总是那么准确，就我个人而言，我知道我可能只查看了所有数据的千分之一（天知道 Google 会如何处理剩下的千分之九十九的数据）。

服务器端分析更可靠，通常足以追踪关键指标。那么，与其试图追踪尽可能多的数据，不如尝试尽可能少地追踪数据，结果会怎样呢？

9. 劫持他人滚动条

有人能解释一下为什么滚动劫持（网站使用 JavaScript 改变页面滚动速度）会成为现实吗？滚动劫持就像网络上的餐厅里放的音乐吵得人无法交谈一样。别再让我的体验更糟糕了！

此外，CSS 实际上现在具有原生滚动管理功能，可以让您捕捉到特定的检查点，而不会让用户感觉他们正在滚动糖蜜。

10. 使用保证金

该margin声明可能是 CSS 中最常用的声明之一，但在 2021 年，有一小部分但不断增长的开发人员建议我们也许应该停止使用它。

但如果您确实想继续使用边距，至少要花一些时间最终阅读边距折叠的规则。

11. 推迟学习 TypeScript

就目前而言，TypeScript 似乎是必然趋势。大多数主流 JavaScript 库现在要么用 TypeScript 编写，要么正在重写。最受欢迎的文本编辑器 VS Code 就是用 TypeScript 编写的，并且内置了对 TypeScript 的支持。尽管 TypeScript 已经非常流行，但在 2020 年 JavaScript 现状调查中， TypeScript 仍然是同比增长最快的单一技术。

我并不是说如果你不想或者不需要，就应该在每个项目中都使用TypeScript。但我确实认为每个人都应该熟悉它的语法和基本原理，因为它可能比你想象的更快地派上用场。

12. 使用 CSS Hacks

以前，基本的 CSS 可以帮你加粗字体、设置链接样式，除此之外，其他一切都是 hack。需要让 div 居中？负 margin 可以 hack。需要确保它是正方形？底部 padding 可以 hack。需要清除浮动？Clearfix 可以 hack。

但如今已不再如此！现在是 2021 年了，现在有文档齐全、合理的方法让 CSS 满足你的所有需求，而最后一块拼图就是新的宽高比属性。唯一的问题是，前端开发者现在会写些什么博客呢……？

13. 忽略声音

在 Flash 时代，你打开新标签页时，总会听到一些令人作呕的电子音乐（那时候我们管它叫 EDM）自动播放。结果，我们大多数人都发誓再也不建一个会产生声波的网站了。

但像 Josh Comeau 这样的设计师正在证明，用高雅甚至令人愉悦的方式运用声音，确实可以提升用户体验。只需记住网页声音设计的第一条规则：不要使用自动播放！

14.制作千篇一律的网站

如今，“所有标志都一样”已经成为一种陈词滥调。各大品牌纷纷放弃那些古怪的字标，转而采用千篇一律的无衬线字体，最终变得平淡无奇。

但是网站没必要千篇一律！让我们先抛开这两个可能的网站，从Lynn Fisher、Wes Bos或Olivia Ng （以及许多其他人）等人的作品中汲取灵感，他们都有自己独特的方式运用字体、颜色以及各种 CSS 属性来构建独特的设计。

15. 使用视口断点进行响应式设计

多年来，响应式设计的口号一直是“移动优先”，这通常意味着首先针对最小的视口尺寸进行设计，然后再逐步提升。但是，如果有更好的方法呢？使用 CSS Grid，您现在可以构建动态布局，这些布局可以根据内容的行为调整大小，而不是根据某个预先设定的静态断点进行调整。

更重要的是，浏览器厂商正在努力开发容器查询（CSS 中缺失的最受期待的功能）。一旦容器查询落地，很可能会彻底改变我们处理响应式设计的方式。

16. 害怕 CSS 网格

当面对像 Grid 这样复杂的功能时，我认为人们通常会认为必须掌握所有功能才能获得辛勤工作的回报。但在这种情况下，事实远非如此。

我不会假装自己是网格专家，但网格的妙处在于，即使只掌握最基本的10%，也足以让你的生活变得轻松很多。所以，如果你一直在学习网格，那就赶紧拿起速查表，开始学习网格吧！

17. 忽略可访问性

我承认，过去我曾被看似无穷无尽的可访问性陷阱吓到过。我使用的 HTML 元素正确吗？我的网站降级得体吗？如果 JavaScript 加载不出来怎么办？它如何与屏幕阅读器配合使用？键盘导航又该怎么办？

但我并没有灰心丧气地举手投降，而是决心在搭建的每个网站上都学习一个新的可访问性问题。例如，我最近学习了一种叫做“漫游 tabindex”的技术。如果这些词对你来说和几个月前对我一样毫无意义，那么为什么不趁此机会学习一些新东西呢？

18.思考布局总是从左到右

当我输入这些文字时，我看到它们在屏幕上从左到右排列。但对世界上许多人来说，情况恰恰相反。阿拉伯语、希伯来语和波斯语只是从右到左书写的几种语言，CSS 一直在改进，以便更好地处理它们。

逻辑属性允许你将 和 等“绝对”方向替换为margin-right和等margin-left“相对”方向。我们越快适应这种新的思维方式，各地 RTL 用户的体验就越好。margin-block-startedmargin-block-end

19. 不写博客

博客即将回归。我们很多人用推特作为发泄渠道，但它却是个糟糕的替代品，它鼓励的是“热门话题”和攻击性言论，而不是建设性的批评和更深入的思考。

有了Gatsby或Next.js这样的平台，个人博客就能拥有你所需的一切功能——但如果你想要更简洁的体验，也有像Eleventy这样的更简单的替代方案。或者干脆用Dev.to这样的平台！总比在 Twitter 上又一次发牢骚强。

20.假装科技是中立的

您很容易认为您的工作描述仅限于确保单击按钮进入下一页，而不必担心下一页要说什么。

同样，社交媒体网络多年来一直宣扬自己是中立平台的理念，一切都由算法控制，人类的参与最多也应该受到限制。但近年来发生的事件向我们展示了这种放任自流的做法往往带来的危险后果。

这并不意味着你应该把每分每秒都花在发表政治声明上；但同样明显的是，我们每个人都有责任确保我们参与设计和制造的产品不会让事情变得更糟。

21. 撰写过长的文章列表

你难道不讨厌这些为了达到预定目标数量而没完没了的列表文章吗？它们怎么就不能保持简短精炼呢？

在 2021 年，让我们确保抛弃这种过时的格式......特别是因为我不确定下次我是否能想出 22 件事！