侧边栏壁纸
博主头像
道一博主等级

云在青天水在瓶!

  • 累计撰写 15 篇文章
  • 累计创建 14 个标签
  • 累计收到 0 条评论

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

道一
2021-11-16 / 0 评论 / 4 点赞 / 157 阅读 / 1,231 字
温馨提示:
本文最后更新于 2021-11-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

每次写页面, 你要有样式, 总要用class类来连接dom节点上的class的(如果你非要说:我用标签直接连样式。那我也没办法反驳你)
传统都是在dom上的class写一个类, 然后 咔咔咔在类里面写一大堆css组成一个样式,比如这样:

复制代码使用了基础库后,只需要这样

复制代码好了,一行搞定

如果说dom嵌套的很深,像这样

...
复制代码如果你的产品经理给你个改样式的需求,这一层一层套的厉害,维护很不方便 使用了基础库后,每一个样式都是提前声明好的,只需要组合就可以了,像上面一样,直接在dom的class上组合,避免了dom嵌套的麻烦事

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

assembly-css这个库适用在什么项目上合适? 🤔️

经过我开发的项目来讲,如果html部分的代码超过1000行或者页面多于10个的话,要写的样式不是很变态的布局,我都建议使用。
当然,如果你的需求不考虑这库只有60k的文件大小,碰巧你用上瘾了,那也可以用。
因为在项目达到这个程度以及之上的话,像以前开发方式来讲,css的文件估计也要好几十k了,更甚者几百k,这之中肯定会包含着大量重复的css,所以使用基础库代替后,一次声明,write everywhere。
它的原理就是提前声明好可能用到的基本css,声明成类,然后dom通过class直接引用就好了。
像margin-left: 10px这样的代码,直接在dom class上写

就完事。
大致看了一下文档,如果有复杂的需求怎么办呢? 🤔️

从一开始就声明了assembly-css是应用在基础的样式中去的,如果有复杂的需求,比如说透明背景,渐变背景和复杂的box-shadow,
我是建议都是通过.bg-black-rgba-0_5这样来声明,这样直观一看就知道这个是想表示一个黑色半透明背景的class类
当然,assebly-css整体的设计思想就是这样实现的: 组合样式
说了这么多,来实现一个经典的案例体会一下它的强大吧! 🐂🍺
这是一个三栏布局,直接使用基础库写出来就是这样的,你可以直接把代码复制到一个demo文件里试一下

left
content
right
复制代码看了这么多内容,产生了一些建议和想法? 😄 这里我总结一下,国外其实有一个assembly.css库,这个库是也是通过组合class类形式来写css的,不过是可以组合现成的ui样式的,设计复杂(不如直接用ui框架)。 而这个库是声明了最基础的class类让我们自己去组合想要的样式。 总体来说,设计的方案我觉得是存在一些问题的。比如说如何定义自己的class类,想要重写这个基础库的类,还必须拷贝到自己的项目中去。还有颜色什么的也是在库中声明好的,怎么可以自己配颜色...
0

评论区