做一记录,免得每次都去网上搜图标对应的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元无门槛券
手把手带您无忧上云