一个很老的话题，但还是想问问大家，后端搞前端怎么选

[XinPingQiHe]

场景：后端老手。正规应用，前端都是有人用。 但偶尔一些应用场景还是需要自己能鼓捣出来页面展示，不能所有的全依赖于前端。 前端目前能力：之前的数十个大小前端项目，vue 项目居多。也就是会看看代码，看看前后交互，改改配置项，编译部署。react nextjs 也有几个项目，修改各类 js 代码可以。紧急情况下，也可以写一些 js 。 前端水平，如果有人把页面搭建搞好了，自己能完成剩下所有事情。 主要困惑：1.css 难读难写。2.如果要设计一个稍微复杂一点的页面，觉得无从下手。 不知是否有一种快速搭建页面的技术存在? 形势所需，自我要求多掌握游一些技能，请各位有类似经验的指点一二，谢谢！

[zy0829]

别学

[ma836323493]

最近学前端做了个服务号， 用 padding 用的真爽

[qweruiop]

@studyingss 哈哈，一样的，现在基本上都是 flex 套 flex+tailwind ，再复杂点的页面，就花几十块钱，淘宝让 人工 gpt 上了。。。

[cnhongwei]

后端能写好的人，前端是没有问题的，你把前端页面划分为几个层次，层->块-元素
层是指你的页面中会有多少层，主要是对话框，遮罩层，这些层在什么什么时候显示隐藏。
块就是把每个页面按功能分多少块，如果在页面宽度或内容多少发生变化的时候，每个块的大小如何发生变化，使用 flex 布局很简单，只通过 padding 或 marging 来间隔块就行了，如果还复杂，就多套一个 div 。
元素就是 html 元素，你使用合适的元素和事件就行了。
使用现在的框架来组合上面说的就行了，现在基本没有框架完不成，需求直接手搓 css 的了。

[luojianxhlxt]

C#准备研究一下 Blazor ，不过也只能跳过 js

html 和 css 还是跳不过

[guanzhangzhang]

@cnhongwei 层是怎么体现的，也是 div 和全局 className 实现吗

[XinPingQiHe]

谢谢各位的建议，用新思维，再挑战一下自己

[leaveeel]

@guanzhangzhang 层是指 position 产生的 z 轴，正常布局都在同一层，层互相独立。块就是 y 轴自动向下沿伸，块互相独立。元素是块里的 x ，水平排列会换行。然后整个页面就是坐标系的俯视图。也有属性可以改他们的相对关系，比如 transform 、float ，想进一步了解需要看文档+多用

[shuyunquan]

1. 好多朋友讲的很对，css 必须要掌握 flex 布局，grid 布局 这俩会了你发现写页面布局很简单
2. 但是非常复杂的页面，用这俩写 css 就感觉很啰嗦，很繁琐， 这个时候就可以使用 tailwinds, 可以省去写大量 css 的时间
3. 复杂的页面可以想想能不能用 vue 的组件思想，搞些组件复用
4. 如果是 ERP 这种项目，那有些页面确实很复杂，也不好组件复用， 就复制粘贴呗，反正大部分都是列表的增删改查，小部分复杂的就让前端同事处理

[Ayanokouji]

如果只做 web 端，真心觉得 htmx 很棒。如果要支持多端，还是前后端分离吧，用 react/vue/ng 。

[svtter]

nextjs 加上 tailwind ，大概学一周，就能做挺好的东西了。贴一下自己的水文： https://svtter.github.io/post/2024-03-12-react-for-old-django/

[lancelock]

页面设计是 ui 的活吧，前端也没几个会设计的

[shadowyue]

管什么前端后端，不都是搞开发，抽时间选一个主流框架学就行了

[angryfish]

作为一个后端，觉得前端的难点主要在以下方面：
1.布局难搞，没法随心所欲的安放元素位置。
2.效果不会实现
目前我得解决方法就是，尽量用 ui 库。像 elementui,vant 啥的。没有这些东西，我一个功能都实现不了

[layxy]

可以稍微学习一下,而且后端搞前端基本都是用的现成的 ui 库,自己稍微调整下排版就可以,复杂组件就只能甩给前端了

[guanzhangzhang]

@svtter 你文章里的 next.js 没提到需要学哪些基础内容，还是不用管直接写吗

[svtter]

@guanzhangzhang 建议是读官方的 tutorial 。读不下去就直接跟着感觉写（说出这句话感觉自己相当不专业）。

[XuHuan1025]

我感觉挺简单... 我直接 gpt 直接整个页面就有了

[learnshare]

动手写 CSS 之前，应该先熟练使用现代化的 UI 设计工具（比如 Sketch/Figma 等）
CSS 是一种通过代码绘制 UI 的工具，与设计工具里的布局、图层、组件化等概念基本一致

[svtter]

@learnshare 请教一下，css 哪里体现了图层？