原子化CSS什么是 CSS 原子化 John Polacek 在文章 Let’s Define Exactly Wha

什么是 CSS 原子化

John Polacek 在文章 Let’s Define Exactly What Atomic CSS is 中写道：

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

译文：

原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。

示例

正常

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style lang="scss">
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      &-wrapper {
         flex-shrink: 0;
      }
      &-logo {
        height: 3rem;
        width: 3rem;
      }
      &-content {
        margin-left: 1.5rem;
        padding-top: 0.25rem;
      }
      &-title {
        color: #1a202c;
        font-size: 1.25rem;
        line-height: 1.25;
      }
      &-message {
        color: #718096;
        font-size: 1rem;
        line-height: 1.5;
      }
  }
  
</style>

原子化

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

之前的 css

缺点：

相同功能在不同组件内部需要重新命名
类命名困难：缺失命名规范，不同人不同的风格，没有什么可读性，给类取名字一个十分痛苦的事情，大多数时候类名不伦不类，难以读懂。（BEM格式又导致类名又很长）
无意义的嵌套和使用&符号：且可读性极差，嵌套过深导致性能较差

原子化css

优点：

可读性好：原子化 CSS 的类名都非常简洁明了，一目了然，易于阅读和理解。
可编写强：直接在html上写class,不需要来回切换html,css文件，
可重用性强：由于类名的复用性强，可以将一些常用的类名定义好，随时调用，减少代码冗余。
可维护性高：由于每个类名只控制一个属性，修改样式时不需要考虑其他样式的影响，减少了出错的可能性。
可扩展性强：可以根据需求组合不同的类名来实现不同的样式。
css停止增长：使用功能类，所有内容都是可重用的，因此您几乎不需要编写新的CSS。项目越大，效果越明显
基本上不需要css预处理的less，scss

缺点：

学习成本高：原子化 CSS 的类名非常多，需要掌握大量的类名，学习成本较高。
html看着比较繁琐
使用习惯

具体情况

juejin.cn/post/691707…

Q&A 为什么不使用内联样式？

对这种方式的一个普遍反应是, “这不就是内联样式吗？” 在某些方面是 — 您是将样式直接应用于元素，而不是为元素分配一个类，然后在这个类中设置样式。

但是使用功能类比内联样式具有一些重要的优点：

基于约束的设计. 使用内联样式, 每个值都是一个魔术数字。使用功能类, 您是从预定义的设计系统中选择样式，这使得构建统一的UI变得更加容易。
响应式的设计. 在内联样式中您不能使用媒体查询, 但您可以使用 Tailwind 的响应式功能类非常容易的构建完全响应式的界面。
Hover, focus, 以及其它状态. 内联样式无法设置 hover 或者 focus 这样的状态, 但 Tailwind 的状态变体使用功能类可以非常容易的为这些状态设置样式。

实用功能

功能类
响应式设计
悬停、焦点和其他状态
深色模式
组件

常用的原子化css

Tailwind CSS tailwindcss.com/

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

Windi CSS windicss.org/guide/

Windi CSS的诞生是为了弥补Tainwind CSS在开发时的一些短板，比如热更新慢，预设不够灵活，它在支持TailWind CSS的所有工具类的情况下，极大地提高了开发模式下热更新的速度

UnoCSS unocss.dev/

Uno Css 即时按需原子 CSS 引擎，可定制·强大·快速·快乐

重新构想原子化 CSS antfu.me/posts/reima…
为什么选择 UnoCSS unocss.dev/guide/why

没有解析，没有 AST，没有扫描。它比 Windi CSS 或 Tailwind JIT 快 5 倍。

10/21/2021, 2:17:45 PM
1656 utilities | x50 runs

none                            8.75 ms /    0.00 ms
unocss       v0.0.0            13.72 ms /    4.97 ms (x1.00)
windicss     v3.1.9           980.41 ms /  971.66 ms (x195.36)
tailwindcss  v3.0.0-alpha.1  1258.54 ms / 1249.79 ms (x251.28)

零依赖和浏览器友好：~6kb min+brotli
配置灵活

// tailwind.config.js
module.exports = {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
      10: '10px' // <-- here
    }
  }
}

// unocss.config.js
export default defineConfig({
    rules: [
      [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
      [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
    ]
})

实用的工具和特性

unocss.dev/presets/

Attributify mode - group utilities in attributes.
Pure CSS Icons - use any icon as a single class.
rem to px - Converts rem to px for all utilities.
Variant Groups - shorthand for group utils with common prefixes.
Compilation mode - synthesizes multiple classes into one at build time.

参考文章：

tailwindcss.com/

unocss.dev/

juejin.cn/post/716196…

juejin.cn/post/691707…