您当前的位置:中国数码观察网资讯正文

CSS-in-JS是恶魔还是天使

放大字体  缩小字体 2019-08-23 17:34:10  阅读:4366+ 作者:责任编辑NO。石雅莉0321

作者 | 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

为你推荐

  • 京东小魔方上新品啦,MOMAX 摩米士“自带伸缩线全球充”新色首发

    这个愚人节,MOMAX摩米士联合京东小魔方推出新色抢购活动!这款摩米士全球转换插座…

    数码
  • 以“智”提“质” 芒果打造“文化+科技”双引擎

    3月28日,第十一届中国网络视听大会在成都开幕。近年来,随着生成式人工智能在内容…

    数码
  • 联想x文心一言开启AI新人设,5折套装助力大学生开启新篇章

    2024年最火的词是什么?是AI!无论是企业还是每一个普通个体,AI都已经成为我们耳…

    数码
  • 全国人大代表刘宏志:推动数字乡村建设、激发乡村振兴“数智力量”

    作者:宋思铭 赵 杨 张 通“数字乡村建设有助于促进农业全面升级、农村全面进步、农…

    数码
  • “如果发现本网站发布的资讯影响到您的版权,可以联系本站!同时欢迎来本站投稿!