忘掉基本的css, 使用全新的库替代

开发了这么久的项目，每天重复的 margin , padding , background 重复了一遍又一遍， 自从使用了基础样式库 assembly-css后(下面统一称为基础库)，几乎可以完全的避免了一遍一遍的基础样式。

说下好处✨

1. 每次写页面, 你要有样式， 总要用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>

好了，一行搞定

1. 如果说dom嵌套的很深，像这样

<div class="main">

    <div class="content">

        <div classs="title">...</div>

    </div>

</div>

如果你的产品经理给你个改样式的需求，这一层一层套的厉害，维护很不方便

使用了基础库后，每一个样式都是提前声明好的，只需要组合就可以了，像上面一样，直接在dom的class上组合，避免了dom嵌套的麻烦事

1. 更多的好处嘛，我想你用下这个库做一两个项目后就会体会到了，到时候就会发现想戒也戒不掉了。不信回来打我

assembly-css这个库适用在什么项目上合适？ &#129300;️

经过我开发的项目来讲，如果html部分的代码超过1000行或者页面多于10个的话，要写的样式不是很变态的布局，我都建议使用。

当然，如果你的需求不考虑这库只有60k的文件大小，碰巧你用上瘾了，那也可以用。

因为在项目达到这个程度以及之上的话，像以前开发方式来讲，css的文件估计也要好几十k了，更甚者几百k，这之中肯定会包含着大量重复的css，所以使用基础库代替后，一次声明，write everywhere。

它的原理就是提前声明好可能用到的基本css，声明成类，然后dom通过class直接引用就好了。

像margin-left: 10px这样的代码，直接在dom class上写 <div class="m-l-10"></div>就完事。

大致看了一下文档，如果有复杂的需求怎么办呢？ &#129300;️

从一开始就声明了assembly-css是应用在基础的样式中去的，如果有复杂的需求，比如说透明背景，渐变背景和复杂的box-shadow， 我是建议都是通过.bg-black-rgba-0_5这样来声明，这样直观一看就知道这个是想表示一个黑色半透明背景的class类

当然，assebly-css整体的设计思想就是这样实现的: 组合样式

说了这么多，来实现一个经典的案例体会一下它的强大吧！ &#128002;&#127866;

这是一个三栏布局，直接使用基础库写出来就是这样的，你可以直接把代码复制到一个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>

看了这么多内容，产生了一些建议和想法？ &#128516;

这里我总结一下，国外其实有一个assembly.css库，这个库是也是通过组合class类形式来写css的，不过是可以组合现成的ui样式的，设计复杂（不如直接用ui框架）。

而这个库是声明了最基础的class类让我们自己去组合想要的样式。

总体来说，设计的方案我觉得是存在一些问题的。比如说如何定义自己的class类，想要重写这个基础库的类，还必须拷贝到自己的项目中去。还有颜色什么的也是在库中声明好的，怎么可以自己配颜色...

作者：Entity
链接：https://juejin.cn/post/6844903965746790413
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。