阅读 2717

忘掉基本的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这个库适用在什么项目上合适? 🤔️


经过我开发的项目来讲,如果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。

如果认为这是一个好的有前景想法,我也非常欢迎你能和我一起规划这个项目的未来👋!

关注下面的标签,发现更多相似文章
评论