关于使用原子类css的优缺点

最新推荐文章于 2024-05-16 19:16:51 发布

AI画手小王

最新推荐文章于 2024-05-16 19:16:51 发布

阅读量823

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_53225741/article/details/128896458

版权

本文探讨了使用原子类CSS的优缺点。优点包括唯一性、复用性、降低命名负担、减少嵌套、方便响应式开发和treeshaking。缺点则涉及记忆负担、蓝湖代码复制问题及复杂样式类名的阅读和维护。尽管存在挑战，但在简单项目和有规范的设计中，原子类CSS能提升效率。对于渲染性能的影响，作者持开放态度。最后，推荐了一本Vue开发技巧的文档。

摘要由CSDN通过智能技术生成

优点

唯一性，更改会更安全

命名唯一，无重复，修改时是修改类，不是修改类的样式，不会影响其他地方

复用性强，项目大小增长曲线趋缓

这样相比似乎只是把css的大小转移到了html，最终可能只是少了几个字节。但是可以推断，当用的越多的时候，少的就越多，所以我说趋缓

<-- 原子类 -->
<template><div class="flex items-center"><div class="flex items-center"></div></div>
</template>
<style> .flex {display: flex;
}
.items-center {align-items: center;
} </style>

<-- BEM写法 -->
<template><div class="card"><div class="card-body"></div></div>
</template>
<style lang="scss"> .card {display: flex;align-items: center;&-body {display: flex;align-items: center;}
} </style>