作者 | Chris Coyier
译者 | 王强
修改 | Yonie
有些人极为厌烦 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 办法在许多方面都比较洁净,看起来更简单处理。
我期望有更多这种客观的技能比较,公平地列出每项技能的优势和价值。
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