虽然我每天都在深入研究技术,但我没有太多时间来分享我公司为客户实施的复杂集成和自动化。 同样,我没有太多的探索时间。 我写的大部分技术都是寻求 Martech Zone 涵盖它们,但每隔一段时间 - 特别是通过 Twitter - 我看到一些关于我需要分享的新技术的嗡嗡声。
如果您从事网页设计、移动应用程序开发,或者甚至只是建立一个内容管理系统,您可能已经与跨多个样式表的竞争样式的挫折作斗争。 即使在每个浏览器中内置了惊人的开发工具,跟踪和清理 CSS 也需要太多的时间和精力。
CSS框架
近年来,设计师在发布已准备就绪并可供使用的款式系列方面做得非常出色。 这些 CSS 样式表更广为人知的是 CSS 框架,它试图容纳所有不同的样式和响应能力,以便开发人员可以只引用一个框架,而不是从头开始构建 CSS 文件。 一些流行的框架是:
- 引导 – 一个发展了十多年的框架,首先由 Twitter 引入。 它提供了无数的功能。 它确实有缺点,需要 SASS,难以过度使用,依赖于 JQquery,并且加载起来非常繁重。
- 布尔玛 – 一个对开发人员友好且不依赖于 JavaScript 的干净框架。
- 基金会 – 一个更通用和可用的 CSS 框架,它拥有大量易于定制的组件。 此外,还有 电子邮件基础 和 运动UI 用于动画。
- UI套件 – HTML、JavaScript 和 CSS 的组合,可让您快速轻松地开发前端。
Tailwind CSS 框架
虽然其他框架在适应流行的用户界面元素方面做得很好,但 Tailwind 使用了一种称为 原子 CSS. 简而言之,Tailwind 使用自然语言巧妙地组织了类名,以实现他们所说的。 因此,虽然 Tailwind 没有组件库,但仅通过引用 CSS 类名即可轻松构建强大的响应式界面的能力是优雅、快速且无与伦比的。
这里有一些非常棒的例子:
CSS网格
CSS 渐变
用于暗模式支持的 CSS
Tailwind 也有很棒的 扩展可用 用于 VS Code,以便您可以轻松地从 Microsoft 的代码编辑器中识别和插入类。
更巧妙的是,Tailwind 在为生产构建时会自动删除所有未使用的 CSS,这意味着您的最终 CSS 包可能是最小的。 事实上,大多数 Tailwind 项目向客户端交付的 CSS 都不到 10kB。