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)的數量要少得多。舉個例子🌰，紐約有 6+ 個 JS 見面會，0 個常規 CSS 見面會。

另外一方面，因爲純粹的社羣恐慌症(FOMO), 簡單的靜態網站被過分地開發。

咱們看到，前端社區的大牛們🐮天天都在互相推卸責任，怎麼說呢，感受挺遺憾的。

縱觀全局

交戰派一般分爲🏷️：

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

兩者都喜歡的人

做爲 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 框架，也喜歡開發徹底不涉及客戶端渲染的靜態網站是嗎？那就告訴全世界。若是開源做者看到了需求，他們將爲靜態網站建立更多的框架。

2. 讓咱們在公共論壇討論 JS 和 CSS 吧。若是你正在組織 JavaScript 見面會，請留出一天時間進行 CSS/UX 演講。咱們來進行「前端」會議，而不是「JS 會議」和「CSS 會議」，來自不一樣陣營的人們能夠在這裏和對手討論他們的平常問題，以及首選解決方案。

3. 試試「對方」的技術吧：

• 若是你是 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

好文推薦：

每一個 JavaScript 開發者都該瞭解的 ES2018 新特性

「UC國際技術」致力於與你共享高質量的技術文章

歡迎關注咱們的公衆號、將文章分享給你的好友