本文将深入探讨最初吸引我使用 CSS-in-JS 的原因，以及我(和 Spot 团队其他成员)决定抛弃它的原因。 我们将简要概述 CSS-in-JS 以及它的优缺点。...文章最后我们简要讨论编译时 CSS-in-JS。...我认为这确实是 CSS-in-JS 获得广泛采用的一个因素——至少对我来说是这样。 劣势 CSS-in-JS 增加了运行时开销。...CSS-in-JS 增加了包体积。这很明显——每个访问你网站的用户现在都需要下载 CSS-in-JS 库的 JavaScript。...关于编译时 CSS-in-JS 的说明 本文重点讨论了运行时 CSS-in-JS 库如 Emotion 和 styled-components。
CSS-in-JS CSS-in-JS是一种样式方法，它将CSS模型抽象到组件级别，而不是文档级别。...这就是大多数CSS-in-JS库的工作方式 - 当然，我们将在功能和语法方面进行一些改进。...我们可以使用一个名为polished的样式mixin库 - 它适用于CSS-in-JS库，非常适合我们的示例。...CSS-in-JS库具有许多高级功能，如主题，供应商前缀甚至内联关键CSS，这使得完全停止编写CSS文件变得容易。 此时，您可以开始了解为什么CSS-in-JS成为一个诱人的概念。...零运行时解决方案通过恢复CSS工具来缓解一些缺点，这些工具将CSS-in-JS讨论提升到更有趣的水平。 与CSS-in-JS相比，预处理工具的实际限制是什么？ 这将在本系列的下一部分中介绍。
前言React组件CSS-in-JS是一种流行的前端开发技术，它将组件的JavaScript逻辑与样式定义结合在一起，以提高代码的可维护性和可重用性。...通过CSS-in-JS，开发者可以在组件级别轻松管理样式，而不必担心全局污染或类名冲突。...常见的React CSS-in-JS库包括Styled-components和Emotion。CSS-in-JS还可以提供一些额外的好处，如自动前缀处理和代码拆分，以提高性能。...总之，React组件CSS-in-JS是一个强大的工具，可以帮助开发者更轻松地管理组件样式，从而提高前端开发的效率和可维护性。.../ emotion利用 JS 来编写 CSS, 可以让 CSS 具备样式嵌套、函数定义、逻辑复用、动态修改状态等特性也就是说, 从某种层面上, 提供了比过去 Less/Scss 更为强大的功能所以 CSS-In-JS
，先从 css-in-js 优点说起，再转而谈到缺点，说明了 css-in-js 这个新事物拥有明显的优点与缺点；然后从性能问题作为切入点，说明自己所在的公司为什么不得不抛弃 css-in-js；最后告诉读者目前自己的解决方案是...css-in-js 的优缺点 css-in-js 作为一个理念较新的开发思路，拥有如下几个明显的优缺点。 优点： 无全局样式冲突。...编译时 css-in-js 方案是出路吗 理论上是出路，但限制了 css-in-js 的灵活性。...所以使用了编译时 css-in-js 方案，本质上还是抛弃了运行时 css-in-js，投向了变种的 css-modules 阵营。...总结 css-in-js 本身方向是对的，即把 css 与 js 融合，但太过灵活的运行时 css-in-js 方案遇到了几乎不可解的性能问题，编译时的 css-in-js 方案可能是更好的出路。
在前面的文章当中介绍了一个 styled-compoents 的一个动态修改状态的特性，这个特性就是借助 props 来实现的，如下, 假如我现在有这么一个需求...
CSS-in-JS VS CSS Preprocessor ?...在 Google Trends 中我们可以看到 2014 年后 CSS-in-JS 的趋势就逐渐超越了 CSS 预处理器，这在一方面也说明了开发人员在 CSS-in-JS 上有着很大兴趣。...CSS-in-JS 的介绍 CSS-in-JS是一种样式化技术，其中 JavaScript 用于样式化组件。...使用 CSS-in-JS 的优点 组件化思考模式，不再需要维护一堆样式表。CSS-in-JS 将 CSS 模型抽象到组件级别，而不是文档级别（模块化）。...动态浏览器私有化前缀，使用 CSS-in-JS 可以避免臃肿的 CSS 代码。 代码共享，轻松在 JS 和 CSS 之间共享常量和函数。 CSS-in-JS 的单元化测试。
文文章 Sam 会带大家深入探讨 CSS-in-JS 最初吸引人的原因，以及为什么作者（以及Spot团队的其他成员）决定放弃它。 什么是 CSS-in-JS？...CSS-in-JS 的好、坏、丑 在讨论 CSS-in-JS 编码模式及其对性能的影响之前，先来看看为什么有的开发者会使用 CSS-in-JS，有的不会使用。 好处 1.局部作用域的样式。...2 CSS-in-JS增加的包的大小。这是一个明显的问题--每个访问你网站的用户都必须下载CSS-in-JS库的JavaScript。...性能 运行时 CSS-in-JS既有明显的优点也有明显的缺点。为了理解我们的团队为什么要放弃这项技术，我们需要探索CSS-in-JS的实际性能影响。...关于编译时CSS-in-JS的说明 本文主要介绍运行时的CSS-in-JS库，如 Emotion 和s tyled-components。
本期精读的文章是：css-in-js 杀鸡用牛刀 1 引言 继 精读《请停止 css-in-js 的行为》 这篇文章之后，我们又读了一篇抵制 css-in-js 的文章，虽然大部分观点都有道理，但部分存在可商榷之处...，让我们分析一下这篇文章，了解 css 还做了哪些努力，以及 css-in-js 会如何发展。...3 精读 无论是 css-in-js 还是 css 预编译的尝试，各自都具有强大优点，本文对 css-in-js 提出的质疑我认为是欠妥当的，下面谈谈 css-in-js 如何解决作者提出的问题，以及简单介绍...3.2 css-in-js 仍具备代码复用性 文中观点提出，css-in-js 这种局部样式行为，会导致公共样式、方法难以复用，导致各个模块参杂着大量重复代码。...虽然作者呼吁我们不要只顾着 css-in-js，要放眼看看 OOCSS, SMACSS, BEM, ITCSS, 和 ECSS 等基于原生 css 的解决方案，但我觉得把这些思想运用到 css-in-js
本周精读文章：请停止 css-in-js 的行为 1 引言 这篇文章表面是在讲 CSS in JS，实际上是 CSS Modules 支持者与 styled-components 拥趸之间的唇枪舌剑、...从 2014 年 Vjeux 的演讲开始，css-in-js 的轮子层出不穷。终于过了三年，鸡血时期已经慢慢过去，大家开始冷静思考了。...比如是最简单的 button，可能在用的时候由于场景不同，就需要设置不同的 font-size，height，width，border 等等，如果全部使用 css-in-js 那将需要把每个样式都变成...css-in-js 生成的 className 通常是不稳定的随机串，这就给外部想灵活覆盖样式增加了困难。...这种情况维护的变量值最终是存储在 js 中更加妥当，然而 scss 给大家带来的 css first 思想根深蒂固，导致许多基础库的变量完全存储在 _variable.scss 文件中，现在无论是想适应 css 的新特性，还使用 css-in-js
在Github扒了一下作者发现 PandaCSS 其实在2023 年 3 月 Segun Adebayo 发布的《Chakra UI的未来》 一文中有提到过，只...
在本文中，作者以评估过程为线索，介绍了CSS-in-JS的背景、现状、开发特点和趋势。 HTML、JS、CSS 是 Web 开发的三大核心技术。...本文以我们的评估过程为线索，介绍了CSS-in-JS的背景、现状、开发特点和趋势。...CSS-in-JS，也就是本文的重点，接下来我们会围绕着它展开讨论。...CSS-in-JS 的出现与争议 CSS-in-JS （后文简称为 CIJ）在 2014 年由 Facebook 的员工Vjeux 在 NationJS 会议【3】上提出：可以借用 JS 解决许多 CSS...目前流行的CSS-in-JS框架，比如Emotion，暂时还无法支持这样的特性。
本文将通过分析CSS-in-JS这项技术带来的好处以及它存在的一些问题来帮助大家判断自己是不是要在项目中使用CSS-in-JS。...好处 看完了一些不同的实现，大家应该对CSS-in-JS一些基本的概念和用法有了大概的理解，接着我们可以来聊一下CSS-in-JS都有什么好处和坏处了。...CSS-in-JS的思路就可以很好地解决这个问题。...CSS-in-JS却可以很好地支持Critical CSS的生成。...如果不使用CSS-in-JS，处理这些逻辑复杂的情况会比较麻烦。
简介 CSS-in-JS是什么，看到这个词就能大概猜到是在JavaScript里写CSS，那为什么要在JavaScript里写CSS呢，像之前一样写在css文件里哪里不好么？...可以看出，以上框架都解决了不少痛点，但也还是各有一些不足，当然CSS-in-JS也并不是完美的解决了所有问题，我们先来详细介绍一下。...流行框架介绍 现在随着组件化概念的流行，对从组件层面维护CSS样式的需求日益增大，CSS-in-JS就是在组件内部使用JavaScript对CSS进行了抽象，可以对其声明和加以维护。...来看一下几个流行的CSS-in-JS框架六个月内的下载趋势： 我们来看看几个下载量靠前的框架的风格是什么样的： styled-components 先来看看下载量最高的styled-component...优劣势总结 看了这些框架后，可以发现CSS-in-JS的优势还是挺多的： 因为有了生成的唯一class名称，避免了全局污染的问题 唯一的class名称也解决了命名规则混乱的问题 JavaScript和CSS
CSS-in-JS 长什么样？ 开发者们已经创建了不同风格的 CSS-in-JS。...为什么我喜欢 CSS-in-JS？ 主要是 CSS-in-JS 增强了我的信心。我可以在不产生任何意外后果的情况下，添加、更改和删除 CSS。我对组件样式的更改不会影响其他任何内容。...是什么让 CSS-in-JS 变得特别？” CSS-in-JS 将所有这些好处结合到一个好用的包中并强制执行它们。它引导我走向成功的关键：做正确的事情很容易，做错事很难（甚至不可能）。...谁在使用 CSS-in-JS？ 有上千家公司在生产中使用 CSS-in-JS，包括 Reddit、Patreon、Target, Atlassian、Vogue、GitHub、Coinbase 等等。...(包括本网站) CSS-in-JS 适合你吗？ 如果你使用 JavaScript 框架来构建包含组件的 Web 应用程序，那么 CSS-in-JS 可能非常适合。
不过，Magura 根据他对 Spot 代码库的研究得出结论，CSS-in-JS 的坏处大于好处： 所以，这就是我们放弃CSS-in-JS的原因——运行时性能成本太高了。...运行时CSS-in-JS也可能影响服务器端渲染优化。...如果下一次我开始一个新项目，我将不再使用运行时CSS-in-JS。我要么使用普通的CSS，要么使用一些构建时CSS-in-JS替代方案。...CSS-in-JS指的是通过JavaScript生成CSS规则，而不是在外部CSS文件中定义样式。...运行时CSS-in-JS库，如Emotion或styles-component，在运行时动态修改样式，例如将样式标签注入文档。零运行时CSS-in-JS是一种在构建时提取所有CSS的模式。
当 CSS-in-JS 出现时，我们遇到了类似的情况，在一开始，开发者注意到它正在复制 CSS 足迹，并在某种程度上违背了缓存和失效的概念。
随着 Facebook 和 Twitter 最近的产品部署，我认为一个新的趋势正在缓慢增长:Atomic CSS-in-JS。...和 CSS-in-JS 比较 CSS-in-JS 和实用工具/原子 CSS 有密切关系。这两种方法都提倡使用标签进行样式化。...探索原子 CSS-in-JS 原子 CSS-in-JS 可以被视为是“自动化的原子 CSS”： 你不再需要创建一个 class 类名约定 通用样式和一次性样式的处理方式是一样的 能够提取页面所需要的的关键...没什么能阻止你在原子 CSS-in-JS 的框架上建立你自己的抽象 CSS 规则，Styled-system 就能在 CSS-in-JS 库里完成一些类似的事情。...结论 这就是我要说的关于原子 CSS-in-JS 所有内容。 我从来没有在任何大型生产部署中使用过原子 CSS、原子 CSS-in-JS 或 Tailwind。我可能在某些方面是错的，请随时纠正我。
在最近的 Google 开发者大会上，介绍了最新的七大功能，它们分别是: 支援css-in-js的框架的样式编辑 模拟时区功能 Lighthouse 量化使用者体验 Issues 面板 媒体面板 一件修复文字的色彩对比...支援css-in-js的框架的样式编辑 看到这个功能的时候， 你可能会好奇， Chrome Devtool 不是早就可以编辑css了吗？...没错，但是原本支持的是「 普通的css 」, 不是 「css-in-js」. ? 现在，“样式”窗格对编辑使用CSS对象模型（CSSOM）API创建的样式提供了更好的支持 。...许多 CSS-in-JS框架和库都在底层使用CSSOM API来构造样式。 ? 例如，（CSSOM API）h1添加的样式CSSStyleSheet以前不可编辑。 ?...因为它是css-in-js的代码。 但是现在可以在“样式”窗格中进行编辑了： ? 动态演示： ? 2.
know about 除了传统的 CSS，您还可以使用 内联样式 和 CSS-in-JS 作为 React 应用程序的样式选项。...在这篇文章中，我将讨论在 CSS-in-JS 中你可以用上面的库来做的五件事，而我打赌这是你不知道的。...3.使用关键帧链接多个动画 与内联样式不同，CSS-in-JS 允许您使用关键帧定义动画。...在这个 页面 中，您可以测试和比较许多 CSS-in-JS 的库。 另一方面，还有其他库正在进一步采用 CSS，JavaScript和类型的概念。...这里有一个关于这个库和 CSS-in-JS 的 精彩演示。 非常推荐。
除了传统的 CSS，你还可以使用 内联样式 和 CSS-in-JS 作为 React 应用程序的样式选项。...另一方面，CSS-in-JS 是一种使用 JavaScript来设置组件样式的技术。在解析此 JavaScript时，会生成 CSS（通常作为 元素）并附加到 DOM 中。...在这篇文章中，我将讨论在 CSS-in-JS 中你可以用上面的库来做的五件事，而我打赌这是你不知道的。...3.使用关键帧链接多个动画 与内联样式不同，CSS-in-JS 允许你使用关键帧定义动画。...在这个 页面 中，您可以测试和比较许多 CSS-in-JS 的库。 另一方面，还有其他库正在进一步采用 CSS，JavaScript和类型的概念。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
