对于许多人来说，这是他们第一次感受到 AJAX 的强大力量。它是“ 杀手级应用程序 ”，客户端应用程序有可能提供大量卓越的用户体验。这是我们今天能够迈向现代单页应用程序（SPA）的重要一步。
CSS 框架
2011年，Twitter 发布了 Bootstrap。Bootstrap 是第一个被广泛采用的 CSS 框架”，它适用于各种水平的前端开发者。一经推出，它大大降低了前端开发工作的难度。突然之间，编写服务器端页面模板的后端开发人员都可以操作 class 和元素，而且不需要 CSS。有了 Bootstrap，后端开发人员仿佛具备了传统前端开发者的能力。
症状
似乎这一部分内容已经引起了一些读者的反感。如果你发现自己不同意本节中的建议，那我建议你直接跳过，去阅读“解决方案”部分的内容。
Div soup
目前，CSS 框架几乎无处不在。Bootstrap 似乎已经占据了至高无上的地位，并且得到了 ZURB 基金会和谷歌 Material Design 的大力支持。此外，对 Tailwinds 这样的可组合框架的支持越来越多，这些框架声称可以避免其他所有框架的问题。
SPA 框架比 CSS 框架更具波动性。在谷歌的 Angular 出现之前，Backbone、Knockout 和 Ember 占据了至高无上的地位。其他框架层出不穷，但没有一个真正提供了很大的价值。
然后，Facebook 推出了 React，React 核心思想是组件和快速的虚拟 DOM。前端开发就像搭建乐高积木一样。
在你打开开发者工具之前，这一切都很好。打开之后，你会面对一堆杂乱无章的“ div soup”。
成功的唯一因素是严重依赖复杂的组件，有效地抽象出所有细节。不幸的是，这些基于组件的体系结构的复杂性也使得看似无害的快捷方式（如硬编码规则）直接进入应用程序。
组件混合
当向 HTML 标签添加6、7个隐藏类名称的“样式”时，我认为我们已经迈出了巨大的一步。我们安全地超越了表格布局，但仅仅使用了内联样式。
说到这一点，现在积极鼓励开发人员将 CSS 属性直接注入 HTML 样式属性。更糟糕的是，这些标签现在散落着三元表达式和地图功能，迫使开发人员在 HTML 和 JavaScript 之间来回反复。对于那些在过去几年内开始从事 Web 开发的人来说，需要明白这一点。
我喜欢这条推文，但他们的例子没有任何表达规则，这些规则对 React 项目更具感染力。将 Bootstrap 添加到项目中，只会弄得一团糟。
问题
难以捉摸的全栈开发者
2014年，前端开发人员工资不比后端开发人员。5年之后，前端人员几乎都是全栈工程师了。
你可能已经注意到，职务描述中所需的技能项已呈指数级增长。团队的高手被大量挖走，你想要的候选人又选择了其他工资更高、福利更好、工作安排更灵活的公司。
不要误会我的意思，我觉得总体来说这是好事，但对于那些小企业来说确实招人变得困难。
缺乏专业知识
多面手实际上并不存在。作为一名多面手，感觉自己什么都会，实际上可能什么都不精通。虽然通才会在你的业务中占有一席之地，但不可能一个人做完所有工作。
当你团队中的每个开发人员都是“JavaScript 多面手”时，你实际上会让自己暴露在盲点之下。毫无疑问，各个应用程序都充斥着不好的例子 <div className="btn" onClick={this.handleClick}>。
“谁关心细节，反正程序运行正常。”虽然它可能适用于正常人，但那些依赖辅助技术的人将完全无法访问你的部分应用程序。
预先辅助功能（A11Y）通常会带来更好的用户体验，因此，如果你在这里走捷径，那么很可能会出问题。
如果你没有被强迫，那么也许你的主要动力源于金钱。你真的应该考虑 A11Y 所带来的经济风险，无论是失去商业机会还是可能面临诉讼的威胁。
灵活性的丢失
像 Bootstrap 和 React 这样的框架很吸引人，因为在项目初期可以极大地提升开发速度。Bootstrap 通常被认为是一种优秀的原型设计工具。然而，原型制作工具的低保真度无法应用到最终的产品中。
尽管 “bootstrap” 这个词意味着使用有限的资源。在“快速而廉价”的模式中，无论是否是你的本意，你自然而然地选择了快速而廉价。换句话说，你选择投资了一种充满技术债务的产品。
你开始重构项目，首先调整 Bootstrap 无穷无尽的变量列表。此外，你真正想要的深度定制涉及构建复杂的 CSS 特性，以覆盖 Bootstrap 对选择器的自由使用。
你想要修改布局，但是你发现每个组件都使用 col 类进行了硬编码。可悲的是，每个元素都因各种屏幕分辨率而不同。想要修改一处需要先修改其他五处。 |
|
收藏
淘帖
踩
