- 行内样式:样式全部写入行内。自由度最高,可定制化最强。但是不方便样式的复用,每次都要写完整的样式。
javascript
<div style="background-color: #ffffff; color: #333333;">
我是一个div
</div>
- 原子化 CSS:每一个类名都代表了一个 css 属性。自由度依然很强,可定制化依然很高,也方便复用。但是大量的样式会造成大量的类名。
javascript
<div class="bg-white text-zinc-800">我是一个div</div>
- 传统形式:通过一个或几个具有语义化的 class 来描述一段 css 属性。封装性强,语义化强,自由度和可定制化性一般(比如 cart 就标记好了当前为一个卡片,通常边框、弧度、阴影、padding 也都一并规定好了)。但是大量的 html 需要取大量的语义化 class ,并且在 html 和 css 中需要来回的切换、查找。
javascript
<div class="container-box desc-container cart">我是一个div</div>
- 组件形式:在 组件库 中极为常见。封装性极强(不光封装了样式,也封装了功能),语义化强。但是自由度和可定制化性比较差。
javascript
<m-cart>我是一个div</m-cart>