首页 web前端 css教程 自动生成的原子CSS

自动生成的原子CSS

Mar 28, 2025 am 11:21 AM

自动生成的原子CSS

罗宾·韦瑟(Robin Weser)探索原子CSS中速写长束困境的探索突显了自动将HTML和CSS转换为优化样式的挑战。核心问题在于处理由速记和Longhand CSS属性相互作用引起的边缘案例,从而在使用产生原子类的Fela之类的框架时会导致潜在的错误。

原子CSS的概念(一个班级,一项工作)很有趣。考虑此示例:

 <code>.mb-8 { margin-bottom: 2rem; }</code>
登录后复制

想象成千上万的这样的课程,几乎涵盖了每个CSS的可能性。

为什么使用原子CSS?存在几个令人信服的原因:

  • 减少的CSS:消除重复的属性/价值对和特定于作者的类名称可显着收缩最终的CSS文件大小。这是至关重要的,因为CSS是阻止资源。
  • 简化的命名:不再需要耗时的班级名称头脑提示。
  • 设计一致性:限制可用类可实施一定程度的设计统一性。
  • 开发人员速度提高:一些开发人员发现这种方法更快,更有效。

可以手动完成生成原子CSS(GitHub和Facebook分别使用Primer和FB5完成,尽管不一定建议使用),也可以使用预构建的框架。 Tachyons是大量原子类集合的早期例子。

但是, Tailwind CSS是主要的球员。它的优势在于:

  • 可配置性:自定义类以满足您的项目需求。
  • 清除未使用的课程:这个关键步骤删除了未使用的类,实现了原子CSS的全部性能优势。
  • 内置的UI库:使用随时可用的组件加速开发。

但是,自动生成原子CSS呢?

Yahoo的方法使用函数作为在构建步骤中处理的类名称,预示了当前方法。这类似于par purgecss组合。

今天,您无需手动编写原子CSS。正如Weser指出的那样,Fela,Styletron,React Native Web,Otion和Stylesheet等库可以使您在构建过程中生成原子CSS时以熟悉的方式编写样式。这种方法可最大化可重复性,并最大程度地减少CSS捆绑包大小。每个属性值对仅渲染一次,从而提高效率。

这种方法通常植根于CSS-IN-JS,同时处理标记和CSS以获得最佳结果。这是手动编写原子CSS的令人信服的替代方法,包括作者在内的许多开发人员都发现吸引力较小。关键好处是自动化优化,以改善Web性能。

问题仍然存在:您对这种方法有何看法?

以上是自动生成的原子CSS的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1667
14
CakePHP 教程
1426
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1255
24
静态表单提供商的比较 静态表单提供商的比较 Apr 16, 2025 am 11:20 AM

让我们尝试在这里造成一个术语:“静态表单提供商”。你带上html

使Sass更快的概念证明 使Sass更快的概念证明 Apr 16, 2025 am 10:38 AM

在一个新项目开始时,Sass汇编发生在眼睛的眨眼中。感觉很棒,尤其是当它与browsersync配对时,它重新加载

每周平台新闻:HTML加载属性,主要的ARIA规格以及从iframe转移到Shadow dom 每周平台新闻:HTML加载属性,主要的ARIA规格以及从iframe转移到Shadow dom Apr 17, 2025 am 10:55 AM

在本周的平台新闻综述中,Chrome引入了一个用于加载的新属性,Web开发人员的可访问性规范以及BBC Move

带有HTML对话框元素的一些动手 带有HTML对话框元素的一些动手 Apr 16, 2025 am 11:33 AM

这是我第一次查看HTML元素。我已经意识到了一段时间,但是尚未将其旋转。它很酷,

纸张形式 纸张形式 Apr 16, 2025 am 11:24 AM

购买或建造是技术的经典辩论。自己构建东西可能会感觉更便宜,因为您的信用卡账单上没有订单项,但是

'订阅播客”链接应在哪里? '订阅播客”链接应在哪里? Apr 16, 2025 pm 12:04 PM

有一段时间,iTunes是播客中的大狗,因此,如果您将“订阅播客”链接到喜欢:

托管您自己的非JavaScript分析的选项 托管您自己的非JavaScript分析的选项 Apr 15, 2025 am 11:09 AM

有很多分析平台可帮助您跟踪网站上的访问者和使用数据。也许最著名的是Google Analytics(广泛使用)

See all articles