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

[qwx]

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

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

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

[yvyvyv]

纯前端 Css 部分 太适合 ai 了，把需求讲明白 甚至可以把原型图给他，都能生成代码的。

[libasten]

正常，前端要做的好看，得有“艺术设计”成分在里面了，一般程序员也就用各种组件框架搭搭。

[qwx]

@yvyvyv 我对 AI 的态度是，可以用，但我必须得懂它做了什么，能做什么改变，但目前来看我能让它做，但改动难以下手……

[qwx]

@libasten 我组件框架会用，也尝试过 semi ，element ，甚至 figma ，但总感觉我是那种“组件怎么出现在它该出现的位置”都不会，随便缩放一下页面直接就垮了😭

[shadowyue]

你焦虑啥，你一行 css 不写，先把功能实现了，
然后你就发现自己的项目反正没人用，幸好没花时间写 css🐶

[evan1]

从 0 开始写确实不好写，还是先用 AI 生成一下再改吧。

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

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

最后!important 是最好用的写法！

[qwx]

@shadowyue 我的情况还不大一样，起码这系统写出来公司还是要用的，我也不是专职开发但很多工具自己写可以造福大家就是了，开源我是不敢的，只敢闭门造车，我怕人家笑话我的代码是一坨~

[qwx]

@evan1 你还真别说，我生成出来的代码雀食用!important 改，爽，但是就是自己心里很清楚这么操作会被喷死 hhh

我看了很多教程都说什么用 flex 布局啊用什么绝对布局啊，但好像没人说这些玩意可以组合起来然后做出一个登录框，我去看别人设计的登录框直接给我惊讶了，说布局还能这么用，喵喵喵了

[yvyvyv]

做产品有原型图吧，而且产品原型图设计也得是参照框架来的。根据图上的 px 提供给 cursor 或者 trae 呗。改动也同理啊 你要把什么控件网上偏移多少个像素这些都可以用文字描述给它生成吧。感觉楼主跟 ai 沟通的不太对， 最好不要反问 ai "这个文字怎么靠上/下/没居中了"。要跟他说你要什么"这个文字我要在 xxx 模块，外边距 xxx ，靠上/下/居中"

[qwx]

@yvyvyv 有可能，我再去研究研究 AI ，至于原型设计是没有的，我的艺术细菌少的一塌糊涂，小时候画眼睛都画成猫猫的那种眼瞳，周围人都说我的观察能力和艺术能力已经完蛋了 hhh

[shintendo]

现代 CSS 已经友好很多了，把 flex 背熟就可以解决 80%的问题

[qwx]

@shintendo 那我感觉我更菜了😭

[qhd1988]

你们有 ui 吗?没有说个🍗

[qwx]

@qhd1988 “们”这个字深深的刺痛了我

[DL9412]

1. 找一个合适的组件库，比如 vue 占统治地位的 element ui ，大部分布局以及一致性问题就解决了
2. 活用 position: relative 里面套 absolute ，以及 flex ，能搞定绝大多数布局。总之就是大框套小框，剩下的交给 margin
3. 善用 f12 ，你只需要记得你想调的 css 大致叫什么，剩下的交给控制台自动补全。属性可选值都会给你列一排，方向键一路向下现选现看效果，总有一个适合你

[yvyvyv]

感觉 op 侧重点有点跑偏了，不是 css 的问题，你自己玩项目画前端页面，直接用前端代码做没有参照，想法很容易变的，可能现在想这个模块在左边比较好，一会又想居中偏下比较好。这要是在项目里这一动就等于动了需求，就算是前端搞起来这么改也要骂人的。感觉 op 得先定个稿，没有原型图也得有个效果图之类的，或者现成的项目当作参照。
照着做按钮位置、模块分布就一摸一样的来。定稿的时候随便变。用代码写的时候就别改了

[qwx]

@DL9412 1.这个 ok 的，我已经会了，2.这个很实用的套路，我学习一下。3.我 F12 用的飞起，作为一个后端仔调试层面用工具和打 log 稳得一。

[qwx]

@yvyvyv 唔，你要说没原理图，那雀食，但是自己脑子有一个想法，然后发现画不出来，就烂了🤔

[asdblue]

我也是，css 看到就头大，其他都好说

[yangth]

把页面想象成一个封闭空间，这个空间的上面和左边是一块磁铁，中间的盒子会被吸到上面和左边，你要做的就是操作 css ，各种姿势往上堆叠盒子就行了