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

目录
相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
79 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
2月前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
58 13
|
2月前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
59 3
|
3月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
3月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
3月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
222 1

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    49
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57