JS 和 CSS 间战火熊熊，该如何熄灭？

原文作者：Andrey Sitnik (PostCSS 作者)

译者：UC 国际研发 Jothy

写在最前：欢迎你来到“UC国际技术”公众号，我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章，不限于原创与翻译。

太长不看版： 有许多人同时热爱着 JS 和 UX/CSS/etc. 如果我们不再给别人贴上“JS 开发者”或“UX 开发者”的标签，我们将止住“JS vs CSS”的战火，更接近和平。

（译者注：UX, User eXperience 缩写）

战争真实存在

有人称之为「巨大的鸿沟」：真实存在的前线上，一边站着 JavaScript 顽固派，另一边站着无 JS 接口方法的 UX/CSS 拥护者。

前端开发者们害怕，一旦他们忽视了 JavaScript 铺天盖地的宣传，就会丢掉工作。这完全可以理解：CSS 已经过时了。与 JS/React 及其他类似技术相比，CSS 大会和见面会(meetup)的数量要少得多。举个例子:chestnut:，纽约有 6+ 个 JS 见面会，0 个常规 CSS 见面会。

另一方面，由于纯粹的社群恐慌症(FOMO), 简单的静态网站被过度地开发。

我们看到，前端社区的大牛们:cow:每天都在互相推卸责任，怎么说呢，感觉挺遗憾的。

纵观全局

交战派通常分为 ️：

1. “JS-JS-JS”：使用 React, Vue.js 和 Angular 等客户端 JavaScript 框架创作 SPA 的开发者。他们是无数构建工具(Babel, Webpack, etc.)和 JS 库的重度用户。

2. “UX 开发者”, “CSS 开发者”, “HTML-JS-CSS 开发者”：使用原生 JavaScript 和原始 CSS 制作静态网站的开发者，无障碍(Accessibility)和性能是其社区中最重要的主题。

但是我们 有必要 这么划分吗？也许这种二元论仅仅是出于我们自身的偏见？

在我看来，主要有两件事情导致了这种偏见。

首先，大家倾向于将 CSS 和 JavaScript 会议分开。我认为这是由非常受欢迎且成功的 JSConf/CSSConf 系列活动，以及 Put-Your-Own-City-Here.js 见面会的趋势引起的。各大内容平台也进行了划分：有主要发布 React/JS 文章的，也有侧重于 CSS 和 UX 的。

其次，社交网络容易将社会两极化。我们订阅兴趣相投者的信息流，沉浸在他们的虚幻世界中。而且更极端的做法是，只转发他们最最激进的观点。

当今网络极其复杂，要掌握其背后所有的技术难比登天，没有谁能真正自称为 100% 的“全栈”开发者。但是，现如今 JS 和 CSS/UX 的讨论已经如此（人为地）分离，志向不同（但不一定对立）的人，被灌输了非黑即白的“JS vs CSS”世界观。对 CSS 动画和 a11y(accessibility) 满怀激情的 React 开发者会被打上“JS folks”的标签。一个喜欢 Babel 和零运行时 CSS-in-JS 的 CSS 开发者，仍然会被当成“CSS 小男孩/女孩”。

而且并不是只有我这么想，还有很多人持有类似的看法：优秀的 React 动画工具作者、CSS a11y linter 的作者，等等。

讲真的，我们每个人都只了解一小部分技术，一个人也不一定只对某一个主题有兴趣。你完全可以同时喜欢 React 和 CSS. 或者使用复杂的构建系统来确保你正确实践了 a11y. 或者，你可以为了在糟糕的网络连接之上创建良好的 UX, 而深入学习分布式系统。

甚至技术本身也不是非黑即白的。

BEM 常被“CSS 派”的支持者当成避免混淆 CSS-in-JS 的方法提及。但鲜有人知它并非 Yandex 设计的纯 CSS 技术！它还包含一个 Javascript 框架以及最初的一套想法，后来在 React 中得以实现（比如嵌套小的独立组件）。

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

解决方案

我认为战争真实存在。而如果我们不再将开发者分为黑白两类，我们就可以停止这场战争。

1. 如果你同时喜欢这两种技术：请大声说出来！让大家看到，这样我们就可以进行文明的讨论。你喜欢现代 JS 框架，也喜欢开发完全不涉及客户端渲染的静态网站是吗？那就告诉全世界。如果开源作者看到了需求，他们将为静态网站创建更多的框架。

2. 让我们在公共论坛讨论 JS 和 CSS 吧。如果你正在组织 JavaScript 见面会，请留出一天时间进行 CSS/UX 演讲。我们来进行“前端”会议，而不是“JS 会议”和“CSS 会议”，来自不同阵营的人们可以在这里和对手讨论他们的日常问题，以及首选解决方案。

3. 试试「对方」的技术吧：

• 如果你是 CSS/UX 开发者，请从 linter 开始，Stylelint 是个不错的选择。它能进行错误警告，支持在整个团队中共享最佳实践。你可以把它作为插件添加到你最喜欢的文本编辑器中，这样你无需 bundler 就可以开始了。

• 如果你是 React 开发者，请在你的下个登录页面或博客上试试原生 JS. 这能帮助你更好地理解框架的内部原理，你的 JavaScript bundle 体积会更轻，你的用户也将感谢你提升了性能:pray:。

原文地址：

https://dev.to/evilmartians/css-and-js-are-at-war-heres-how-to-stop-it-158a

好文推荐：

每个 JavaScript 开发者都该了解的 ES2018 新特性

“UC国际技术”致力于与你共享高质量的技术文章

欢迎关注我们的公众号、将文章分享给你的好友