CSS 也可以这么写

发表于

前言

这篇文章想介绍一下在项目中积累实践并结合 Atomic CSS 的思想的另一个 css 解决思路但并不适用所有。大家可能听说过各种 CSS 解决方案，例如 BEM，OOCSS 等等，最近几年体验下来可以说到目前来说还没让人完全满意的 CSS 框架的样式设计，目前市面上的主流 css 框架是提供完整的设计输出，是组件级别，你只要把类名复制进去，或者通过框架提供的变量进行自定义，在总的来说意义不大。

AtomicCSS

Atomic CSS 的思想，采用类似乐高搭积木的方法提供丰富原子，接入到项目的话它就是设计规范，你只需要从里面把这些元素挑出来进行组合，写好设计规范，接下来就是搭积木。
我很不喜欢起应用在 CSS 做用上的命名, 为了给一个按钮美化样式，需要给 HTML 元素命名，然后到样式文件写一堆无聊又重复的 CSS。
在以前我们在编写 css 方式总结了有以下几种：

语义化(结构化类名)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
  .nav{
    height: 34px;
    display: flex;
    justify-content: space-between;
  }
  .nav-left{
    font-size：14px;
  }
  .nav-center{
    font-size：16px;
  }
  .nav-right-login{
    font-size：18px;
  }
</style>
<nav class="nav">
  <a class="nav-left" href="#">Home</a>
  <a class="nav-center" href="#">About</a>
  <span class="nav-right">
    <a class="nav-right-login" href="#">Login</a>
  </span>
</nav>

这种模式主要受 BEM 系统方法命名的影响，在 jQuery 独霸天下的年代很适用因为我们要操作 DOM 。

复用组合

1
2
3
4
5
6
7
<nav class="uilist">
  <a class="uilist-item" href="#">Home</a>
  <a class="uilist-item" href="#">About</a>
  <span class="uilist-item">
    <a class="btn" href="#">Login</a>
  </span>
</nav>

当我们开始专注于创建可重用的类时，就会发现组件执行的次数越多，或者组件越具体，则重用就越困难。

组件修饰符

1
2
<button class="btn">Default</button>
<button class="btn btn-primary">Login</button>

原子化

最后就是原子化也就是 AtomiCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
  .df{display:flex;}
  .h34{height：34px;}
  .jcsb{justify-content: space-between;}
  .fs14{ font-size:14px; }
  .fs14{ font-size:16px; }
  .fs14{ font-size:18px; }
</style>
<nav class="df h34 jcsb">
  <a class="fs14" href="#">Home</a>
  <a class="fs16" href="#">About</a>
  <span>
    <a class="fs18" href="#">Login</a>
  </span>
</nav>

看这种方法很容易认为这就像在 HTML 元素上添加样式标签并添加所需的任何属性 inline css 一中简写方式，但是根据我的经验，这是非常不同的。使用内联样式时，您选择的值没有限制，更不用说复用了，随着 react vue 的流程在组件化开发浪潮中才真正变得可行。

  • Text sizes, colors, and weights
  • Border colors, widths, and positions
  • Background colors
  • Flexbox
  • Padding and margin

Tailwind CSS

1
2
3
4
5
<button
  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
  Button
</button>

Tailwind CSS 可以看作是 utility-first CSS 的一种极致抽象: 所有的 CSS 类都有且只有一个单一的，独特的 CSS 规则。Tailwind CSS 的目的不是直接把设计过的东西给你，而是帮助你更快地实现你的设计。原子化的通用的 class 我们可以称为 utility， Tailwind CSS 提供的就是一些 utility。那么和 Tailwind 相比，是否需要手写 Atomic CSS ？
Tailwind CSS 和 手写 Atomic CSS 相比 ：
优点：

  • 可以方便地做到响应式设计
  • 丰富的预设，如字体大小，预设颜色
    缺点：
  • Tailwind CSS 有一定的学习曲线
  • 丰富的预设，也就带来繁重的内容，实际项目中配合规范之后并不需要这么多预设
  • 可能很多 (React, Vue) 组件需要自己动手实现毕竟只是个 UI

总结

我认为原子化的 CSS 在基于组件化思维的 react 或者 vue 项目中使用是未来的大趋势，虽然感觉是在写行内样式。经过实践下来对与 Tailwind CSS 来说，它有一定的学习曲线且上手成本相对较高，且对与一个有追求的项目来说 Tailwind CSS 提供的内容过于丰富对与 UI 层影响大。从开发体验来说自定义的 Atomic CSS 更适合。

最后

前端时间看到一篇文章，Facebook 的改版也是用了原子化的思想，唯一的区别的他们是在工程化层面的实现，而且带来的收益正如 Atomic CSS 所期望的那样，Twitter 和 Facebook 的 CSS 都已经大幅减少了，他们都遵循图中的曲线。