去年我写了一篇简单的文章解释为什么我使用 Tailwind CSS, here
团队的成员读了以后反馈说“没讲清楚”,说我又来详细介绍一下 why we should use Utility-First CSS。
Utility-First CSS 是 Tailwind CSS 官方宣传的一种编写 CSS 的方式。
简单说:提供大量基础的 CSS classname,然后利用 CSS 的组合能力,想堆砌乐高积木一样编写 CSS。
为什么会有这么多种方式?
要讨论这个问题,首先我们需要问 “这些开发方式试图解决什么问题?”
答:解决 CSS 模块化问题。
那么,CSS 模块化遇到了哪些问题?
https://github.com/camsong/blog/issues/5
- 全局污染
- 命名混乱
- 依赖管理不彻底
- 无法共享变量
- 代码压缩不彻底
在上述问题中,“全局污染” 可能是最受开发者诟病的问题了。
我以前也觉得 CSS global scope 是一个问题,但是学习了 Utility-First CSS 以后,我太爱 global scope 了。 只要使用得当,轻轻松松达到 Less is More 的效果。
需求:一个简单的表格
传统风格
<style>
.table { ... }
.table-thead { ... }
.table-cell { ... }
.table-tbody { ... }
.table-row { ... }
.table-row > .table-cell { ... }
</style>
<table class="table">
<thead class="thead">
<tr>
<th class="table-cell">Name</th>
<th class="table-cell">Age</th>
<th class="table-cell">Address</th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td class="table-cell">Jiang</td>
<td class="table-cell">29</td>
<td class="table-cell">Japan</td>
</tr>
<tr class="table-row">
<td class="table-cell">Jiang</td>
<td class="table-cell">29</td>
<td class="table-cell">Japan</td>
</tr>
</tbody>
</table>
思考:
Utility-First 风格
<table class="bg-* m-* font-*">
<thead class="bg-* m-* font-*">
<tr>
<th class="bg-* m-* font-*">Name</th>
<th class="bg-* m-* font-*">Age</th>
<th class="bg-* m-* font-*">Address</th>
</tr>
</thead>
<tbody class="bg-* m-* font-*">
<tr>
<td class="bg-* m-* font-*">Jiang</td>
<td class="bg-* m-* font-*">29</td>
<td class="bg-* m-* font-*">Japan</td>
</tr>
<tr>
<td class="bg-* m-* font-*">Jiang</td>
<td class="bg-* m-* font-*">29</td>
<td class="bg-* m-* font-*">Japan</td>
</tr>
</tbody>
</table>
思考:
Utility-First 风格 + UI Component
const Th = ({children}) => (<th class="bg-* m-* font-*">{{children}}</th>)
const Td = ({children}) => (<td class="bg-* m-* font-*">{{chilren}}</td>)
<table class="bg-* m-* font-*">
<thead class="bg-* m-* font-*">
<tr>
<Th>Name</Th>
<Th>Age</Th>
<Th>Address</Th>
</tr>
</thead>
<tbody class="bg-* m-* font-*">
<tr>
<Td>Jiang</Td>
<Td>29</Td>
<Td>Japan</Td>
</tr>
<tr>
<Td>Jiang</Td>
<Td>29</Td>
<Td>Japan</Td>
</tr>
</tbody>
</table>
思考:
背后的思想是什么?
组合由于继承
TJ
有一个 YouTube 视频,我之前分享过,大家可以看一下。https://youtu.be/3XaXKiXtNjw
Utility-First CSS 优点
Utility-First CSS 缺点
个人观点