已挂勿念...公司的前端和设计是这样写代码的... - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
aivier
V2EX    程序员

已挂勿念...公司的前端和设计是这样写代码的...

  •  8
     
  •   aivier 2016-01-13 11:45:07 +08:00 14491 次点击
    这是一个创建于 3568 天前的主题,其中的信息可能已经有所发展或是发生改变。

    截图

    没有力气多说了 - - , 欢迎大家围观截图...

    公司的其他前端说不知道什么是 less ,说 less 用起来麻烦、 CSS 写一行最好看,多行太丑...
    于是每次改其他人的代码都会累到想死的心都有了...还被人吐槽慢 T_T

    换成.NET 或是 JS 的写法,上面的相当于:

    System.FileSystem.Files.Directory.SmallAction.Rename.WithoutExtensionName.DoThisAction("FileName");


    this.document.elements.block.actions.readAction.getElementById('foobar').attribute('foo')

    120 条回复    2016-01-20 18:38:15 +08:00
    1  2  
    Mcatt
        1
    Mcatt  
       2016-01-13 11:53:23 +08:00
    我天。。。
    zhpech
        2
    zhpech  
       2016-01-13 11:54:52 +08:00   2
    自带的压缩技能牛逼……他们怎么改代码的
    jjplay
        3
    jjplay  
       2016-01-13 11:56:05 +08:00
    我已窒息
    Pastsong
        4
    Pastsong  
       2016-01-13 11:56:13 +08:00 via iPad
    他们写 JS 是不是自带混淆的
    yrdr
        5
    yrdr  
       2016-01-13 11:57:41 +08:00
    我也喜欢一行,也懒得用 less 、 sass ,不过这一行太长了
    doublleft
        6
    doublleft  
       2016-01-13 12:00:04 +08:00
    看起来复用性这一技能掌握的很好啊哈哈哈哈哈哈哈哈哈
    aivier
        7
    aivier  
    OP
       2016-01-13 12:03:53 +08:00
    @zhpech 就这样改的...对于他们的查找和理解技能只能膜拜了

    @Pastsong 还好还好,各种缺分号,缩进和变量名莫名其妙而已

    @yrdr 结构复杂,又想不出那么多类名的话,感觉用 less 写起来很方便,也容易理解

    @doublleft 满屏都是“复用”...
    zhpech
        8
    zhpech  
       2016-01-13 12:06:52 +08:00
    @aivier 我也觉得 Less/Scss 的结构清晰,而且功能也强大,除非超小型的东西,否则找不出不用的理由=_=我只能说,他们的人脑格式处理能力太强了,佩服。
    cpylua
        9
    cpylua  
       2016-01-13 12:09:41 +08:00 via iPhone
    我就见过公司以前的外包写这样的代码,当时就被雷到了
    nealfeng
        10
    nealfeng  
       2016-01-13 12:12:22 +08:00   1
    自带保护自己饭碗功能,好评....
    boro
        11
    boro  
       2016-01-13 12:14:54 +08:00 via iPhone
    这不是手写,一次性导出?
    aitaii
        12
    aitaii  
       2016-01-13 12:24:50 +08:00
    @nealfeng 精辟 哈哈
    kisnows
        13
    kisnows  
       2016-01-13 12:27:33 +08:00
    强大。
    只能说强大。
    aivier
        14
    aivier  
    OP
       2016-01-13 12:28:06 +08:00
    @boro 亲眼所见...手写的...
    learnshare
        15
    learnshare  
       2016-01-13 12:29:08 +08:00
    要尊重人家的技术修养
    NemoAlex
        16
    NemoAlex  
       2016-01-13 12:35:11 +08:00
    刚想说这么写其实问题不大,结构还是挺清晰的。
    突然看到选择器里有逗号...
    有逗号!
    有逗号!

    崩溃了
    zeuss
        17
    zeuss  
       2016-01-13 12:41:21 +08:00
    @zhpech 自带压缩技能 - -
    hahasong
        18
    hahasong  
       2016-01-13 12:42:27 +08:00
    大神换工作了?
    think2011
        19
    think2011  
       2016-01-13 12:43:57 +08:00
    肯定用的是超长超宽超长超宽的显示器!!
    itommy
        20
    itommy  
       2016-01-13 12:47:26 +08:00
    "自带的压缩技能" 戳中笑点 @zhpech
    atan
        21
    atan  
       2016-01-13 13:06:22 +08:00
    太牛了,居然一屏看不到大括号
    gongpeione
        22
    gongpeione  
       2016-01-13 13:21:11 +08:00
    我天。。。。一定是用的超宽的显示器!
    tangbao
        23
    tangbao  
       2016-01-13 13:21:23 +08:00
    我上学期有个老师也是这么写的- -
    viko16
        24
    viko16  
       2016-01-13 13:23:58 +08:00
    自带命名空间
    subpo
        25
    subpo  
    PRO
       2016-01-13 13:27:47 +08:00
    @NemoAlex 有逗号咋了...
    loading
        26
    loading  
       2016-01-13 13:28:58 +08:00 via Android
    选择器用得不错…这是浏览器复制过来的吧…
    xbb7766
        27
    xbb7766  
       2016-01-13 13:32:24 +08:00
    眼花了………………
    自带代码加扰防盗版
    dbfox
        28
    dbfox  
       2016-01-13 13:35:09 +08:00
    visual studio

    ctrl+k+d 自动格式化代码 ,推荐使用
    sneezry
        29
    sneezry  
       2016-01-13 13:35:46 +08:00
    我在想,如果你们前端知道 css 的 selector 是从右向左匹配的,可能就不会这么搞了吧~这不仅是要累死开发者,同时也要累死浏览器啊~
    zhouyg
        30
    zhouyg  
       2016-01-13 13:37:53 +08:00
    你们的设计也很牛掰啊
    jarlyyn
        31
    jarlyyn  
       2016-01-13 13:42:13 +08:00
    看下来也就逗号没有换行啊……
    Tink
        32
    Tink  
    PRO
       2016-01-13 13:45:01 +08:00 via iPhone
    天才
    itbeihe
        33
    itbeihe  
       2016-01-13 13:45:18 +08:00
    我天,我相信他们给你的代码一定是格式化后的,这种选择器长度如果是 less 或 sass 生成的我还相信,手写的话,太疯狂了。
    MiguelValentine
        34
    MiguelValentine  
       2016-01-13 13:48:31 +08:00
    自带混淆+ 1 哈哈哈哈
    ooTwToo
        35
    ooTwToo  
       2016-01-13 13:55:47 +08:00
    6666
    Niphor
        36
    Niphor  
       2016-01-13 14:05:59 +08:00
    之前公司的也这么写

    已经固化,你没法改变(除非你是上司,人家又不想走)
    xuhaoyangx
        37
    xuhaoyangx  
       2016-01-13 14:10:10 +08:00
    因为很多学校是这么教的。
    从来不会换行

    也遇到这种人,每次看他们的 css 我都得自己来吃手动格式化
    songpengf117
        38
    songpengf117  
       2016-01-13 14:12:34 +08:00
    貌似淘宝店铺的样式代码
    daysv
        39
    daysv  
       2016-01-13 14:30:33 +08:00
    人肉压缩机
    flyshu
        40
    flyshu  
       2016-01-13 14:46:14 +08:00
    微微一笑,我这儿的 css 是这样的
    item1{width:100%}
    item2{width:50%}
    ....
    item10{width:10%}
    cst4you
        41
    cst4you  
       2016-01-13 14:49:23 +08:00
    都是被 Discuz 带坏的.
    yhxx
        42
    yhxx  
       2016-01-13 14:53:24 +08:00
    这应该不是他们手写的吧。。。
    感觉是编译之后的啊
    yimity
        43
    yimity  
       2016-01-13 14:59:02 +08:00
    这应该是 Dreamweaver 生成的,然后他们改改吧?或者是以前用 DW 习惯了。
    pangnate
        44
    pangnate  
       2016-01-13 15:35:46 +08:00
    逗号没什么,格式化一下其实也还好。话说回来为什么需要你来改前端的 css 文件?
    LEFT
        45
    LEFT  
       2016-01-13 15:47:25 +08:00
    @yrdr 长因为这命名有先天优势呀
    yongd
        46
    yongd  
       2016-01-13 16:19:27 +08:00
    这个是淘宝和天猫店铺搜索列表模块的样式代码,是编译后的,但也不排除你们的前端直接把代码搬过来进行二次开发的。
    adoyle
        47
    adoyle  
       2016-01-13 16:23:07 +08:00
    目测是生成好的,然后接手的人不知道源文件的存在,直接在编译后的 .css 继续改下去的...
    不得不说,耐心真好。
    lwbjing
        48
    lwbjing  
       2016-01-13 16:27:22 +08:00
    哦,我的天。。。
    ZHenJ
        49
    ZHenJ  
       2016-01-13 16:58:02 +08:00
    看到我左眼和有眼都分开不同方向了
    yzlren
        50
    yzlren  
       2016-01-13 17:04:12 +08:00
    他的勇气来自哪里
    n6DD1A640
        51
    n6DD1A640  
       2016-01-13 17:06:16 +08:00
    自带 gzip 。。。
    s0f
        52
    s0f  
       2016-01-13 17:10:56 +08:00
    我擦。。
    zonghua
        53
    zonghua  
       2016-01-13 17:15:07 +08:00
    这技能不错
    Andy1999
        54
    Andy1999  
       2016-01-13 17:18:16 +08:00 via iPhone
    dw 生成的吧
    Chrome 有插件可以格式化 CSS JS
    tobeyouth
        55
    tobeyouth  
       2016-01-13 17:20:29 +08:00
    跟我刚毕业时第一家公司的风格很像...
    nijux
        56
    nijux  
       2016-01-13 17:24:29 +08:00
    mufeng
        57
    mufeng  
       2016-01-13 17:29:05 +08:00
    nanguo
        58
    nanguo  
       2016-01-13 17:35:43 +08:00
    生成后改的吧,不过看的习惯就没啥了,各有各习惯,不过还是要往 less 这方面发展的
    LioMore
        59
    LioMore  
       2016-01-13 17:46:28 +08:00
    这看感觉就是在看家谱,伦理关系写得一清二楚,并没什么卵用
    LINAICAI
        60
    LINAICAI  
       2016-01-13 17:56:59 +08:00
    卧槽,你确定这不是压缩的?
    allce231
        61
    allce231  
       2016-01-13 18:00:17 +08:00
    @NemoAlex 有逗号不是很正常 ?
    aivier
        62
    aivier  
    OP
       2016-01-13 18:03:02 +08:00
    @dbfox 在用 WebStorm

    @itbeihe 如楼上所说,从 F12 复制,然后剩下的手动在编辑器里复制

    @songpengf117 是淘宝模板

    @yhxx 亲眼所见是手写...

    @yimity 他们说....多行的写法是给初学者看的→_→当时就凌乱了

    @pangnate 我也是前端...

    @yongd 是设计直接从浏览器里复制粘贴写了一半的让我继续写

    @adoyle 浏览器里复制的

    @Andy1999 浏览器复制的, WS 也可以,但是改起来还是很麻烦
    aivier
        63
    aivier  
    OP
       2016-01-13 18:05:33 +08:00
    @nanguo 写的人不知道这东西是自动生成的

    @yongd 直接新建的是空的,然后...设计和另一个前端直接在浏览器里复制,越改越乱,然后就扔给我了...

    @flyshu 下班之前临时加了个任务,说是急,我就是这么写的→_→
    evakiss
        64
    evakiss  
       2016-01-13 18:07:56 +08:00
    浏览器 css 解析器三条黑线
    ivenlee
        65
    ivenlee  
       2016-01-13 18:12:55 +08:00   2
    怪不得屏幕越做越宽啦。
    如果是为了节约字节的话,请告诉她们有压缩工具。
    如果这是性取向问题,那么就随便吧。毕竟这只是不同的取向问题。
    jarlyyn
        66
    jarlyyn  
       2016-01-13 18:15:41 +08:00
    @aivier

    替换,把','替换为 ',\r\n'不久好了
    aivier
        67
    aivier  
    OP
       2016-01-13 18:20:59 +08:00
    @ivenlee 是“他们”,我们公司还是妹子写的代码好看...

    @jarlyyn 选择器太复杂,冲突太多,改起来心塞
    jarlyyn
        68
    jarlyyn  
       2016-01-13 18:22:14 +08:00
    @aivier

    选择器肯定是越长越容易改好不……

    不行么就 chrome 审查元素直接改。
    aivier
        69
    aivier  
    OP
       2016-01-13 18:24:30 +08:00
    @jarlyyn
    拿到手的时候会惊喜的发现好多重复的,语法错误,甚至手动修改后选择器把某个地方的样式应用到全局
    tcdw
        70
    tcdw  
       2016-01-13 18:31:47 +08:00 via Android
    我猜是人家看到别人的网站有这种风格的代码
    认为这本来就是这样写出来的
    而不是机器处理的
    theJian
        71
    theJian  
       2016-01-13 18:40:07 +08:00
    来来来,和我司前端 PK 一下
    cdxem713
        72
    cdxem713  
       2016-01-13 18:41:43 +08:00 via iPhone
    和我一起的前端就是这种奇葩,然后我就不让他写 css 了
    kn007
        73
    kn007  
       2016-01-13 18:45:11 +08:00
    亏写得出来。。。
    nareix
        74
    nareix  
       2016-01-13 18:45:24 +08:00
    给他们安利下 stylus ,保证用一次就不想再这样写了
    ljy2010a
        75
    ljy2010a  
       2016-01-13 20:12:45 +08:00
    好像格式化一下
    ilaipi
        76
    ilaipi  
       2016-01-13 20:23:14 +08:00
    @dbfox 卧槽,这快捷键要两只手一起按??
    Jaylee
        77
    Jaylee  
       2016-01-13 20:37:43 +08:00
    这个代码看着像是 scss 编译后生成的。
    wy315700
        78
    wy315700  
       2016-01-13 20:39:23 +08:00
    为了 KPI ,,,
    msg7086
        79
    msg7086  
       2016-01-13 21:32:54 +08:00
    @ilaipi 可以 (Ctrl-K)(Ctrl-D) 的吧。
    rupert
        80
    rupert  
       2016-01-13 21:45:22 +08:00 via iPhone
    Less 还没出来之前我也这么干过
    wbsdty331
        81
    wbsdty331  
       2016-01-13 21:59:23 +08:00
    自带压缩卧槽
    jydeng
        82
    jydeng  
       2016-01-13 22:26:32 +08:00
    @ilaipi 你可以按着 ctrl ,然后 k => d ,即可。
    loddit
        83
    loddit  
       2016-01-13 22:41:43 +08:00
    好奇这么多的嵌套, CSS 是什么性能
    Khlieb
        84
    Khlieb  
       2016-01-13 23:05:53 +08:00
    维护起来肯定是个大麻烦,估计到后面敷衍了事的就多起来了。
    murusu
        85
    murusu  
       2016-01-13 23:17:30 +08:00
    你司的前端脑力太吊了 233
    TTry
        86
    TTry  
       2016-01-14 01:12:17 +08:00
    这个选择器的长度和格式应该是 sass 生成出来的代码吧...
    maplerecall
        87
    maplerecall  
       2016-01-14 01:23:55 +08:00
    可以考虑撕逼…或者选择跳槽……

    或者选一段用 less 重构然后把清晰简单的代码甩他们一脸…
    fuermosi777
        88
    fuermosi777  
       2016-01-14 01:52:02 +08:00
    自带压缩机 啊哈哈哈哈。。。
    drvtwo
        89
    drvtwo  
       2016-01-14 02:22:35 +08:00
    @zhpech 哈哈哈,自带压缩
    louk78
        90
    louk78  
       2016-01-14 08:28:34 +08:00
    自带压缩技能
    warDoggie
        91
    warDoggie  
       2016-01-14 09:34:54 +08:00
    已收藏图片 准备发同事,作为学习楷模。
    MrEggNoodle
        92
    MrEggNoodle  
       2016-01-14 10:07:28 +08:00
    - =你确定这真是手写的???
    thinkmore
        93
    thinkmore  
       2016-01-14 10:08:23 +08:00
    好好珍惜它,从这段代码中可以看出来人家的查找,复用等各方面做的是极好的
    kvwror
        94
    kvwror  
       2016-01-14 10:14:55 +08:00
    ZeoKarl
        95
    ZeoKarl  
       2016-01-14 10:18:46 +08:00
    贵公司的人大脑自带格式化工具.
    weiwei202
        96
    weiwei202  
       2016-01-14 10:20:20 +08:00
    卧槽。。
    20015jjw
        97
    20015jjw  
       2016-01-14 10:22:15 +08:00
    实力铁饭碗
    aivier
        98
    aivier  
    OP
       2016-01-14 10:41:15 +08:00
    @kvwror WebStorm 也能格式化...只是改起来麻烦,外加本身一堆重复
    @MrEggNoodle 确实是手写...
    @maplerecall 已经在重构了,不然要累死的结构
    @TTry 没用过 sass ,只用过 less ,这个是他们从浏览器里复制的,也有一部分是手写的
    @murusu 我也是前端,然而没这么...我还是去用 less 好了...
    @tcdw 似乎非常正确
    paxster
        99
    paxster  
       2016-01-14 11:08:39 +08:00
    表示还是用很原始的写法,偶尔用用 SASS ,我只能说这哥们的写法以及 CSS 的命名和权重啥的写的太乱。。。。
    world
        100
    world  
       2016-01-14 11:33:39 +08:00
    我有强迫症,改代码的时候如果是一行的,一定会先分行再改,看到这样的代码有一种想打人的冲动
    1  2  
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     1413 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 34ms UTC 16:51 PVG 00:51 LAX 09:51 JFK 12:51
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86