忘掉基本的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>
复制代码

好了，一行搞定

2. 若是说dom嵌套的很深，像这样

<div class="main">
    <div class="content">
        <div classs="title">...</div>
    </div>
</div>
复制代码

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

使用了基础库后，每个样式都是提早声明好的，只须要组合就能够了，像上面同样，直接在dom的class上组合，避免了dom嵌套的麻烦事

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

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类，想要重写这个基础库的类，还必须拷贝到本身的项目中去。还有颜色什么的也是在库中声明好的，怎么能够本身配颜色...

写在最后 🤩

安利了这么多，若是你有好的想法，我很是欢迎你能来提issues，或者直接pr。

若是认为这是一个好的有前景想法，我也很是欢迎你能和我一块儿规划这个项目的将来👋！