CSS 和 JS 正在交战，以下是如何阻止它

简而言之：有很多人同时热爱JS 和 UX/CSS 等。如果我们不再仅仅给人们贴上“JS 开发人员”或“UX 开发人员”的标签，我们就能结束当前“JS 与 CSS”之争，走向和平。

战争是真实的

有些人称之为“大分水岭”：前线是真实存在的，一边是 JavaScript 的顽固分子，另一边是主张使用非 JS 方法实现界面的 UX/CSS 人员。

前端开发者担心，如果他们避开 JavaScript 的炒作，就会丢掉工作。这完全可以理解：CSS 已经过时了。与 JS/React 等其他编程语言相比，CSS 的会议和聚会明显少得多。例如，纽约有 6 场以上的 JS 聚会，而常规的 CSS 聚会却为零。

另一方面，我们看到简单的静态网站由于纯粹的FOMO而被过度设计。

我们每天都会看到前端社区的知名人物互相推卸责任，这至少是令人遗憾的。

展望未来

交战派系通常被标记为：

1. “JS-JS-JS”：使用 React、Vue.js 和 Angular 等客户端 JavaScript 框架创建 SPA 的开发者。他们是无数构建工具（Babel、webpack 等）和 JS 库的重度用户。
2. “UX 开发者”、“CSS 开发者”、“HTML-JS-CSS 开发者”：使用原生 JavaScript 和纯 CSS 创建静态网站的开发者。可访问性和性能是他们社区中最重要的话题。

但我们必须如此分裂吗？或许这种二元论仅仅源于我们自身的偏见？

我认为，这种偏见主要由两件事造成。

首先，CSS 和 JavaScript 会议现在有分离的趋势。我认为这是由非常受欢迎且成功的 JSConf/CSSConf 系列活动以及 Put-Your-Own-City-Here.js 聚会的潮流所引发的。内容平台也支持这种划分：其中一些主要发布 React/JS 文章，另一些则专注于 CSS 和 UX。

其次，社交网络很容易导致社会两极分化。我们订阅一些志同道合的人的动态，把自己置身于一个圈子里，而转发对方最具攻击性的观点，只会让情况变得更糟。

现代网络极其复杂。掌握所有支撑它的技术极其困难，没有人能真正称自己为 100% 的“全栈”开发者。但由于 JS 和 CSS/UX 的讨论被人为地割裂开来，那些拥有不同（但并不一定对立）热情的人被推入了非黑即白的“JS vs. CSS”世界观。热衷于 CSS 动画和a11y 的React 开发者被简单地贴上了“JS 爱好者”的标签。而热爱 Babel 和零运行时 CSS-in-JS 的 CSS 开发者仍然会被描绘成“CSS 人”。

爱他们俩的人

作为PostCSS的创建者，即使我想，我也很难真正选择立场。一方面，PostCSS 是一个 CSS 工具（因此得名）。另一方面，PostCSS 是一个JavaScript构建工具，而构建工具在现代 CSS 社区中并不被广泛接受。

而且我并不孤单，有很多人像我一样：令人惊叹的React 动画工具包的创建者，或者CSS a11y linter的创建者，等等。

说实话，我们每个人只了解一小部分现有的技术。而且一个人的热情也不一定来自单一主题。同时热爱 React 和 CSS 是可以的。或者，你可以使用复杂的构建系统来确保你的 a11y 正确无误。或者，你可以深入研究分布式系统，因为你想在网络连接不佳的情况下实现出色的用户体验。

甚至技术本身也不能被简单地视为非黑即白。

BEM经常被“CSS 派”的支持者提及，作为一种避免 CSS-in-JS 可能造成的混淆的方法。但很少有人知道，它并非由Yandex设计为纯粹的 CSS 技术！它还包含一个 JavaScript 框架，并且最初包含一些后来在 React 中得以运用的理念（例如嵌套小型独立组件）。

在 React 社区中流行的 ESLint 配置（如AirBnB 配置）包含许多 a11y 规则。

解决方案

我认为这场战争是真实存在的。如果我们不再把开发者分成黑白两类，这场战争就能停止。

1. 如果你喜欢这两种“技术”，那就大声说出来！让大家看到，这样大家就能展开文明的讨论。你喜欢现代 JS 框架，但也喜欢创建完全不涉及客户端渲染的静态网站吗？那就告诉全世界吧。如果有需要，开源作者会创建更多静态网站框架。
2. 让我们建立一个公共论坛，让 JS 和 CSS 的世界进行对话。如果你正在组织 JavaScript 聚会，请留出一天时间进行 CSS/UX 讨论。让我们举办“前端”会议，而不是“JS 会议”和“CSS 会议”，让来自不同阵营的人可以分享他们日常遇到的问题，并向对手们推荐他们喜欢的解决方案。
3. 让我们尝试来自“另一边”的技术：
   • 如果您是 CSS/UX 开发者，不妨从 linters 开始。Stylelint是一款优秀的 CSS linters。它会提醒您错误，并允许您在团队中分享最佳实践。您还可以将它作为您常用的文本编辑器的插件运行，这样即使没有任何打包工具也可以开始使用。
   • 如果您是 React 开发者，不妨在您的下一个落地页或博客上尝试一些原生 JS。这将帮助您更好地理解框架的内部原理。而且，更轻量的 JavaScript 包带来的性能提升也会让您的用户感激不尽。

进一步阅读

这是我在Martian Chronicles上发表的有关PostCSS、linters 和 CSS-in-JS 的未来的文章。