河南夢之網網絡科技有限公司
夢之網科技出品
掃描關注夢之網科技微信公眾賬號

掃小程序碼聯系客服

CSS-in-JS是惡魔還是天使?-鄭州網站建設

夢之網科技?2019-08-23?文章動態?

有些人極為討厭 CSS-in-JS,單單提起這個名字都會讓他們反感,總之就是拒絕二字。他們認為樣式不屬于 JavaScript,而是屬于 CSS,并且 CSS 有著很長的歷史,瀏覽器支持非常完善。關注點必須分離,其他路子都走錯了,我們要以史為鑒(比如標簽等)。

有些人非常喜歡 CSS-in-JS。他們看到模板和功能并存的理念和大多數的 JavaScript 框架都非常成功,所以包裝在樣式里似乎就是順其自然。Vue 的單文件組件就是一個例子。

Brent Jackson 列舉了一些 CSS-in-JS 能做和不能做的事情:

CSS-in-JS 能做什么:

讓你用 JavaScript 語法編寫 CSS

組件和樣式共用

利用原生 JS 語法功能

利用 JS 生態系統

CSS-in-JS 沒法讓你了解:

如何將樣式應用于 DOM

繼承如何工作

CSS 屬性如何工作

CSS 布局如何工作

CSS-in-JS 并不能減輕你學習 CSS 的負擔,大多數情況下就是如此。

CSS-in-JS 是惡魔還是天使?

我聽過很多對 CSS-in-JS 的排斥言論,諸如“你用 CSS-in-JS 是因為你不懂 CSS”或者“你們這樣做是因為你害怕級聯。我已經知道如何定位 CSS 了。“但這些言論只是在挑事而已。

Lara buns 的那篇“沒有 Web 的 Web 世界”寫的很好,其中就提到了 React 和 CSS-in-JS:

我討厭 React,因為默認情況下 CSS-in-JS 方法需要你編寫完全自包含的組件,而不是從宏觀層面構建網站的 UI。

不是說你用了 React 就得用 CSS-in-JS,但這種做法很流行,上面這段評價也很公正有趣。如果你什么東西都要打包,難道不是在引入更多不一致的風險嗎?

我一直都是 CSS 模塊的粉絲,因為它就像 CSS-in-JS 一樣簡單,而且和 SASS 并用可以保證一致性。但人們使用它時也很容易陷入太多一次性使用的陷阱中。

這些只會用一次的代碼可以拋棄,可以分離,一切都很平衡。

Laura 還說她喜歡 CSS-in-JS 方法,它提供了一些強大的功能和靈活性:

我喜歡 CSS-in-JS,因為它提供了足夠的抽象,讓你既能用通用選擇器之類的技巧,同時也能充分利用 JS 來做容器查詢之類的東西。

Martin Hofmann 創建了一個網站,用一個很小的“警報組件”來客觀地對比 BEM 與 Emotion。BEM 有一些優點,特別是不需要任何工具,并且可以輕松地與任何 Web 項目共享。但 Emotion 方法在很多方面都比較干凈,看起來更容易處理。

CSS-in-JS是惡魔還是天使?-鄭州網站建設

我希望有更多這種客觀的技術比較,公正地列出每項技術的優勢和代價。

Scott Jehl 的一篇文章討論了異步加載 CSS。文章開頭寫到:

我們可以用一種不會拖累頁面渲染的方法加載 CSS,大幅提升頁面性能和適應性。

值得一提的是 CSS-in-JS 方法天然就有這種能力,因為樣式被捆綁到了 JavaScript 中。當然這種做法需要付出性能代價,但是如果我們消除一些阻塞渲染的障礙就能減輕一些代價。起碼這種方法值得多用一些數據。

我不覺得 CSS-in-JS 就一定提高了行業的門檻。我們并沒有強行排除 CSS,強迫大家用別的語言。這種方法適合某些項目,適用于特定規模。

我覺得以下情況下你應該考慮一下 CSS-in-JS:

你正在開發一個有大量組件的 JavaScript 項目。

你要把模板、功能和數據查詢做在一起。

你認為利用這種方法的同時不會影響用戶體驗。

你的團隊喜歡這種技術,不會因此萌生退意。

Max Stoiber 寫的文章介紹了這種方法給他帶來的信心和為他節省的時間。但他也認為這種方法只適合 JavaScript 框架應用程序。

如果你使用 JavaScript 框架來構建包含組件的 Web 應用程序,那么 CSS-in-JS 可能非常適合你的需求。如果你的團隊成員都具備基本的 JavaScript 能力那就最好不過了。

https://css-tricks.com/the-differing-perspectives-on-css-in-js/

點個在看少個 bug

文章關鍵詞
In
css
javascript
2013以太坊价格 重庆时时彩下载官方 广西快乐十分基本走势图 北京单场开奖结果sp 熊猫时时计划软件 香港特马开奖结果 重庆时时彩最快走势图 五大联赛开赛日期2019 湖南快乐10分开奖查询 江西时时事件 1993年全年开奖结果 全天5分快3计划大小 pk10技巧5码选位置 3d今日历史同期 万达二分彩走势图全天 北京pk动画 云南快乐123玩法