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 我去看看，谢谢

[yKXSkKoR8I1RcxaS]

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

[linyongxin]

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

[Jame00001]

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

[Justin13]

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

[yanulg]

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

[FeifeiJin]

我是决定永远也学不会 css 的。

[Guidoo]

布局就 flex 和 grid 一把梭，找几个常见的布局，多练几次就会了

[Puteulanus]

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

浏览器的元素查看面板能看到每个元素的样式和计算样式，遇到不生效或者位置奇怪的时候，顺着选择器、继承这些去看，找到确定的原因。

它不是平白无故“失效”和“位置奇怪”的，你不理解的地方就是你该去学习的地方，每次搞懂了下次再出问题的时候对背后的逻辑分析都会清晰一点。你如果只想“换个属性试试”、“换个布局器试试”这样去试，等于每一次面对的都是全新的问题。

[43n5Z6GyW39943pj]

flex 够用, 炫酷的那些一般也玩不转

可以说精通 js, 但没人敢说精通 css

[murmur]

@MorJS 精通没必要，贴图解决 100%问题，贴视频解决 120%问题，复杂需求用 unity 或者 unreal 做解决 200%问题

css 不是万金油，当年还在玩 IE 年代的 css 动画，支付宝的背景就开始贴完整视频了

[o00O00o]

@reDesign 有意思，请问一下头像是如何生成的呢

[crocoBaby]

flex 一把梭,秀操作就学 grid,想了解布局的前世今生就从 table,float,margin,position 看一遍

[b1t]

@yanulg 老哥说的对的，其实也是因为一看好像就懂了，所以感觉自己就行了，其实还是得多学学想想练练


@Puteulanus
你如果只想“换个属性试试”、“换个布局器试试”这样去试，等于每一次面对的都是全新的问题。
------------
老哥，太懂了。哈哈哈哈，感谢分享查找问题的方法

[DOLLOR]

CSS 最基本的功能就是调间距、大小、色彩，搞明白 margin 、padding 、border 、font-size 、color 、background ，就能干很多活了。
布局方面优先考虑 flex 。当然有的人 flex 怎么都学不会，用 inline-block 也不是什么可笑的事情。
如果只是想快速出东西，直接用组件库就好了。

[angrylid]

本站怪现状之一，一群人日常嘲笑前端切图仔，而另一群人不会写 CSS

差不多就是 15 楼讲的那样，先把最基本的这些概念学完了。剩下的就是多写多练了。

[lneoi]

文档流 知道浏览器对常见的元素默认的处理特性 然后可以开始 F12 对着调需要的效果

[wuyiccc]

直接 flex 干一切

[wuyiccc]

我现在已经放弃思考 css 到底怎么玩了，直接 flex ，可以解决我 95%的问题。剩余 5%的问 gpt, 实在不行!important

[arfaWong]

模仿和使用练习

[particlec]

display: flex;
align-items: center;
justify-content: center;
写的最多的代码了

[storyxc]

这玩意没别的办法，就是多写，去年写了两个自用的小项目，当时调整样式已经很得心应手了。这俩小项目搞完没碰前端，就又忘的差不多了。

[wu67]

用多了就熟了.
前端仔表示当年看了一星期就上手了, 至于干活, 当然是 flex 一把梭. 如果常见业务 flex 解决不了, 那是业务有毛病, 得花更多时间去布局, 而且大多数情况下其实客户根本不关心这种效果...

[Jungzl]

@particlec 这坨我通常用 unocss 的 shortcuts 简写成 fcc 的类名，还有其他一些 fcb ，fbb 之类的

[jy02534655]

先学习下 css 选择器，了解下 css 权重这种基本功吧

[ARslince]

https://github.com/slince-zero/IMaker

可以看一下我这个项目，也是用的 tailwindcss

[cgpiao]

现代的 CSS 多简单，又不考虑远古，远古 float 是恶心到极致。
flex 就能搞定 99%的布局问题，其他的就属于元素个别样式了。

[zwpaper]

简直是深有体验。。。和 op 一样，也是想着直接上手，项目里学习，结果发现 css 这玩意就是 op 总结的，要不不生效，要不就各种奇怪，感觉还是没用对方法

[jqtmviyu]

flex 和定位能解决 99%的问题.
然后就是 css 三大特性, 层叠(覆盖), 继承, 优先级(权重)

[dj721xHiAvbL11n0]

那我建议你还是拿主题改，这样更好，不然兴趣都磨光了

[AirCrusher]

@reDesign 这个好酷，请问导航栏动效是怎么实现的呢

[Ritter]

月经贴了

[freezebreze]

直接 tailwindcss 边用边学习 css 知识 用过都说好

[Ashore]

flex 就够用了

[laobobo]

你这才刚入门就难，想学的深入就更难了！

[abcdxe2v]

css （的深入）是前端最难的东西。
“css 是来回调试，经常不生效，或者位置奇奇怪怪” 正常，99%的前端都不知道一个属性到底为什么造成了某个奇怪的效果/位置。真想理解得看这个东西 https://drafts.csswg.org/ ，太乱了。

[NerbraskaGuy]

CSS 最大难点是吃经验和很多反直觉的遗留问题，新手不要先想着兼容 ie 那些了，最快方法应该就是找现成的例子仿写。

[WhateverYouLike]

边做边学不一定是个好办法，因为低水平重复调试会浪费时间，最起码掌握了百分之七八十之后边做边学才比较有效果。

[coolmint]

tailwind 教程看看直接就开始一把梭了，直接项目中用，遇到问题就 gpt 或者翻翻文档，实战下来没啥问题，普通的 css 就算之前学过现在也不是什么都记得了。

[xuhai951753]

https://devv.ai/zh 直接问你要什么效果，直接出码。
所以重点还是在于你要知道 css 大概能做到怎样的效果

[walker1024]

招个熟练 CSS 的

[libasten]

先找个架子，然后现在搜索，现在是问 ai

[lianxiben]

多写，多踩坑，没有捷径的

[seven123]

tailwindcss

[DT27]

要学会 F12 开发者工具排查。

[codehz]

@murmur 但是 flex 有 Safari 的各种 bug （布局尺寸改变相关）
然后导致很多抽象失效，因为单独测试的时候都是好的，组合起来 safari 就炸了 （ flex in flex
@Puteulanus Safari 还真的可以出现 devtools 里给出的框是正确的，但渲染出来就是炸的情况，还能在 devtools 打开后（因为改变了页面宽度导致 reflow ）自动恢复，有时候真的只能换个布局（）

[Leon6868]

布局需要多练习，先拆解别人的布局方案，然后尝试对着设计稿复现

[me1onsoda]

为什么好多后端 boy 都很难上手 css🤣

[xlzyxxn]

可以先练习使用 css 连接数据库，熟悉之后就可以写写布局，动画了

[dif]

这玩意属实玩不转，学 scala 、go 、python 、java 都没这么难。反正就是各种尝试。最关键的，项目还是 scss 。

[chengxy]

Tailwind CSS 并不能提升你的 CSS 技能

[draguo]

因为 CSS 是没有逻辑可言，推荐看一下这个 https://zhuanlan.zhihu.com/p/29888231 ，反正我是因为 css 放弃前端的

[morizawatt]

多写就背下来了，我是设计，自学的 html 、css ，js 学不了一点...

从改网页模版开始学的，然后自己设计、敲代码搭了个人站

也是三四年前了，现在网页端刷知乎摸鱼用最多的是 display:none😗

[lycpang]

熟能生巧吧。。。做得多了自然就懂了，就是多个样式之间的关联关系，出了问题自己搞不定就问 chatgpt ，只要你描述的够清楚，他就能一下吧 css 全给你搞定

[lycpang]

@lycpang 所以，你怕 chatgpt 么，，如果你连 css 都不会，chatgpt 真的能取代你。

[CHTuring]

Grid 布局： https://www.joshwcomeau.com/css/interactive-guide-to-grid/

Flex 布局： https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

把这两篇文章看完，并且跟着敲一遍。保证你布局相关肯定没问题。

[Lemonadeccc]

@FeifeiJin 好多年不见飞飞了

[Puteulanus]

@codehz 那你不也搞清楚了原因，还能跟人分享这个案例（摊手）
而不是“有时候别的地方能用的样式不知道为啥突然就不好使了，换个布局就好了”

我们有一回项目临近尾声了甲方突然说他们员工用的都是苹果，要求保证 Safari 用起来正常，QA 一测茫茫多的地方显示有问题，开发头都大了

[DemonQ]

可以借鉴培训班的思路：照着淘宝京东再来一个复杂点的网站抄，只抄静态浮现，原模原样浮现，有不会的就打开调试看看人家怎么做的，抄两三个基本 css 就是信手拈来了，归根结底还是锻炼少
当然这是基本的 css 训练，至于什么兼容处理，动效实现就是自己积累了

[label]

学下弹性盒子, 一把梭, 简单的一批

[davin]

Chrome 还没诞生的年代，靠着各种 CSS CHM 手册、CSS 禅意花园、IETester 和 Firebug 也熬过来了。熬死了那个年代的 IE 、Opera 、Flash 、Silverlight 、Adobe AIR...

[DemonQ]

浮现-->复现

[iniMeow]

@reDesign 好酷！想学

[dog82]

css 的浮动我至今都没搞懂

[codehz]

@Puteulanus 但确实是上下文相关的，我的意思是，同样一个组件，放第一个位置，嗯，没问题，前面随便加一点别的，就整个分崩离析，完全没办法用逻辑解释（当然，chrome 什么的都是正常的），就是 safari 布局引擎本身的 bug
而且主要出现的场景就是 flex layout ，不过很多时候能被 grid 替代，换成 grid 实现一样的效果就不会有问题（）

[wentx]

[SimonWoo]

遇事不决 position

[gitignore]

需不需要手把手教😌在线教学，红包🧧你看着给

[maxmeng936]

很简单，你只要在浏览网页时也想着怎么布局就行。遇到不会的，打开控制台看一下。

[wzy44944]

感觉 css 就不属于编程语言，顶多算是设计语言，就是给组件设置属性

[supuwoerc]

flex + grid 解决绝大多数布局，再补充问一问 gpt ，做几个页面就熟悉了

[mumbler]

还手动写？让 gpt4 写就行了

[agagega]

现在 flex 一把梭，高级点的加上 grid ，absolute 、float 这些东西都不太会用到。css 难是因为它各种属性不正交，相互之间会影响，外加浏览器会自带一些属性。但 css 好歹（大部分）是无状态的，调试起来比 js 操纵的布局容易很多。

[guxin0123]

IE6

[yanyao233]

之前也一直觉得 css 难，但实际用了之后发现现代 css 挺简单的，flex grid 布局无脑套，其他的样式看着 tailwind 文档自己挑

[oakland]

css 真的难，没什么统一的组织理论，都是零零散散，tailwind 不全能，postcss 也不全能，全靠各种拼凑。
你要说做个什么效果，那还好，但是要把整个项目组织起来，真是头大

[xrzxrzxrz]

主业是后端。如果我写 css ，那就是面向玄学，开 F12 ，各种调调调，效果对了就复制贴到代码里面。

[Rwq8xlHrBAi0ct2w]

@reDesign 挺不错的 想问下开源没有

[jsq2627]

现在 flex grid 感觉已经很简单了
要想当年要兼容 IE6 的时代，用 flex 都要畏畏缩缩的

[leegradyllljjjj]

又不是不能用，业务实现就行，丑点怎么了

[kneo]

CSS 就是很难。

1. 一个效果有无数种实现。比如一个像素也有十几种常见做法，我都会。但是用哪个好？——选择障碍症自杀了。

2. 想实现一个效果，改来改去总是差几个像素。——强迫症自杀了。

3. 抄别人的实现，抄过来几百行代码，能用，但是这么多垃圾代码我不允许。删删删，小不小心效果删没了……加回来几行，好像又能用了，继续删删删。删了一晚上，妈的算了我自己写吧。——洁癖症自杀了。

3. CSS 动画，有现成的，拿过来就能用。啊，要我改个特效？——智力不足者自杀了。

4. 丑？丑是我的问题吗。让你招个设计你不招，非让老子写，说了老子不会做设计。——无产者自杀了。

[NeoChen]

不知道还有多少人记得 web 标准化的历程…blueidea 到死还是 table 布局

[Adelell]

不管啥布局，直接 position absolute 一把梭，统统写死。

[Al0rid4l]

现在的人 CSS 都不过 MDN 了吗...当年把 MDN 和 CSS 权威指南都过了一遍, 从此 CSS 简单轻松

[f14g]

感觉楼上有位专业的说的非常有道理的：flex+grid 解决大部分问题、复杂的动画问题完全可以上图片或视频，更进一步的需求则用诸如 unity 、three js 、d3 等前端库了。
综上说，“CSS 难学”真的不是做前端的一个障碍。更何况现在还有 flutter ，如果觉得 CSS 难学，完全可以用其他框架替代嘛
（ BTW ，我觉得 flutter 描述界面那个表现力还不如 X （ HT ） ML+CSS 呢）

[rowink]

建议是找个网站写，手搓博客小工具之类的，还有就是参考别人界面布局的样式，模仿着写，熟练后自然就会了