没有 UI 妹子的限制,原子化 CSS 的确是爽啊.
retrocode · ShowMeBaby · 2021-06-21 19:37:05 +08:00 · 9559 次点击这是一个创建于 1286 天前的主题，其中的信息可能已经有所发展或是发生改变。
UI 妹子离职,我趁机把项目用原子化 CSS 重构了,爽了一大截啊.
把之前硬性要求还原设计图的边距长宽,类似 151px 之流的全部规范化了,除了字体大小全部偶数整数化,能 15px 绝对不 16px.
整合下来单个 vue 文件 class 最多少了两百多行,再也不用想 class 名了.
第 1 条附言 · 2021-06-22 12:31:43 +08:00
emm css 原子化 /组件化应该不是新词吧，我看有人说不知道这个词∠( ᐛ 」∠)_，难道这个用法不对吗，有人科普下吗
 |
1
mopig 2021-06-21 19:46:04 +08:00
> 除了字体大小全部偶数整数化,能 15px 绝对不 16px
这是写错了🤔 |
 |
2
shpkng 2021-06-21 19:47:10 +08:00  1
妹子走了居然还爽？
什么公司啊，这么奢侈 |
 |
3
love 2021-06-21 19:53:53 +08:00
的确，15px 比 16px 好看，16 太大了些
|
 |
5
Rache1 2021-06-21 20:25:51 +08:00 1
😒 我司设计，说了好多次，移动端不能小于 12px，但是拿到图还老是有，以前做出来说不对，后面就不解释了，他们也就不提了
|
 |
6
falcon05 2021-06-21 20:28:30 +08:00 via iPhone
不是应该用偶数吗？居中的时候除于 2 得到整数
|
 |
7
fernandoxu 2021-06-21 20:44:03 +08:00
原子化是啥？
|
 |
8
henvm 2021-06-21 21:36:56 +08:00
@fernandoxu 不需要妹子化
|
 |
9
dk7952638 2021-06-21 22:05:09 +08:00
tailwind?
|
 |
10
anguiao 2021-06-21 22:07:43 +08:00 via Android
没用以前我嗤之以鼻，用完直呼真香
|
 |
11
Rocketer 2021-06-21 22:43:13 +08:00 via iPhone 2
我严重怀疑妹子是被你挤兑走的，注孤生！
|
 |
12
slert 2021-06-21 23:19:17 +08:00
原子化 css 也不知道是前进还是倒退 这样看 html 完全不知道哪个是哪个了吧
不过不用想名字是真的很爽 |
 |
14
retrocode OP @slert 不过调样式的话，省的来回切了，我目前的体会是简单的布局挺方便，硬性要求像素级还原的话，组件化更方便些，因为有时候 UI 的设计是真的没有什么全局化的考虑各种数据根本没法规范化
|
 |
18
edinina 2021-06-22 00:55:27 +08:00
作为 UI 表示对像素值有绝对的强迫症，有时候前端和开发不按规范做就烦躁的很
|
 |
19
Valid 2021-06-22 00:58:46 +08:00 1
字体大小能偶数绝不奇数的给我点赞
|
 |
20
wdhwg001 2021-06-22 05:50:29 +08:00 via iPhone 20
你们……真的不知道为啥 UI 都要尽量取 4px 甚至是 8px 的倍数吗？
因为 4px 的倍数在 125% 150% 175%这种奇葩 DPI 下依然是点对点的，而 8px 的倍数则可以确保大多数桌面比例下不会出问题。 在没有可靠的 pt 的排版系统里，4 和 8 几乎就是原则了，这其中唯一的例外应该就是字体大小不需要强制 4 和 8 了。 |
 |
21
ccyu220 2021-06-22 07:56:30 +08:00
原子化又是什么时候出来的新词...
|
 |
22
liuidetmks 2021-06-22 08:44:02 +08:00
真会起名,高大上.
|
 |
23
xiangyuecn 2021-06-22 09:32:28 +08:00
怎么写不重要
重要的是不用写很多个文件，文件一少，就至少简化了 90%代码复杂度 重要的是不用写很多个文件，文件一少，就至少简化了 90%代码复杂度 重要的是不用写很多个文件，文件一少，就至少简化了 90%代码复杂度 书写的就是想要的结果，“所见即所得” |
|
24
xiangyuecn 2021-06-22 09:33:58 +08:00
初学者写法：<div style="">
最优秀写法：<div style=""> 😏😏😏 毫无争议 |
 |
25
anjianshi 2021-06-22 09:45:51 +08:00
毫无争议.... 争议大大大有好吧，怎么想的把样式直接写标签属性里
|
 |
26
xsytsent 2021-06-22 10:05:29 +08:00
已经冒死分享链接给我司的 UI 妹子了😝
|
 |
27
Terry05 2021-06-22 10:05:59 +08:00 1
你这重构了，可别是原子弹化
|
 |
28
bthulu 2021-06-22 10:21:41 +08:00
前端绕了一个圈, 最后发现最初的方案就是最好的方案
|
 |
29
JerryCha 2021-06-22 10:23:47 +08:00
隐约感觉楼主自己跳坑里了
|
 |
30
yuancoder 2021-06-22 10:40:44 +08:00
没感受到这样做的好处
|
 |
31
3dwelcome 2021-06-22 11:13:31 +08:00
@retrocode “不是，我参考 tailwind 自己用 scss 搞了一套自用”
那么巧，我也是。 不想集成 tailwind css 一整套，觉得太重，有一大堆没用的东西。 但又希望能用 tailwind 里一部分精炼的语法，用缩略语写 style，那就只能自己魔改一下了。 |
 |
32
cw2k13as 2021-06-22 11:30:01 +08:00
不应该选偶数吗，不同 dpi 方便整除
|
 |
34
charlie21 2021-06-22 11:32:01 +08:00
tailwind 的寿命能有 jquery 的 1/10 么？大公司根本不让用
|
|
35
3dwelcome 2021-06-22 11:33:39 +08:00
|
 |
37
A388 2021-06-22 11:45:13 +08:00
@slert 技术不就是这样吗？今天圆角的按钮漂亮，然后换成圆角的，各种吹捧各种好。大家都换圆角。几年后，看眼了又换会直角的按钮，又是各种吹捧。
|
|
38
retrocode OP @JerryCha 跳坑不至于，原先的代码，因为 UI 妹子高度自定义，便签嵌套层级太多了，每层一个 class 为了不重复 class 本身也越来越长，也算是解套了
|
 |
40
KillPaul 2021-06-22 13:46:16 +08:00
UI 设计现在也都很讲究组件化规范化的设计思维的，我们小公司感觉是反过来的，我设计的时候都会尽量有统一的规范，但是开发实现感觉依然是我行我素的。
另外不觉得可以完全抛弃设计师，因为就算是最规范的设计系统，终究还是需要有专业的人来组成和谐的页面的。做设计规范的时候其实老是有被禁锢住的感觉。 也许答非所问，勿喷 🐶️ |
 |
41
plk403 2021-06-22 14:21:10 +08:00
无所谓,能用就行
|
 |
42
cssTheGreatest 2021-06-22 14:29:39 +08:00 1
感恩合作过的设计师，规范做得专业之余，还主动维护 sass variables 和安卓 styles.xml
|
 |
43
a719031256 2021-06-22 14:39:30 +08:00
一直没明白所谓的原子化是什么鬼，是不是还有质子化，粒子化
|
 |
44
kinge 2021-06-22 15:07:08 +08:00
我用了 tailwind 再也回不去了，原子化是趋势
|
 |
45
mars0prince 2021-06-22 15:42:07 +08:00
妹子：我们公司的前端怎么总是不按我说的做啊，还什么原子化一套一套的，离职了离职了
|
|
46
retrocode OP @mars0prince 之前还真因为这个吵过,UI 平面设计出身的,经常不怎么考虑开发,单字体大小,一个项目下来,从 16 到 40 可以完美递增下来,一个红色能有好几种红,图片长宽比也是各种俺感觉来,这种是真的头疼,关键她真的就要求像素级还原,错一点,就说最后效果不好跟她没关系.
|
 |
47
huabalance 2021-06-22 20:00:47 +08:00
我不用原子化，妹子哪儿可以领
|
 |
48
dongtingyue 2021-06-23 09:44:05 +08:00
我是习惯几种方式结合使用
[css 命名规则思想 BEM]( https://blog.heybutterfly.com/index.php/home/article/detail.html?id=30) |
 |
50
ryncv 2021-06-23 10:31:11 +08:00
都用原子化的话，有多出复用的地方要改的话怎么办？ 一个一个改吗？
|
|
51
retrocode OP |
 |
53
crclz 2021-06-23 16:27:03 +08:00
作为一名偶尔写前端的后端程序员，刚刚看了下 tailwind，感觉挺不错的。作为一名选择困难症“患者”、css 外行、不擅长设计的程序员，我觉得 tailwind 能够节省很多纠结的实践，快速为我找到最佳 /较好的样式。
|
 |
54
shilianmlxg 2021-06-25 16:27:53 +08:00
大佬 请问现在 移动端 ui 是用什么单位啊 ，发现公司的所有项目都是 vw vh，都是 ui 上的 px 转成 vw 显示
|
|
55
shilianmlxg 2021-06-25 16:34:55 +08:00
@cw2k13as 请问大佬 windicss tailwindcss 有什么区别吗
|
 |
56
myCupOfTea 2021-06-28 10:28:06 +08:00
不太喜欢 tailwind css
本来 html 和 css 是分离的,硬变成全写在 html 里,然后还有学习成本 辅助用用还行 |
|
57
retrocode OP @shilianmlxg 现在一般都是 rem 和 rpx 居多,默认屏幕宽 750 开发
|
|
58
shilianmlxg 2021-06-30 18:04:02 +08:00
@retrocode 大佬 比如我 ui 是 750px 宽度，那么 一个盒子 50px * 50px，我 tailwindcss 单独写，还是要自己手动换算呢
有没有 比如我 p-50 就是 50px 之类的呢 |
|
59
retrocode OP @shilianmlxg tailwind 主要面向的是 PC 端,他默认用的是 rem 和百分比,同时相当一部分内容是为了响应式准备的,改成固定长宽的话,得搞一堆乱七八糟的配置
像 750 这种面向移动端固定尺寸的,我个人觉得没必要上 tailwind,直接参考他的命名方式用 scss 写一个类似的 scss 库就可以了. https://github.com/ShowMeBaby/tailwind-scss-mixin 这个是我搞的一个 scss 的原子化 css 库,你可以参考下 |
|
60
cw2k13as 2021-07-05 17:46:07 +08:00
@shilianmlxg windiCSS 是基于 tailwindcss，前者更强大，具体的你可以看官网
|
Select Language