css 颗粒度

1. 行内样式：样式全部写入行内。自由度最高，可定制化最强。但是不方便样式的复用，每次都要写完整的样式。

<div style="background-color: #ffffff; color: #333333;">
    我是一个div
</div>

2. 原子化 CSS：每一个类名都代表了一个 css 属性。自由度依然很强，可定制化依然很高，也方便复用。但是大量的样式会造成大量的类名。

<div class="bg-white text-zinc-800">我是一个div</div>

3. 传统形式：通过一个或几个具有语义化的 class 来描述一段 css 属性。封装性强，语义化强，自由度和可定制化性一般（比如 cart 就标记好了当前为一个卡片，通常边框、弧度、阴影、padding 也都一并规定好了）。但是大量的 html 需要取大量的语义化 class ，并且在 html 和 css 中需要来回的切换、查找。

<div class="container-box desc-container cart">我是一个div</div>

4. 组件形式：在 组件库 中极为常见。封装性极强（不光封装了样式，也封装了功能），语义化强。但是自由度和可定制化性比较差。

<m-cart>我是一个div</m-cart>