打开新世界的大门: 用工具类实现页面样式让你效率翻番

avatar

什么叫用工具类实现页面样式?

  • 预先定义了一系列样式(class)
  • 不写额外的样式
  • 只在 html 标签上组合预定义的样式

示例如下

<p
  class="
    md:flex
    p-2
    rounded-md
    text-blue-400
    bg-slate-100
    dark:bg-slate-800
  "
>
  用工具类实现页面样式
</p>

为什么要这样写样式?

  • 挂这么多 class 在元素上不丑吗?

    丑是丑点, 但当你真正尝试一下, 就会发现这种方式简单高效, 可维护性极强

  • 这和写行内样式有什么区别?

    比内联样式更具优势, 例如可以做到强约束和响应式

  • 说好的语义化呢?

    class 的主要目的是成为 CSS 和 JavaScript 的钩子

这是一种反常规反直觉的写样式方式, 因为我们一直以来遵循的最佳实践是使用 class 来描述内容而不是描述展现形式.

但是这样做有很多优点, 而且是经得住考验的(强烈建议看一遍心路历程)

我已经写了几千字来解释为什么传统的“语义类名”是CSS难以维护的原因，但事实是，除非你真正尝试过，否则你是不会相信我的。如果你能克制住作呕的冲动，给它一个机会，我真的认为你会想知道你以前是如何以其他方式处理CSS的。

  • 写起来更快
  • CSS 将停止增长
    • 组合复用, 而不是新写样式
  • 改样式更加安全
    • 修改元素的 class 是局部影响, 只会影响到这个元素
  • 视觉一致性

    • 用预定义样式构建的页面一定是符合设计规范的

    • 就好比低代码平台, 用有限空间创造无限可能

    • 添加更多的 CSS 永远不会让你的 CSS 更简单。
    • 编写 CSS 就好比在一张空白画布上画画; 没有什么能阻止你使用任何你想要的值。
    • 如果只是应用现有类，空白画布的问题就消失了。

    使用小型、可组合的预定义样式最大好处之一是，团队中的每个开发人员始终从一组固定的选项中选择值。

    • 想让一些深色文本减弱一点？添加 .text-dark-soft 类。
    • 需要让字体小一点吗？使用类 .text-sm 。

    当项目中的每个人都从一组精选的有限选项中选择他们的样式时，CSS 不会随着项目规模的增长而线性增加，而且你还可以免费获得一致性。

实战

下面以 Tailwind CSS 为实例, 带大家一起领略 Utility-First 的魅力

接入

接入到项目时需要注意些什么

  • Preflight

    Tailwind 会自动注入一组基本样式, 可能会影响到接入的项目, 你可以 Disabling Preflight

  • Prefix

    为尽可能避免 Tailwind 生成的所有 utility class 与接入项目的样式产生冲突, 建议配置 prefix 并在使用时带上这个前缀

    例如:

    <div class="p-2"></div>

    配置 prefix: 'tw-' 后, 我们应该改为

    <div class="tw-p-2"></div>

  • Tree-shaking

    只有实际使用了的样式才会打包进来

    Tailwind CSS 的工作原理是扫描所有 HTML、JavaScript 组件和任何其他模板文件中的类名，然后为这些样式生成所有相应的 CSS

    Tailwind 扫描源代码以查找类的方式非常简单——我们实际上不会用编写它的语言解析或执行您的任何代码，我们只是使用正则表达式来提取每个可能是类名的字符串。

    不要动态构造类名, 因为 Tailwind 只会在源文件中查找作为完整不间断字符串存在的类名，如果使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS

扩展

使用

  • Modifier

    在类名的开头添加修饰符, 表明 utility class 在某些条件下才会应用, 例如: bg-sky-700 和 hover:bg-sky-700

  • Responsive Design

    借助修饰符 utility class 可以在不同的断点条件下应用, 例如: flex 和 md:flex

  • Dark Mode

    借助修饰符 utility class 可以在深色模式才会应用, 例如: dark:bg-slate-800

  • Using @apply with per-component CSS

    需要在 plugin 中定义自定义样式才能在 Vue 这样的框架中 @apply

  • Referencing in JavaScript

    可以在 JS 中获取到配置在 Tailwind 中的值, 例如主题色

总结

一旦你在项目中真正的用起来, 慢慢地适应这种方式, 你的效率会更上一个台阶, 你会发现再也回不去了.

avatar
文章
阅读
粉丝