css 好难，你们怎么熟练把 css 用起来的？

[b1t]

在学前端，看了 React 、Nextjs

又边看 Tailwind CSS 的文档边写点东西

但是 css 是来回调试，经常不生效，或者位置奇奇怪怪

css 有什么固定套路可以用吗？
你们怎么度过的这个阶段？

[murmur]

都 2024 了，不需要做 IE 兼容性，不要求你背八股文写各种奇奇怪怪的 hack ，有 flex 布局，直接源生支持--var 和 calc

搭配 ai 加成和各种工具，比如专门做阴影、渐变的

学不会就是菜，难什么，你没好好学而已

[murmur]

抛去各种炫技、动画，css 本身是切分的艺术，要学会拆布局，拆成几个部分，找出每个部分的规律，一层层拆下去

[b1t]

@murmur 大佬，确实想着着急出东西，想着边用边学，不过不尽人意。目前在尝试着重新实现一边 v 站，这个过程基本要靠 gpt 完成布局，自己 css 写起来很吃力，如果掌握 flex 布局，是不是就能应对大部分场景了？

[reDesign]

刚好也在用 nextjs 和 tailwind 搞博客，放一个链接在这，https://www.augusts.me 。
我的答案就是先用起来，边解决问题边熟练。就像学习 office 一样，看完《 word 操作大全还是不会用 word 》，能解决自己需求就好了。

[InDom]

我现在前段的状态就是，你让我微调边距，字体，样式都还行。

但你让我搞布局，我想上吊...

[hevi]

可以快速把《响应式 Web 设计 HTML5 和 CSS3 实战(图灵出品）》（俗称瓢虫书）看看，我当时是用它入门的。
然后把阮一峰老师的 flex 和 grid 布局文章都看看，就可以莽了

[murmur]

@b1t gpt 可以写代码，但是得自己练习，毕竟 gpt 出的东西和已有项目的风格不一样，你乱写未必过的了代码审查

可以试着先无视各种文字、按钮，先把每个区域用白块做出来，布局做熟练了再开始填内容

比如这个 v 左侧区域，可以先把主楼 回复 新回复框 这几个白块做出来，然后在回复里拆出子楼层，然后分出回复的头像、标题、正文区域，一点点循序渐进来

这种拆布局拆两次就习惯了，很简单

[b1t]

@InDom
@hevi
啊，所以布局方面，大家基本上都是通过 flex 布局一把索是嘛

[murmur]

@b1t 你一开始不考虑 position: absolute 这些用法或者用 before ，after 写伪类，可以把所有的布局都按左右、上下拆分，这样写出来就简单的多，上手也快

[Simle100]

当时因为 CSS 放弃了前端，实在是整不会

[bzw875]

我亦无他，惟手熟尔。我当年是这么学习，一比一绘制 https://m.jd.com/的 html 、css 。上面图片保存下来；然后是 CSS 动画，过渡。可以开发者工具看它怎么写的

[b1t]

@murmur 大佬好方法，感谢提供思路

[b1t]

@Simle100 css 给人感觉看着不难，一下手就不是那么会事了，得练一练

[lovedebug]

谷歌的教程，还算写的很好的 https://web.developers.google.cn/learn/css

[b1t]

@lovedebug 我去看看，谢谢

[Seria]

沒，順其自然就會了，然後越用越熟練，哪裏不會查哪裏，多看文檔。

[linyongxin]

我以前也纠结 css 各种兼容和布局，后来发现，只要用 Twitter 出品的框架 bootstrap ，就不用那么麻烦

[Jame00001]

html/js/css 是前端最基础的东西。正经前端简历上都不敢写这些，因为太基础了。你如果要用前端，起码吧基础看一下吧。
每次看到说自己不擅长写 y 样式就觉得在侮辱。好像“高级的”你百度一下就会了不屑于学这种低级的东西。逼都让你装了回头再啐一口。

[Justin13]

盒子模型
流式布局 定位元素
bfc
stacking context
inline 行框 基线
flex grid
这些基本功学学就差不多了
剩下的用到再学

[yanulg]

真没啥难的，又不需要你兼容老浏览器，以前什么垂直居中的 20 种方法，分割布局的各种奇怪 trick ，现在都能用 flex ，更复杂点的也能用非常直观的 grid ，现在能用到的属性看一看基本没有什么理解不了的，你无非是没法 1 天学会 30 天的知识就着急了