什么叫用工具类实现页面样式?
- 预先定义了一系列样式(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的。
- 写起来更快
- 过程就像是在搭乐高积木
- 不再浪费精力发明类名了
- 只需要关注在元素上就行了
- 熟练使用+IDE加持会让你效率翻番
- CSS 将停止增长
- 组合复用, 而不是新写样式
- 改样式更加安全
- 修改元素的
class
是局部影响, 只会影响到这个元素
- 修改元素的
- 视觉一致性
-
用预定义样式构建的页面一定是符合设计规范的
-
就好比低代码平台, 用有限空间创造无限可能
- 添加更多的 CSS 永远不会让你的 CSS 更简单。
- 编写 CSS 就好比在一张空白画布上画画; 没有什么能阻止你使用任何你想要的值。
- 如果只是应用现有类,空白画布的问题就消失了。
使用小型、可组合的预定义样式最大好处之一是,团队中的每个开发人员始终从一组固定的选项中选择值。
- 想让一些深色文本减弱一点?添加
.text-dark-soft
类。 - 需要让字体小一点吗?使用类
.text-sm
。
当项目中的每个人都从一组精选的有限选项中选择他们的样式时,CSS 不会随着项目规模的增长而线性增加,而且你还可以免费获得一致性。
-
实战
下面以 Tailwind CSS 为实例, 带大家一起领略 Utility-First 的魅力
接入
接入到项目时需要注意些什么
-
Tailwind 会自动注入一组基本样式, 可能会影响到接入的项目, 你可以 Disabling Preflight
-
为尽可能避免 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
扩展
-
Tailwind 易扩展和可定制, 提供了丰富的 Configuration 和 Functions & Directives,
@layer
指令和theme()
方法在扩展和定制主题时会很有用, 再到插件系统, 你都可以从容应对
使用
-
在类名的开头添加修饰符, 表明 utility class 在某些条件下才会应用, 例如:
bg-sky-700
和hover:bg-sky-700
-
借助修饰符 utility class 可以在不同的断点条件下应用, 例如:
flex
和md:flex
-
借助修饰符 utility class 可以在深色模式才会应用, 例如:
dark:bg-slate-800
-
Using @apply with per-component CSS
需要在
plugin
中定义自定义样式才能在 Vue 这样的框架中@apply
-
可以在 JS 中获取到配置在 Tailwind 中的值, 例如主题色
总结
一旦你在项目中真正的用起来, 慢慢地适应这种方式, 你的效率会更上一个台阶, 你会发现再也回不去了.