V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
retrocode
V2EX  ›  程序员

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

  •  1
     
  •   retrocode · 2021-06-21 19:37:05 +08:00 · 9518 次点击
    这是一个创建于 1255 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    第 1 条附言  ·  2021-06-22 12:31:43 +08:00
    emm css 原子化 /组件化应该不是新词吧,我看有人说不知道这个词∠( ᐛ 」∠)_,难道这个用法不对吗,有人科普下吗
    60 条回复    2021-07-05 17:46:07 +08:00
    mopig
        1
    mopig  
       2021-06-21 19:46:04 +08:00
    > 除了字体大小全部偶数整数化,能 15px 绝对不 16px

    这是写错了🤔
    shpkng
        2
    shpkng  
       2021-06-21 19:47:10 +08:00   ❤️ 1
    妹子走了居然还爽?
    什么公司啊,这么奢侈
    love
        3
    love  
       2021-06-21 19:53:53 +08:00
    的确,15px 比 16px 好看,16 太大了些
    retrocode
        4
    retrocode  
    OP
       2021-06-21 20:13:30 +08:00
    @mopig 大意了 ORZ,大概是这个意思,今天满脑子都是字体大小
    Rache1
        5
    Rache1  
       2021-06-21 20:25:51 +08:00   ❤️ 1
    😒 我司设计,说了好多次,移动端不能小于 12px,但是拿到图还老是有,以前做出来说不对,后面就不解释了,他们也就不提了
    falcon05
        6
    falcon05  
       2021-06-21 20:28:30 +08:00 via iPhone
    不是应该用偶数吗?居中的时候除于 2 得到整数
    fernandoxu
        7
    fernandoxu  
       2021-06-21 20:44:03 +08:00
    原子化是啥?
    henvm
        8
    henvm  
       2021-06-21 21:36:56 +08:00
    @fernandoxu 不需要妹子化
    dk7952638
        9
    dk7952638  
       2021-06-21 22:05:09 +08:00
    tailwind?
    anguiao
        10
    anguiao  
       2021-06-21 22:07:43 +08:00 via Android
    没用以前我嗤之以鼻,用完直呼真香
    Rocketer
        11
    Rocketer  
       2021-06-21 22:43:13 +08:00 via iPhone   ❤️ 2
    我严重怀疑妹子是被你挤兑走的,注孤生!
    slert
        12
    slert  
       2021-06-21 23:19:17 +08:00
    原子化 css 也不知道是前进还是倒退 这样看 html 完全不知道哪个是哪个了吧
    不过不用想名字是真的很爽
    chengxy
        13
    chengxy  
       2021-06-21 23:26:10 +08:00
    @slert #12 假如是 tailwindcss,@apply 还是得想名字。。
    retrocode
        14
    retrocode  
    OP
       2021-06-21 23:32:22 +08:00 via Android
    @slert 不过调样式的话,省的来回切了,我目前的体会是简单的布局挺方便,硬性要求像素级还原的话,组件化更方便些,因为有时候 UI 的设计是真的没有什么全局化的考虑各种数据根本没法规范化
    retrocode
        15
    retrocode  
    OP
       2021-06-21 23:33:18 +08:00 via Android
    @Rocketer 不至于不至于,谁人不喜欢 UI 妹子呢
    retrocode
        16
    retrocode  
    OP
       2021-06-21 23:34:52 +08:00 via Android
    @dk7952638 不是,我参考 tailwind 自己用 scss 搞了一套自用
    QingStone
        17
    QingStone  
       2021-06-21 23:56:17 +08:00 via iPhone
    @retrocode #16 强啊!大佬!能开源吗?😝
    edinina
        18
    edinina  
       2021-06-22 00:55:27 +08:00
    作为 UI 表示对像素值有绝对的强迫症,有时候前端和开发不按规范做就烦躁的很
    Valid
        19
    Valid  
       2021-06-22 00:58:46 +08:00   ❤️ 1
    字体大小能偶数绝不奇数的给我点赞
    wdhwg001
        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 了。
    ccyu220
        21
    ccyu220  
       2021-06-22 07:56:30 +08:00
    原子化又是什么时候出来的新词...
    liuidetmks
        22
    liuidetmks  
       2021-06-22 08:44:02 +08:00
    真会起名,高大上.
    xiangyuecn
        23
    xiangyuecn  
       2021-06-22 09:32:28 +08:00
    怎么写不重要

    重要的是不用写很多个文件,文件一少,就至少简化了 90%代码复杂度

    重要的是不用写很多个文件,文件一少,就至少简化了 90%代码复杂度

    重要的是不用写很多个文件,文件一少,就至少简化了 90%代码复杂度

    书写的就是想要的结果,“所见即所得”
    xiangyuecn
        24
    xiangyuecn  
       2021-06-22 09:33:58 +08:00
    初学者写法:<div style="">

    最优秀写法:<div style="">

    😏😏😏 毫无争议
    anjianshi
        25
    anjianshi  
       2021-06-22 09:45:51 +08:00
    毫无争议.... 争议大大大有好吧,怎么想的把样式直接写标签属性里
    xsytsent
        26
    xsytsent  
       2021-06-22 10:05:29 +08:00
    已经冒死分享链接给我司的 UI 妹子了😝
    Terry05
        27
    Terry05  
       2021-06-22 10:05:59 +08:00   ❤️ 1
    你这重构了,可别是原子弹化
    bthulu
        28
    bthulu  
       2021-06-22 10:21:41 +08:00
    前端绕了一个圈, 最后发现最初的方案就是最好的方案
    JerryCha
        29
    JerryCha  
       2021-06-22 10:23:47 +08:00
    隐约感觉楼主自己跳坑里了
    yuancoder
        30
    yuancoder  
       2021-06-22 10:40:44 +08:00
    没感受到这样做的好处
    3dwelcome
        31
    3dwelcome  
       2021-06-22 11:13:31 +08:00
    @retrocode “不是,我参考 tailwind 自己用 scss 搞了一套自用”

    那么巧,我也是。

    不想集成 tailwind css 一整套,觉得太重,有一大堆没用的东西。

    但又希望能用 tailwind 里一部分精炼的语法,用缩略语写 style,那就只能自己魔改一下了。
    cw2k13as
        32
    cw2k13as  
       2021-06-22 11:30:01 +08:00
    不应该选偶数吗,不同 dpi 方便整除
    cw2k13as
        33
    cw2k13as  
       2021-06-22 11:31:07 +08:00
    @3dwelcome windicss 不错,比 taiwindcss 灵活
    charlie21
        34
    charlie21  
       2021-06-22 11:32:01 +08:00
    tailwind 的寿命能有 jquery 的 1/10 么?大公司根本不让用
    3dwelcome
        35
    3dwelcome  
       2021-06-22 11:33:39 +08:00
    @yuancoder 正统学过 tailwind css 就知道好处了。

    太长的代码很多人看都不想看,只有简短的代码才会有人想去维护,class 太多也是一种负担。
    spider12
        36
    spider12  
       2021-06-22 11:37:29 +08:00   ❤️ 1
    @cw2k13as Facebook 已经完成 tailwind css 改造了
    A388
        37
    A388  
       2021-06-22 11:45:13 +08:00
    @slert 技术不就是这样吗?今天圆角的按钮漂亮,然后换成圆角的,各种吹捧各种好。大家都换圆角。几年后,看眼了又换会直角的按钮,又是各种吹捧。
    retrocode
        38
    retrocode  
    OP
       2021-06-22 12:24:28 +08:00 via Android
    @JerryCha 跳坑不至于,原先的代码,因为 UI 妹子高度自定义,便签嵌套层级太多了,每层一个 class 为了不重复 class 本身也越来越长,也算是解套了
    cyrbuzz
        39
    cyrbuzz  
       2021-06-22 12:46:18 +08:00
    @wdhwg001 给 UI 小姐姐看,UI 小姐姐说,这人有毛病,俺想做什么做什么。哈哈哈哈哈。
    KillPaul
        40
    KillPaul  
       2021-06-22 13:46:16 +08:00
    UI 设计现在也都很讲究组件化规范化的设计思维的,我们小公司感觉是反过来的,我设计的时候都会尽量有统一的规范,但是开发实现感觉依然是我行我素的。
    另外不觉得可以完全抛弃设计师,因为就算是最规范的设计系统,终究还是需要有专业的人来组成和谐的页面的。做设计规范的时候其实老是有被禁锢住的感觉。
    也许答非所问,勿喷 🐶️
    plk403
        41
    plk403  
       2021-06-22 14:21:10 +08:00
    无所谓,能用就行
    cssTheGreatest
        42
    cssTheGreatest  
       2021-06-22 14:29:39 +08:00   ❤️ 1
    感恩合作过的设计师,规范做得专业之余,还主动维护 sass variables 和安卓 styles.xml
    a719031256
        43
    a719031256  
       2021-06-22 14:39:30 +08:00
    一直没明白所谓的原子化是什么鬼,是不是还有质子化,粒子化
    kinge
        44
    kinge  
       2021-06-22 15:07:08 +08:00
    我用了 tailwind 再也回不去了,原子化是趋势
    mars0prince
        45
    mars0prince  
       2021-06-22 15:42:07 +08:00
    妹子:我们公司的前端怎么总是不按我说的做啊,还什么原子化一套一套的,离职了离职了
    retrocode
        46
    retrocode  
    OP
       2021-06-22 16:53:59 +08:00
    @mars0prince 之前还真因为这个吵过,UI 平面设计出身的,经常不怎么考虑开发,单字体大小,一个项目下来,从 16 到 40 可以完美递增下来,一个红色能有好几种红,图片长宽比也是各种俺感觉来,这种是真的头疼,关键她真的就要求像素级还原,错一点,就说最后效果不好跟她没关系.
    huabalance
        47
    huabalance  
       2021-06-22 20:00:47 +08:00
    我不用原子化,妹子哪儿可以领
    dongtingyue
        48
    dongtingyue  
       2021-06-23 09:44:05 +08:00
    我是习惯几种方式结合使用
    [css 命名规则思想 BEM]( https://blog.heybutterfly.com/index.php/home/article/detail.html?id=30)
    cw2k13as
        49
    cw2k13as  
       2021-06-23 09:53:29 +08:00
    @spider12 tailwind 改了还是出了新的库啊
    ryncv
        50
    ryncv  
       2021-06-23 10:31:11 +08:00
    都用原子化的话,有多出复用的地方要改的话怎么办? 一个一个改吗?
    retrocode
        51
    retrocode  
    OP
       2021-06-23 11:01:04 +08:00
    @ryncv 这个跟原子化就没关系了呀,一般情况都是封装组件的直接改就好,跨组件的复用大同小异的样式可以通过 sass 的 @extend 或者 taiwindcss 的 @apply 整合,这样一来还是原先组件化那套了.
    spider12
        52
    spider12  
       2021-06-23 11:18:53 +08:00
    @cw2k13as 没改呀,是 Facebook 用 tailwind css 改造了自己的网站
    crclz
        53
    crclz  
       2021-06-23 16:27:03 +08:00
    作为一名偶尔写前端的后端程序员,刚刚看了下 tailwind,感觉挺不错的。作为一名选择困难症“患者”、css 外行、不擅长设计的程序员,我觉得 tailwind 能够节省很多纠结的实践,快速为我找到最佳 /较好的样式。
    shilianmlxg
        54
    shilianmlxg  
       2021-06-25 16:27:53 +08:00
    大佬 请问现在 移动端 ui 是用什么单位啊 ,发现公司的所有项目都是 vw vh,都是 ui 上的 px 转成 vw 显示
    shilianmlxg
        55
    shilianmlxg  
       2021-06-25 16:34:55 +08:00
    @cw2k13as 请问大佬 windicss tailwindcss 有什么区别吗
    myCupOfTea
        56
    myCupOfTea  
       2021-06-28 10:28:06 +08:00
    不太喜欢 tailwind css
    本来 html 和 css 是分离的,硬变成全写在 html 里,然后还有学习成本
    辅助用用还行
    retrocode
        57
    retrocode  
    OP
       2021-06-28 10:52:37 +08:00
    @shilianmlxg 现在一般都是 rem 和 rpx 居多,默认屏幕宽 750 开发
    shilianmlxg
        58
    shilianmlxg  
       2021-06-30 18:04:02 +08:00
    @retrocode 大佬 比如我 ui 是 750px 宽度,那么 一个盒子 50px * 50px,我 tailwindcss 单独写,还是要自己手动换算呢
    有没有 比如我 p-50 就是 50px 之类的呢
    retrocode
        59
    retrocode  
    OP
       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
        60
    cw2k13as  
       2021-07-05 17:46:07 +08:00
    @shilianmlxg windiCSS 是基于 tailwindcss,前者更强大,具体的你可以看官网
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1332 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 17:43 · PVG 01:43 · LAX 09:43 · JFK 12:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.