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

目录
相关文章
|
11月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
861 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
725 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1209 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
652 33
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
292 24
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
221 13
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
235 3
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
214 0
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
317 0
JS配合CSS3实现动画和拖动小星星小Demo

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    498
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    387
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    373
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    247
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    490
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    666
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1125
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    261
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    952
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    447