css 颗粒度

  1. 行内样式:样式全部写入行内。自由度最高,可定制化最强。但是不方便样式的复用,每次都要写完整的样式。
javascript 复制代码
<div style="background-color: #ffffff; color: #333333;">
    我是一个div
</div>
  1. 原子化 CSS:每一个类名都代表了一个 css 属性。自由度依然很强,可定制化依然很高,也方便复用。但是大量的样式会造成大量的类名。
javascript 复制代码
<div class="bg-white text-zinc-800">我是一个div</div>
  1. 传统形式:通过一个或几个具有语义化的 class 来描述一段 css 属性。封装性强,语义化强,自由度和可定制化性一般(比如 cart 就标记好了当前为一个卡片,通常边框、弧度、阴影、padding 也都一并规定好了)。但是大量的 html 需要取大量的语义化 class ,并且在 html 和 css 中需要来回的切换、查找。
javascript 复制代码
<div class="container-box desc-container cart">我是一个div</div>
  1. 组件形式:在 组件库 中极为常见。封装性极强(不光封装了样式,也封装了功能),语义化强。但是自由度和可定制化性比较差。
javascript 复制代码
<m-cart>我是一个div</m-cart>
相关推荐
群联云防护小杜38 分钟前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1232 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜052 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界2 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku2 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员2 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句2 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿2 小时前
Web第二次笔记
前端·javascript
良辰未晚2 小时前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas
Dream耀2 小时前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript