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>
相关推荐
IT_陈寒1 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿1 小时前
react 实现插槽slot功能
前端
stoneship1 小时前
Web项目减少资源加载失败白屏问题
前端
DaMu2 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员2 小时前
一文读懂Font文件
前端
Asort2 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer2 小时前
什么是 React 中的远程组件?
前端·react.js
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑2 小时前
「AI」网站模版,效果如何?
前端·后端·产品