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