自动生成的原子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中文网其他相关文章!

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

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

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

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

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