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

目录
相关文章
|
17天前
|
前端开发 JavaScript 开发者
css和js
【4月更文挑战第22天】css和js
19 6
|
18天前
|
前端开发 JavaScript
结合CSS和JavaScript创建动态网页
【4月更文挑战第21天】结合CSS和JavaScript创建动态网页
19 4
|
1月前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
19小时前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
7 0
|
2天前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
10 1
|
13天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
26 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
13天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
36 0
|
16天前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器,每隔300毫秒就会动态添加一个新的像素粒子,然后通过CSS的关键帧动画(`@keyframes`)使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
14 0
|
22天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
19 0
|
1月前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css