得了前端恐惧症该怎么解决 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qwx
V2EX    前端开发

得了前端恐惧症该怎么解决

  •  
  •   qwx 204 天前 4342 次点击
    这是一个创建于 204 天前的主题,其中的信息可能已经有所发展或是发生改变。

    会 spring 一把梭做后端,发现想做一些有意思的项目都很难躲过前端这件工作,包括但不限于 APP 和 Web ,会 JS ,但 CSS 几乎无法理解。

    文档我也看过,Vue 之类的也会用(但仅仅是那种光秃秃的页面放个按钮或者表单响应后端接口),也照着 MDN 那类的网站一路学习下来,但还是陷入了“这个元素放在这里要如何实现,要用什么布局”以及“这个文字怎么靠上/下/没居中了,该怎么调整”的怪圈,也尝试过 AI ,但感觉没有一个很好的思路很难做到自己满意,有些迷茫。

    不知道有没有其他人跟我一样从这个状态走过来,有没有什么突破点?

    54 条回复    2025-03-21 09:51:27 +08:00
    yvyvyv
        1
    yvyvyv  
       204 天前   1
    纯前端 Css 部分 太适合 ai 了,把需求讲明白 甚至可以把原型图给他,都能生成代码的。
    libasten
        2
    libasten  
       204 天前   1
    正常,前端要做的好看,得有“艺术设计”成分在里面了,一般程序员也就用各种组件框架搭搭。
    qwx
        3
    qwx  
    OP
       204 天前
    @yvyvyv 我对 AI 的态度是,可以用,但我必须得懂它做了什么,能做什么改变,但目前来看我能让它做,但改动难以下手……
    qwx
        4
    qwx  
    OP
       204 天前
    @libasten 我组件框架会用,也尝试过 semi ,element ,甚至 figma ,但总感觉我是那种“组件怎么出现在它该出现的位置”都不会,随便缩放一下页面直接就垮了
    shadowyue
        5
    shadowyue  
       204 天前   3
    你焦虑啥,你一行 css 不写,先把功能实现了,
    然后你就发现自己的项目反正没人用,幸好没花时间写 css
    evan1
        6
    evan1  
    PRO
       204 天前   2
    从 0 开始写确实不好写,还是先用 AI 生成一下再改吧。

    CSS 要想用的好就得多用,背背背。

    布局的话可以先给所有元素都加上边框便于理解。先写出页面框架,然后再慢慢填内容。

    最后!important 是最好用的写法!
    qwx
        7
    qwx  
    OP
       204 天前
    @shadowyue 我的情况还不大一样,起码这系统写出来公司还是要用的,我也不是专职开发但很多工具自己写可以造福大家就是了,开源我是不敢的,只敢闭门造车,我怕人家笑话我的代码是一坨~
    qwx
        8
    qwx  
    OP
       204 天前
    @evan1 你还真别说,我生成出来的代码雀食用!important 改,爽,但是就是自己心里很清楚这么操作会被喷死 hhh

    我看了很多教程都说什么用 flex 布局啊用什么绝对布局啊,但好像没人说这些玩意可以组合起来然后做出一个登录框,我去看别人设计的登录框直接给我惊讶了,说布局还能这么用,喵喵喵了
    yvyvyv
        9
    yvyvyv  
       204 天前   1
    做产品有原型图吧,而且产品原型图设计也得是参照框架来的。根据图上的 px 提供给 cursor 或者 trae 呗。改动也同理啊 你要把什么控件网上偏移多少个像素这些都可以用文字描述给它生成吧。感觉楼主跟 ai 沟通的不太对, 最好不要反问 ai "这个文字怎么靠上/下/没居中了"。要跟他说你要什么"这个文字我要在 xxx 模块,外边距 xxx ,靠上/下/居中"
    qwx
        10
    qwx  
    OP
       204 天前
    @yvyvyv 有可能,我再去研究研究 AI ,至于原型设计是没有的,我的艺术细菌少的一塌糊涂,小时候画眼睛都画成猫猫的那种眼瞳,周围人都说我的观察能力和艺术能力已经完蛋了 hhh
    shintendo
        11
    shintendo  
       204 天前   1
    现代 CSS 已经友好很多了,把 flex 背熟就可以解决 80%的问题
    qwx
        12
    qwx  
    OP
       204 天前
    @shintendo 那我感觉我更菜了
    qhd1988
        13
    qhd1988  
       204 天前   1
    你们有 ui 吗?没有说个
    qwx
        14
    qwx  
    OP
       204 天前
    @qhd1988 “们”这个字深深的刺痛了我
    DL9412
        15
    DL9412  
       204 天前   2
    1. 找一个合适的组件库,比如 vue 占统治地位的 element ui ,大部分布局以及一致性问题就解决了
    2. 活用 position: relative 里面套 absolute ,以及 flex ,能搞定绝大多数布局。总之就是大框套小框,剩下的交给 margin
    3. 善用 f12 ,你只需要记得你想调的 css 大致叫什么,剩下的交给控制台自动补全。属性可选值都会给你列一排,方向键一路向下现选现看效果,总有一个适合你
    yvyvyv
        16
    yvyvyv  
       204 天前   1
    感觉 op 侧重点有点跑偏了,不是 css 的问题,你自己玩项目画前端页面,直接用前端代码做没有参照,想法很容易变的,可能现在想这个模块在左边比较好,一会又想居中偏下比较好。这要是在项目里这一动就等于动了需求,就算是前端搞起来这么改也要骂人的。感觉 op 得先定个稿,没有原型图也得有个效果图之类的,或者现成的项目当作参照。
    照着做按钮位置、模块分布就一摸一样的来。定稿的时候随便变。用代码写的时候就别改了
    qwx
        17
    qwx  
    OP
       204 天前
    @DL9412 1.这个 ok 的,我已经会了,2.这个很实用的套路,我学习一下。3.我 F12 用的飞起,作为一个后端仔调试层面用工具和打 log 稳得一。
    qwx
        18
    qwx  
    OP
       204 天前
    @yvyvyv 唔,你要说没原理图,那雀食,但是自己脑子有一个想法,然后发现画不出来,就烂了
    asdblue
        19
    asdblue  
       204 天前   1
    我也是,css 看到就头大,其他都好说
    yangth
        20
    yangth  
       204 天前 via Android   1
    把页面想象成一个封闭空间,这个空间的上面和左边是一块磁铁,中间的盒子会被吸到上面和左边,你要做的就是操作 css ,各种姿势往上堆叠盒子就行了
    AEDaydreamer
        21
    AEDaydreamer  
       204 天前   1
    flex 布局学会,整个 tailwind css ,dribbble 和 behance 上模仿设计,figma 上出个 wirefram 草图,最后直接开撸。
    qwx
        22
    qwx  
    OP
       204 天前
    @yangth 但盒子有大小,长短不一,盒子还有边框,盒子还得考虑盒子里面的东西,缩小浏览器还会导致封闭空间变小,盒子被挤下去,还是要隐藏。。。_(3 」∠)_
    qwx
        23
    qwx  
    OP
       204 天前
    @AEDaydreamer 这就去学习,好多词没听过 Orz
    c2boy
        24
    c2boy  
       204 天前   1
    把 css 基础打牢就行了,看看 css 世界这本书
    yangth
        25
    yangth  
       204 天前 via Android   1
    @qwx 和搭积木一样,熟悉规则就行了,多玩玩,最多半年,css 是前端比较简单的一个点了
    williamherry
        26
    williamherry  
       204 天前   1
    @qwx #4 自适应一般都是框架提供的,也没必要纯 CSS 实现,可以选一个前端框架深入研究,推荐 Bootstrap
    qwx
        27
    qwx  
    OP
       204 天前
    @c2boy 书下载了,今天地铁的读物有了 hhh
    qwx
        28
    qwx  
    OP
       204 天前
    @yangth 多练多练,我试试看。

    @williamherry bootstrap 的文档看了好多遍,上手就我就拉了
    1183460943
        29
    1183460943  
       204 天前   1
    把 css 最基础的东西搞明白, 基础样式, 盒模型,flex 布局, 定位, 能应付百分之九十场景
    MRG0
        30
    MRG0  
       204 天前   1
    我有后端恐惧症,不会 java
    mzfbwu
        31
    mzfbwu  
       204 天前   1
    请帮我调整这个表格风格,采用卡片式,参照推特的推文卡片,现代化,立体精致,简约美观,圆角,柔和的阴影效果,平滑的点击与 hover 动画效果,增加图标与文字的间距,调整底部边框,巴拉巴拉。反正我现在就是靠这些提示词搞前端的,自己也写,但是 ai 已经把我养懒了。
    qwx
        32
    qwx  
    OP
       204 天前
    @1183460943 你说的这些基础我都会,但现在放在眼前一个居中需求我依然会,┭┮┭┮


    @MRG0 java 一把梭,我建议刷一些“模拟”的算法题,他会让你用程序实现你的思维,之后就不难了。


    @mzfbwu 好词,偷了。
    MRG0
        33
    MRG0  
       204 天前   1
    @qwx #32 算法更不会了
    v2ye
        34
    v2ye  
       204 天前   1
    我原来也是后端,现在是前端。调样式确实是比较繁琐。你可以写的时候直接给 div 定义一个背景色,醒目的红、蓝色都行。然后在里面规划好每个块大致要放什么,也是给一个背景色。这样应该能够帮助你理解里面的属性。
    yangzzzzzz
        35
    yangzzzzzz  
       204 天前   1
    css 别想着按规范写,不然会很累,有了设计稿 别管怎么写 最后样式能实现就行了
    qwx
        36
    qwx  
    OP
       204 天前
    @MRG0 他不是算法,他是让你用程序解决一些现实生活的问题,然后下次你遇到类似的问题就会解决啦,反正后端也就是处理数据,你的思维怎么处理就怎么写程序完事。


    @v2ye 好手段,偷了。


    @yangzzzzzz 确实,我这本质上还是焦虑
    NoManPlay
        37
    NoManPlay  
       204 天前   1
    css 其实蛮多奇技淫巧,尤其很多样式不好实现不如直接用 before/after
    现在浏览器样式基本 flex/grid 布局解决大部分布局问题,剩下的再精修
    q2677855779
        38
    q2677855779  
       204 天前   1
    css 常用的很简单的,学会 flex 和定位了,百分之 99 的页面都能搞定,剩下的问 AI 会给你提示该用什么的~
    q2677855779
        39
    q2677855779  
       204 天前   1
    如何觉得布局看不懂,加上这一行代码,给你画上条条框框了,就简单了
    * {
    outline: 1px solid #0000ff;
    }
    https://blog.csdn.net/IAIPython/article/details/130571182
    MrZhangLo
        40
    MrZhangLo  
       204 天前   1
    @qwx #32 看看 flex 和 grid 布局,学习一下就够用了。
    qwx
        41
    qwx  
    OP
       204 天前
    @< href="/member/NoManPlay">NoManPlay 我先打好基础再说这些奇奇怪怪的叭=。=


    @q2677855779 再巩固一下 flex 和定位 Orz


    @MrZhangLo 好,我学学看
    hadesqiao
        42
    hadesqiao  
       204 天前   1
    设计稿放蓝湖,直接就有样式,拿过来微调。
    akakidz
        43
    akakidz  
       204 天前   1
    反复学习 flex 并加以应用,建议看一下阮一峰和张鑫旭的博客中关于 flex 的技巧,你可以解决 99%的布局问题
    tonytonychopper
        44
    tonytonychopper  
       204 天前   1
    真要学就看一下 flex 布局,然后找一个网站认真临摹几次
    cheng6563
        45
    cheng6563  
       203 天前   1
    我都是<table>+&nbsp;布局的
    ccfly
        46
    ccfly  
       203 天前   1
    没办法 就像后端一样 你连一些关键字都不知道咋写 只能多写 遇到时候不清楚就查 这样才能写得好
    asLw0P981N0M0TCC
        47
    asLw0P981N0M0TCC  
       203 天前   1
    就弄很多个 div 慢慢来
    ljpCN
        48
    ljpCN  
       203 天前 &bsp; 2
    已经靠推荐这个网站让很多人入门并且后来成为一名真正的前端了: https://zh.learnlayout.com/
    Leeeeex
        49
    Leeeeex  
    PRO
       203 天前   1
    不改变页面分辨率不就不会变了吗,不要那么纠结自适应的问题,你可以就现在 pc 端或者手机端一端上把 css 效果做好。
    qwx
        50
    qwx  
    OP
       203 天前
    @ljpCN 这个网站好棒,感觉茅塞顿开,比各类复杂教程爽多了,我看完 19 页感觉我又行了!


    @chanChristin 所以本质还是焦虑~
    mynameislihua
        51
    mynameislihua  
       203 天前   1
    系统性的学一两天差不多了
    me1onsoda
        52
    me1onsoda  
       203 天前   1
    @qwx #4 我发现自适应响应式很多前端选手也做不好
    qwx
        53
    qwx  
    OP
       203 天前
    @me1onsoda 但起码我常用的站点做的都不错,可能他们是金字塔的塔尖吧
    liaopen123
        54
    liaopen123  
       203 天前   1
    以前也有恐惧,恐惧的原因是未知,公司有需求硬着头皮写了几天,发现前端简单好多,就没什么恐惧的了。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5835 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 28ms UTC 02:24 PVG 10:24 LAX 19:24 JFK 22:24
    Do have faith in what you're doing.
    ubao 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