开发了这么久的项目，每天重复的 margin , padding , background 重复了一遍又一遍， 自从使用了基础样式库 assembly-css后(下面统一称为基础库)，几乎可以完全的避免了一遍一遍的基础样式。
说下好处✨
每次写页面, 你要有样式， 总要用class类来连接dom节点上的class的(如果你非要说:我用标签直接连样式。那我也没办法反驳你) 传统都是在dom上的class写一个类， 然后 咔咔咔在类里面写一大堆css组成一个样式，比如这样:
<div class="content"></div>
<style>
.content {
width: 100px;
font-size: 16px;
display: flex;
justify-content: space-around;
}
</style>
使用了基础库后，只需要这样
<div class="w-100 fs-16 flex j-around"></div>
好了，一行搞定
如果说dom嵌套的很深，像这样
<div class="main">
<div class="content">
<div classs="title">...</div>
</div>
</div>
如果你的产品经理给你个改样式的需求，这一层一层套的厉害，维护很不方便
使用了基础库后，每一个样式都是提前声明好的，只需要组合就可以了，像上面一样，直接在dom的class上组合，避免了dom嵌套的麻烦事
更多的好处嘛，我想你用下这个库做一两个项目后就会体会到了，到时候就会发现想戒也戒不掉了。
不信回来打我
assembly-css这个库适用在什么项目上合适？ 🤔️
经过我开发的项目来讲，如果html部分的代码超过1000行或者页面多于10个的话，要写的样式不是很变态的布局，我都建议使用。
当然，如果你的需求不考虑这库只有60k的文件大小，碰巧你用上瘾了，那也可以用。
因为在项目达到这个程度以及之上的话，像以前开发方式来讲，css的文件估计也要好几十k了，更甚者几百k，这之中肯定会包含着大量重复的css，所以使用基础库代替后，一次声明，write everywhere。
它的原理就是提前声明好可能用到的基本css，声明成类，然后dom通过class直接引用就好了。
像margin-left: 10px这样的代码，直接在dom class上写 <div class="m-l-10"></div>就完事。
大致看了一下文档，如果有复杂的需求怎么办呢？ 🤔️
从一开始就声明了assembly-css是应用在基础的样式中去的，如果有复杂的需求，比如说透明背景，渐变背景和复杂的box-shadow， 我是建议都是通过.bg-black-rgba-0_5这样来声明，这样直观一看就知道这个是想表示一个黑色半透明背景的class类
当然，assebly-css整体的设计思想就是这样实现的: 组合样式
说了这么多，来实现一个经典的案例体会一下它的强大吧！ 🐂🍺
这是一个三栏布局，直接使用基础库写出来就是这样的，你可以直接把代码复制到一个demo文件里试一下
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/assembly-css/dist/assembly-css.css">
<section class="flex j-between">
<div class="w-200 bg-green">left</div>
<div class="flex-1 bg-blue">content</div>
<div class="w-200 bg-green">right</div>
</section>
看了这么多内容，产生了一些建议和想法？ 😄
这里我总结一下，国外其实有一个assembly.css库，这个库是也是通过组合class类形式来写css的，不过是可以组合现成的ui样式的，设计复杂（不如直接用ui框架）。
而这个库是声明了最基础的class类让我们自己去组合想要的样式。
总体来说，设计的方案我觉得是存在一些问题的。比如说如何定义自己的class类，想要重写这个基础库的类，还必须拷贝到自己的项目中去。还有颜色什么的也是在库中声明好的，怎么可以自己配颜色...
作者：Entity
链接：https://juejin.cn/post/6844903965746790413
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
随时随地看视频
