JS 和 CSS 间战火熊熊,该如何熄灭?

简介: 有许多人同时热爱着 JS 和 UX/CSS/etc. 如果我们不再给别人贴上“JS 开发者”或“UX 开发者”的标签,我们将止住“JS vs 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)的数量要少得多。举个例子,纽约有 6+ 个 JS 见面会,0 个常规 CSS 见面会。

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

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

纵观全局

交战派通常分为️:

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

“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 小男孩/女孩”。

二者都喜欢的人

作为 PostCSS 的作者,即使我曾想过要选,也没法真正做出抉择。因为一方面,PostCSS 是一个 CSS 工具(因之得名)。而另一方面,PostCSS 又是一个 JavaScript 构建工具,而构建工具在当今 CSS 社区中并不被广泛接受。

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

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

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

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

ESLint 配置在 React 社区中很流行(如 AirBnB 配置),它包含许多 a11y 规则。

解决方案

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

  1. 如果你同时喜欢这两种技术:请大声说出来!让大家看到,这样我们就可以进行文明的讨论。你喜欢现代 JS 框架,也喜欢开发完全不涉及客户端渲染的静态网站是吗?那就告诉全世界。如果开源作者看到了需求,他们将为静态网站创建更多的框架。
  1. 让我们在公共论坛讨论 JS 和 CSS 吧。如果你正在组织 JavaScript 见面会,请留出一天时间进行 CSS/UX 演讲。我们来进行“前端”会议,而不是“JS 会议”和“CSS 会议”,来自不同阵营的人们可以在这里和对手讨论他们的日常问题,以及首选解决方案。
  1. 试试「对方」的技术吧:

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

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

原文地址:

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

目录
相关文章
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
24 0
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
27 0
|
1月前
|
缓存 自然语言处理 前端开发
JS/CSS体积减少了67%,我们是如何做到的?
JS/CSS体积减少了67%,我们是如何做到的?
18 1
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
Web App开发 前端开发 JavaScript
|
JavaScript 前端开发 容器