没有 UI 妹子的限制,原子化 CSS 的确是爽啊.

2021-06-21 19:37:05 +08:00
 retrocode

UI 妹子离职,我趁机把项目用原子化 CSS 重构了,爽了一大截啊.

把之前硬性要求还原设计图的边距长宽,类似 151px 之流的全部规范化了,除了字体大小全部偶数整数化,能 15px 绝对不 16px.

整合下来单个 vue 文件 class 最多少了两百多行,再也不用想 class 名了.

9603 次点击
所在节点    程序员
60 条回复
plk403
2021-06-22 14:21:10 +08:00
无所谓,能用就行
cssTheGreatest
2021-06-22 14:29:39 +08:00
感恩合作过的设计师,规范做得专业之余,还主动维护 sass variables 和安卓 styles.xml
a719031256
2021-06-22 14:39:30 +08:00
一直没明白所谓的原子化是什么鬼,是不是还有质子化,粒子化
kinge
2021-06-22 15:07:08 +08:00
我用了 tailwind 再也回不去了,原子化是趋势
mars0prince
2021-06-22 15:42:07 +08:00
妹子:我们公司的前端怎么总是不按我说的做啊,还什么原子化一套一套的,离职了离职了
retrocode
2021-06-22 16:53:59 +08:00
@mars0prince 之前还真因为这个吵过,UI 平面设计出身的,经常不怎么考虑开发,单字体大小,一个项目下来,从 16 到 40 可以完美递增下来,一个红色能有好几种红,图片长宽比也是各种俺感觉来,这种是真的头疼,关键她真的就要求像素级还原,错一点,就说最后效果不好跟她没关系.
huabalance
2021-06-22 20:00:47 +08:00
我不用原子化,妹子哪儿可以领
dongtingyue
2021-06-23 09:44:05 +08:00
我是习惯几种方式结合使用
[css 命名规则思想 BEM]( https://blog.heybutterfly.com/index.php/home/article/detail.html?id=30)
cw2k13as
2021-06-23 09:53:29 +08:00
@spider12 tailwind 改了还是出了新的库啊
ryncv
2021-06-23 10:31:11 +08:00
都用原子化的话,有多出复用的地方要改的话怎么办? 一个一个改吗?
retrocode
2021-06-23 11:01:04 +08:00
@ryncv 这个跟原子化就没关系了呀,一般情况都是封装组件的直接改就好,跨组件的复用大同小异的样式可以通过 sass 的 @extend 或者 taiwindcss 的 @apply 整合,这样一来还是原先组件化那套了.
spider12
2021-06-23 11:18:53 +08:00
@cw2k13as 没改呀,是 Facebook 用 tailwind css 改造了自己的网站
crclz
2021-06-23 16:27:03 +08:00
作为一名偶尔写前端的后端程序员,刚刚看了下 tailwind,感觉挺不错的。作为一名选择困难症“患者”、css 外行、不擅长设计的程序员,我觉得 tailwind 能够节省很多纠结的实践,快速为我找到最佳 /较好的样式。
shilianmlxg
2021-06-25 16:27:53 +08:00
大佬 请问现在 移动端 ui 是用什么单位啊 ,发现公司的所有项目都是 vw vh,都是 ui 上的 px 转成 vw 显示
shilianmlxg
2021-06-25 16:34:55 +08:00
@cw2k13as 请问大佬 windicss tailwindcss 有什么区别吗
myCupOfTea
2021-06-28 10:28:06 +08:00
不太喜欢 tailwind css
本来 html 和 css 是分离的,硬变成全写在 html 里,然后还有学习成本
辅助用用还行
retrocode
2021-06-28 10:52:37 +08:00
@shilianmlxg 现在一般都是 rem 和 rpx 居多,默认屏幕宽 750 开发
shilianmlxg
2021-06-30 18:04:02 +08:00
@retrocode 大佬 比如我 ui 是 750px 宽度,那么 一个盒子 50px * 50px,我 tailwindcss 单独写,还是要自己手动换算呢
有没有 比如我 p-50 就是 50px 之类的呢
retrocode
2021-06-30 18:58:21 +08:00
@shilianmlxg tailwind 主要面向的是 PC 端,他默认用的是 rem 和百分比,同时相当一部分内容是为了响应式准备的,改成固定长宽的话,得搞一堆乱七八糟的配置

像 750 这种面向移动端固定尺寸的,我个人觉得没必要上 tailwind,直接参考他的命名方式用 scss 写一个类似的 scss 库就可以了.
https://github.com/ShowMeBaby/tailwind-scss-mixin
这个是我搞的一个 scss 的原子化 css 库,你可以参考下
cw2k13as
2021-07-05 17:46:07 +08:00
@shilianmlxg windiCSS 是基于 tailwindcss,前者更强大,具体的你可以看官网

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/784909

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX