做一记录，免得每次都去网上搜图标对应的class. 在线版本：http://dnt.dkill.net/dnt/font/
Hexo 支持FontAwesome图标，就是在代码中出现名字以fa fa开头的类名，本文介绍具具体图标来源和使用方法。
笔者用 styled-components 就遇到了类似问题，甚至语法会产生不兼容的情况，虽然这些问题都可以被解决，但花费的额外时间需要计算一样，相比 css-in-js 得到的收益是否值得。...所以当性能问题是绕不过去的话题，而 css-modules 在性能最优的情况下，有一些曲线方案可以同时支持 css-in-js 的优点，也就能理解为什么作者要弃用 css-in-js 了。...编译时 css-in-js 方案是出路吗 理论上是出路，但限制了 css-in-js 的灵活性。...从 vanilla-extract 等编译时 css-in-js 框架来看，确实解决了运行时 css-in-js 性能问题，但带来了更多语法限制，比如必须预先定义样式再使用： import { style...想要做到通用性，只能提供一个 className，这样就不受任何框架和环境的限制了，但这样也限制了声明语法的灵活性，显然不可以用内连方式定义样式。
不同的实现 实现了CSS-in-JS的库有很多，据统计现在已经超过了61种。虽然每个库解决的问题都差不多，可是它们的实现方法和语法却大相径庭。...再来看一下radium在CSS-in-JS Playground的例子： 从上面的例子可以看出radium定义样式的语法和styled-components有很大的区别，它要求你使用style属性为DOM...其他区别 不同的CSS-in-JS实现除了生成的CSS样式和编写语法有所区别外，它们实现的功能也不尽相同，除了一些最基本的诸如CSS局部作用域的功能，下面这些功能有的实现会包含而有的却不支持： 自动生成浏览器引擎前缀...好处 看完了一些不同的实现，大家应该对CSS-in-JS一些基本的概念和用法有了大概的理解，接着我们可以来聊一下CSS-in-JS都有什么好处和坏处了。...参考文献 An Introduction to CSS-in-JS: Examples, Pros, and Cons Why I Write CSS in JavaScript Oh No!
强制执行原子 CSS 规则的一个规则，一个类名，有什么好处?你最终会得到更大的 html 标签和更烦人的命名约定吗?Tailwind 已经有了足够多的原子类了啊。...Tailwind 是一个优秀的解决方案，但仍然有一些问题没有解决: 需要学习一套主观的命名约定 CSS 规则插入顺序仍然很重要 未使用的规则可以轻松删除吗?...我们如何处理剩下的一次性样式? 与 Tailwind 相比，手写原子 CSS 可能不是最方便的。 和 CSS-in-JS 比较 CSS-in-JS 和实用工具/原子 CSS 有密切关系。...这两种方法都提倡使用标签进行样式化。以某种方式试图模仿内联样式，这让它们有了很多相似的特性(比如在移动某些功能的时候更有信心)。...探索原子 CSS-in-JS 原子 CSS-in-JS 可以被视为是“自动化的原子 CSS”： 你不再需要创建一个 class 类名约定 通用样式和一次性样式的处理方式是一样的 能够提取页面所需要的的关键
该部分由他们的观点总结而出。 CSS 本身有不少缺陷，如书写繁琐（不支持嵌套）、样式易冲突（没有作用域概念）、缺少变量（不便于一键换主题）等不一而足。...更有甚者，有人维护了一份完整的 CSS in JS 技术方案的对比。截至目前，已有 49 种之多。...比如是最简单的 button，可能在用的时候由于场景不同，就需要设置不同的 font-size，height，width，border 等等，如果全部使用 css-in-js 那将需要把每个样式都变成...css-in-js 生成的 className 通常是不稳定的随机串，这就给外部想灵活覆盖样式增加了困难。...css modules 虽然有效解决了样式冲突的问题，但是带来的使用成本也很大。尤其是在写动画（keyframe）的时候，语法尤其奇怪，总是出错，难以调试。
CSS不受欢迎是一个很普遍的现象。导致这一现象的原因有很多，但可以归结为：CSS的不可预测性。如果你在开发中从未有过这种经历:过调试一个样式时，一不小心破坏布局，让一个看起来毫不相关的地方样式错乱。...然而，你不需要为了寻找解决方案而采用可能会引入更多问题的CSS-in-JS。 本文的目的并非想批评或否定CSS-in-JS社区所做出的努力。...编译器(在Svelte的例子中)可以识别并移除未使用的样式。再也不会有累加样式表了! 我们来看看实际情况是怎样的。 这就是他们所谓的“利用平台”吗?...所有的代码编辑器早就能够识别CSS，所以，你可以轻松实现代码补全，语法检查，以及语法高亮等，这些都不需要安装会带来JS疲劳的额外工具。...我们还没有得到所有的答案 不得不说，CSS-in-JS确实为一些延续已久的问题指出了解决方案: 我们如何从npm上安装样式? 定义在一个地方的常量如何复用? 我们如何撰写声明?
每个模块都被独立的标准化，现在标准 CSS 包括了修订后的 CSS2.1 以及完整模块对它的扩充，模块的 level（级别）数并不一致。...CSS-in-JS 的介绍 CSS-in-JS是一种样式化技术，其中 JavaScript 用于样式化组件。...每隔一段时间，都会有新的语法方案或实现，尝试补充、增强或是修复已有实现。...展望未来 CSS 设计的初衷是为了全局化的控制样式，通过选择器去扩展丰富实际的页面渲染，而 CSS-in-JS 并不是排斥 CSS 样式，而是说“样式”在现代化的组件颗粒化的发展下，使用 CSS-in-JS...，在组件扩展、主题自定义和状态同步有着很大的优势，也期望在后续的社区中有更多优秀的实践可以参考。
近日，Meta开源了一款「CSS-in-JS库」 —— StyleX。看命名方式，Style - X是不是有点像JS - X，他们有关系么？当然有。...同样的，按照Meta的设想，StyleX是一种「用JS描述CSS」的语法规范。...那么，这款Meta出品、打磨这么长时间的「CSS-in-JS库」，到底有什么特点呢？ 本文让我们来聊聊。...这种对原子类名的控制粒度是其他「CSS-in-JS库」办不到的。 相比于原子CSS的优势 stylex相比TailwindCSS这样的原子CSS有什么优势呢？...如果能实现这一点，就是「样式的类型安全」。 「样式的类型安全」有什么意义呢？举个例子：设想开发基础组件库的团队使用stylex。
我一直在花费大量精力尝试各种方法，主要是在个人项目上，所以这个系列的目的只是告知，而不是给你解决方案。 CSS的挑战 在深入研究代码之前，有必要解释Web应用程序样式化方面最显着的挑战。...有几个预定义的按钮变化是可管理的，但如果我们想要有各种按钮，如为Twitter，Facebook，Pinterest定制的特定按钮，可能还会有其他很多种？...生成的类是唯一的，因此您永远不必担心它们与其他样式冲突。 换句话说，你可以自由的使用作用域！ 这就是大多数CSS-in-JS库的工作方式 - 当然，我们将在功能和语法方面进行一些改进。...例如，人们正在使用VS Code扩展样式组件来表示类似情感的CSS-in-JS库，即使它们并非都具有相同的功能。我甚至看到提议功能的API选择受到保留语法突出显示的目标的影响！...未来 有两个新的CSS-in-JS库，Linaria和astroturf，它们通过将CSS提取到文件中来管理零运行时。 它们的API类似于样式组件，但它们的功能和目标各不相同。
类 SCSS 的语法 5. JS 带来的动态性 6. 绑定组件的全局样式 7. Theme 机制及 Theme 对象的设计 8. 提升开发体验 9....所以这类解决方案用得比较少 ---- 3️⃣ 使用 CSS-in-js 社区有很多 CSS 解决方案, 有个项目(MicheleBertoli/css-in-js)专门罗列和对比了这些方案....通过 props 和全局 theme 来动态控制样式 提供了一些 CSS 预处理器的语法 主题机制 支持 react-native....将这些配置项有很高的参考意义....组件可以认为是 UI 设计师 的产出, 如果你的应用有统一和规范的设计语言(参考antd), 这些配置会很有意义。样式可配置化可以让你的代码更灵活, 更稳定, 可复用性和可维护性更高.
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview 完整高频题库阅读地址：https://febook.hzfe.org/ 相关问题 CSS 主要有哪些预处理器...功能 Less 常用的有几种功能： 变量：变量中可以存储颜色、字体或任何 CSS 值。 嵌套：可嵌套 CSS 选择器，提供清晰的层次结构。 混合：可以定义&重用的代码块。...CSS-in-JS 如名字所见，CSS-in-JS 是一种在 JavaScript 里写 CSS 的方式。利用 JS 的优势可实现非常灵活的可扩展的样式。...CSS-in-JS 有很多实现，目前比较流行的是 Styled-components。...CSS 文件大小增长可控，通过 purge 可生成非常小的 CSS 文件。 统一设计系统下的样式与布局。 IDE 集成优秀。
通过声明式的语法，CSS 可以脱离 HTML 上下文进行独立维护，同时依赖于选择器、伪选择器、媒体查询等方式与 HTML 松耦合，最终将样式应用于 DOM 元素上。...CIJ 方案和工具过多，缺乏标准，许多处于不成熟的状态，使用起来有较大风险。...，如语法检查、自动增加浏览器属性前缀、帮助开发者增强样式的浏览器兼容性等等。...不过这种方案有一些语法上的限制，比如不支持内联CSS样式【17】。...参考文章链接： 【1】CSS封装并不是React框架本身的关注点 https://reactjs.org/docs/faq-styling.html 【2】direflow.io https://direflow.io
3.1 css-in-js 依然具备视觉一致性 文中提出，网站样式要从全局考虑，模块化样式行为的优点是解决了样式冲突问题，但因此也削弱了对全局样式的把控。...3.4 SMACSS 为css分类 SMACSS 认为 css 有 5 个类别： Base 基础样式 Layout 布局样式 Module 模块样式 State 状态样式 Theme 主题样式 我们通过这...5 种类别来拼凑出完整的 class，我感觉就是对 OOCSS 的进一步规范和约束。...也可以参考此模式定义结构。...css-in-js 缺点大部分存在漏洞，但它警示了我们，css 设计的初衷是全局化控制样式，即便产生了样式冲突、混乱的问题，但我们仍要记住，在模块化开发的今天，仍要保持网站风格的整体性，即便使用了 css-in-js
box 和 profile 有什么关系？ profile 和 avatar 有什么关系？或者他们之间真的有关系吗？ 你应该在 bio 旁边添加 pro-user 吗？...image 和 profile 写在同一部分 CSS 吗？ 可以在其他地方使用 avatar 吗？ 光看代码无法回答这些问题，你必须在 CSS 代码中推理他们的作用。 1.2....难以维护 大规模的 CSS 也难以维护。 当你改变了一个标签，样式就会像纸牌屋一样崩溃。 当你想更新一个页面上的样式，却破坏了另一个页面的样式。 当你试图覆盖其他页面，但又深陷于优先度问题。...CSS-in-JS 库 CSS-in-JS 有很多实现方案，常见的有： styled-components：https://styled-components.com/ emotion：https:/...modules" 的语法简化。 对 import "xx.css" 写法，不做任何转换。
我可以在不产生任何意外后果的情况下，添加、更改和删除 CSS。我对组件样式的更改不会影响其他任何内容。如果删除组件，我也会删除它的 CSS。不再是只增不减的样式表了！...提升的团队合作：无论经验水平如何，都会避开 CSS 常见的坑，以保持代码库整洁，并且开发更迅速。 关于性能，CSS-in-JS 库跟踪我在页面上使用的组件，只将它们的样式注入 DOM 中。...动态样式：基于全局主题或不同状态设置组件样式。 CSS-in-JS 还提供 CSS 预处理器的所有重要功能。...有上千家公司在生产中使用 CSS-in-JS，包括 Reddit、Patreon、Target, Atlassian、Vogue、GitHub、Coinbase 等等。...(包括本网站) CSS-in-JS 适合你吗？ 如果你使用 JavaScript 框架来构建包含组件的 Web 应用程序，那么 CSS-in-JS 可能非常适合。
当组件渲染时，CSS-in-JS 库必须将样式“序列化”为可以插入文档的 Pure CSS。显然这需要额外的 CPU 消耗，但这会对应用性能产生明显影响吗?我们将在下一节深入研究这个问题。...如果想深入理解，我推荐去看看完整的讨论。感谢 Dan Abramov 在 Twitter 上指出这一不准确之处。 这个问题是无解的，在运行时 CSS-in-JS 环境下它是无法修复的。...因此，下面给出的性能数字不一定也适用于你的代码库 —— 有许多用 Emotion 的方式，每种方式都有其自身的性能特点。...分析火焰图 下面是上述测试中单个列表项的火焰图： 如你所见，有大量渲染的和组件——这些是我们使用css prop 的“样式原语”。...在看 Compiled 时，我注意到的劣势包括： 组件首次挂载时样式仍被插入，这会强制浏览器对每个 DOM 节点重新计算样式。(这一劣势之前我们有讨论。)
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。...CSS-in-JS 的好、坏、丑 在讨论 CSS-in-JS 编码模式及其对性能的影响之前，先来看看为什么有的开发者会使用 CSS-in-JS，有的不会使用。 好处 1.局部作用域的样式。...下面是一些数据，供那些好奇的人参考： 我们新的样式系统 在我们下定决心不再使用CSS-in-JS之后，一个新的问题就会出现：我们应该用什么来代替？...交流 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。...本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
CSS Modules - 模块化CSS，将CSS文件以模块的形式引入到JavaScript里，基本上解决了全局污染、命名混乱、样式重用和冗余的问题，但CSS有嵌套结构的限制（只能一层），也无法方便的在...流行框架介绍 现在随着组件化概念的流行，对从组件层面维护CSS样式的需求日益增大，CSS-in-JS就是在组件内部使用JavaScript对CSS进行了抽象，可以对其声明和加以维护。...的代码风格： 从上图可以看出，Title和Wrapper都是框架包装好的component，可以直接在react的jsx语法中使用，在包装component的时候还定义了标签分别是h1和section。...JSS 和上面两个框架类似，jss也是会定义styles对象，并附到component上，最后生成的dom也是会有生成的唯一class名称，并有对应的样式，但样式并不是真正的css语法，而是对象的属性和值...优劣势总结 看了这些框架后，可以发现CSS-in-JS的优势还是挺多的： 因为有了生成的唯一class名称，避免了全局污染的问题 唯一的class名称也解决了命名规则混乱的问题 JavaScript和CSS
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
