Home Sign Up Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
cvooc
V2EX  ›  程序员

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

  •  1      
  •   cvooc ·
    cvooc · Jun 21, 2021 · 10995 views
    This topic created in 1963 days ago, the information mentioned may be changed or developed.

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

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

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

    Supplement 1  ·  Jun 22, 2021
    emm css 原子化 /组件化应该不是新词吧，我看有人说不知道这个词∠( ᐛ 」∠)_，难道这个用法不对吗，有人科普下吗
  • CSS
  • class
  • 原子
  • 边距长
    60 replies  •  2021-07-05 17:46:07 +08:00
    mopig
    mopig
    Jun 21, 2021
    1
    > 除了字体大小全部偶数整数化,能 15px 绝对不 16px

    这是写错了🤔
    shpkng
    shpkng
    Jun 21, 2021❤️1
    2
    妹子走了居然还爽？
    什么公司啊，这么奢侈
    love
    love
    Jun 21, 2021
    3
    的确，15px 比 16px 好看，16 太大了些
    cvooc
    cvooc
    OP
    Jun 21, 2021
    4
    @mopig 大意了 ORZ,大概是这个意思,今天满脑子都是字体大小
    Rache1
    Rache1
    Jun 21, 2021❤️1
    5
    😒 我司设计，说了好多次，移动端不能小于 12px，但是拿到图还老是有，以前做出来说不对，后面就不解释了，他们也就不提了
    GG668v26Fd55CP5W
    GG668v26Fd55CP5W
    Jun 21, 2021 via iPhone
    6
    不是应该用偶数吗？居中的时候除于 2 得到整数
    fernandoxu
    fernandoxu
    Jun 21, 2021
    7
    原子化是啥？
    henvm
    henvm
    Jun 21, 2021
    8
    @fernandoxu 不需要妹子化
    dk7952638
    dk7952638
    Jun 21, 2021
    9
    tailwind?
    anguiao
    anguiao
    Jun 21, 2021 via Android
    10
    没用以前我嗤之以鼻，用完直呼真香
    Rocketer
    Rocketer
    Jun 21, 2021 via iPhone❤️2
    11
    我严重怀疑妹子是被你挤兑走的，注孤生！
    23wEJhKrPYz2uRF5
    23wEJhKrPYz2uRF5
    Jun 21, 2021
    12
    原子化 css 也不知道是前进还是倒退 这样看 html 完全不知道哪个是哪个了吧
    不过不用想名字是真的很爽
    chengxy
    chengxy
    Jun 21, 2021
    13
    @slert #12 假如是 tailwindcss，@apply 还是得想名字。。
    cvooc
    cvooc
    OP
    Jun 21, 2021 via Android
    14
    @slert 不过调样式的话，省的来回切了，我目前的体会是简单的布局挺方便，硬性要求像素级还原的话，组件化更方便些，因为有时候 UI 的设计是真的没有什么全局化的考虑各种数据根本没法规范化
    cvooc
    cvooc
    OP
    Jun 21, 2021 via Android
    15
    @Rocketer 不至于不至于，谁人不喜欢 UI 妹子呢
    cvooc
    cvooc
    OP
    Jun 21, 2021 via Android
    16
    @dk7952638 不是，我参考 tailwind 自己用 scss 搞了一套自用
    QingStone
    QingStone
    Jun 21, 2021 via iPhone
    17
    @retrocode #16 强啊！大佬！能开源吗？😝
    edinina
    edinina
    Jun 22, 2021
    18
    作为 UI 表示对像素值有绝对的强迫症，有时候前端和开发不按规范做就烦躁的很
    Valid
    Valid
    Jun 22, 2021❤️1
    19
    字体大小能偶数绝不奇数的给我点赞
    wdhwg001
    wdhwg001
    Jun 22, 2021 via iPhone❤️20
    20
    你们……真的不知道为啥 UI 都要尽量取 4px 甚至是 8px 的倍数吗？
    因为 4px 的倍数在 125% 150% 175%这种奇葩 DPI 下依然是点对点的，而 8px 的倍数则可以确保大多数桌面比例下不会出问题。
    在没有可靠的 pt 的排版系统里，4 和 8 几乎就是原则了，这其中唯一的例外应该就是字体大小不需要强制 4 和 8 了。
    ccyu220
    ccyu220
    Jun 22, 2021
    21
    原子化又是什么时候出来的新词...
    liuidetmks
    liuidetmks
    Jun 22, 2021
    22
    真会起名,高大上.
    xiangyuecn
    xiangyuecn
    Jun 22, 2021
    23
    怎么写不重要

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

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

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

    书写的就是想要的结果，“所见即所得”
    xiangyuecn
    xiangyuecn
    Jun 22, 2021
    24
    初学者写法：<div style="">

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

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

    那么巧，我也是。

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

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

    太长的代码很多人看都不想看，只有简短的代码才会有人想去维护，class 太多也是一种负担。
    spider12
    spider12
    Jun 22, 2021❤️1
    36
    @cw2k13as Facebook 已经完成 tailwind css 改造了
    A388
    A388
    Jun 22, 2021
    37
    @slert 技术不就是这样吗？今天圆角的按钮漂亮，然后换成圆角的，各种吹捧各种好。大家都换圆角。几年后，看眼了又换会直角的按钮，又是各种吹捧。
    cvooc
    cvooc
    OP
    Jun 22, 2021 via Android
    38
    @JerryCha 跳坑不至于，原先的代码，因为 UI 妹子高度自定义，便签嵌套层级太多了，每层一个 class 为了不重复 class 本身也越来越长，也算是解套了
    cyrbuzz
    cyrbuzz
    PRO
    Jun 22, 2021
    39
    @wdhwg001 给 UI 小姐姐看，UI 小姐姐说，这人有毛病，俺想做什么做什么。哈哈哈哈哈。
    KillPaul
    KillPaul
    Jun 22, 2021
    40
    UI 设计现在也都很讲究组件化规范化的设计思维的，我们小公司感觉是反过来的，我设计的时候都会尽量有统一的规范，但是开发实现感觉依然是我行我素的。
    另外不觉得可以完全抛弃设计师，因为就算是最规范的设计系统，终究还是需要有专业的人来组成和谐的页面的。做设计规范的时候其实老是有被禁锢住的感觉。
    也许答非所问，勿喷 🐶️
    plk403
    plk403
    Jun 22, 2021
    41
    无所谓,能用就行
    cssTheGreatest
    cssTheGreatest
    Jun 22, 2021❤️1
    42
    感恩合作过的设计师，规范做得专业之余，还主动维护 sass variables 和安卓 styles.xml
    a719031256
    a719031256
    Jun 22, 2021
    43
    一直没明白所谓的原子化是什么鬼，是不是还有质子化，粒子化
    kinge
    kinge
    Jun 22, 2021
    44
    我用了 tailwind 再也回不去了，原子化是趋势
    mars0prince
    mars0prince
    Jun 22, 2021
    45
    妹子：我们公司的前端怎么总是不按我说的做啊，还什么原子化一套一套的，离职了离职了
    cvooc
    cvooc
    OP
    Jun 22, 2021
    46
    @mars0prince 之前还真因为这个吵过,UI 平面设计出身的,经常不怎么考虑开发,单字体大小,一个项目下来,从 16 到 40 可以完美递增下来,一个红色能有好几种红,图片长宽比也是各种俺感觉来,这种是真的头疼,关键她真的就要求像素级还原,错一点,就说最后效果不好跟她没关系.
    huabalance
    huabalance
    Jun 22, 2021
    47
    我不用原子化，妹子哪儿可以领
    dongtingyue
    dongtingyue
    Jun 23, 2021
    48
    我是习惯几种方式结合使用
    [css 命名规则思想 BEM]( https://blog.heybutterfly.com/index.php/home/article/detail.html?id=30)
    cw2k13as
    cw2k13as
    Jun 23, 2021
    49
    @spider12 tailwind 改了还是出了新的库啊
    ryncv
    ryncv
    Jun 23, 2021
    50
    都用原子化的话，有多出复用的地方要改的话怎么办？ 一个一个改吗？
    cvooc
    cvooc
    OP
    Jun 23, 2021
    51
    @ryncv 这个跟原子化就没关系了呀,一般情况都是封装组件的直接改就好,跨组件的复用大同小异的样式可以通过 sass 的 @extend 或者 taiwindcss 的 @apply 整合,这样一来还是原先组件化那套了.
    spider12
    spider12
    Jun 23, 2021
    52
    @cw2k13as 没改呀，是 Facebook 用 tailwind css 改造了自己的网站
    crclz
    crclz
    Jun 23, 2021
    53
    作为一名偶尔写前端的后端程序员，刚刚看了下 tailwind，感觉挺不错的。作为一名选择困难症“患者”、css 外行、不擅长设计的程序员，我觉得 tailwind 能够节省很多纠结的实践，快速为我找到最佳 /较好的样式。
    shilianmlxg
    shilianmlxg
    Jun 25, 2021
    54
    大佬 请问现在 移动端 ui 是用什么单位啊 ，发现公司的所有项目都是 vw vh，都是 ui 上的 px 转成 vw 显示
    shilianmlxg
    shilianmlxg
    Jun 25, 2021
    55
    @cw2k13as 请问大佬 windicss tailwindcss 有什么区别吗
    myCupOfTea
    myCupOfTea
    Jun 28, 2021
    56
    不太喜欢 tailwind css
    本来 html 和 css 是分离的,硬变成全写在 html 里,然后还有学习成本
    辅助用用还行
    cvooc
    cvooc
    OP
    Jun 28, 2021
    57
    @shilianmlxg 现在一般都是 rem 和 rpx 居多,默认屏幕宽 750 开发
    shilianmlxg
    shilianmlxg
    Jun 30, 2021
    58
    @retrocode 大佬 比如我 ui 是 750px 宽度，那么 一个盒子 50px * 50px，我 tailwindcss 单独写，还是要自己手动换算呢
    有没有 比如我 p-50 就是 50px 之类的呢
    cvooc
    cvooc
    OP
    Jun 30, 2021
    59
    @shilianmlxg tailwind 主要面向的是 PC 端,他默认用的是 rem 和百分比,同时相当一部分内容是为了响应式准备的,改成固定长宽的话,得搞一堆乱七八糟的配置

    像 750 这种面向移动端固定尺寸的,我个人觉得没必要上 tailwind,直接参考他的命名方式用 scss 写一个类似的 scss 库就可以了.
    https://github.com/ShowMeBaby/tailwind-scss-mixin
    这个是我搞的一个 scss 的原子化 css 库,你可以参考下
    cw2k13as
    cw2k13as
    Jul 5, 2021
    60
    @shilianmlxg windiCSS 是基于 tailwindcss，前者更强大，具体的你可以看官网
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2596 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 92ms · UTC 14:29 · PVG 22:29 · LAX 06:29 · JFK 09:29
    ♥ Do have faith in what you're doing.