在学前端,看了 React 、Nextjs
又边看 Tailwind CSS 的文档边写点东西
但是 css 是来回调试,经常不生效,或者位置奇奇怪怪
css 有什么固定套路可以用吗?
你们怎么度过的这个阶段?
1
murmur 213 天前 8
都 2024 了,不需要做 IE 兼容性,不要求你背八股文写各种奇奇怪怪的 hack ,有 flex 布局,直接源生支持--var 和 calc
搭配 ai 加成和各种工具,比如专门做阴影、渐变的 学不会就是菜,难什么,你没好好学而已 |
2
murmur 213 天前 3
抛去各种炫技、动画,css 本身是切分的艺术,要学会拆布局,拆成几个部分,找出每个部分的规律,一层层拆下去
|
3
b1t OP @murmur 大佬,确实想着着急出东西,想着边用边学,不过不尽人意。目前在尝试着重新实现一边 v 站,这个过程基本要靠 gpt 完成布局,自己 css 写起来很吃力,如果掌握 flex 布局,是不是就能应对大部分场景了?
|
4
reDesign 213 天前 2
刚好也在用 nextjs 和 tailwind 搞博客,放一个链接在这,https://www.augusts.me 。
我的答案就是先用起来,边解决问题边熟练。就像学习 office 一样,看完《 word 操作大全还是不会用 word 》,能解决自己需求就好了。 |
5
InDom 213 天前 4
我现在前段的状态就是,你让我微调边距,字体,样式都还行。
但你让我搞布局,我想上吊... |
6
hevi 213 天前 2
可以快速把《响应式 Web 设计 HTML5 和 CSS3 实战(图灵出品)》(俗称瓢虫书)看看,我当时是用它入门的。
然后把阮一峰老师的 flex 和 grid 布局文章都看看,就可以莽了 |
7
murmur 213 天前 1
@b1t gpt 可以写代码,但是得自己练习,毕竟 gpt 出的东西和已有项目的风格不一样,你乱写未必过的了代码审查
可以试着先无视各种文字、按钮,先把每个区域用白块做出来,布局做熟练了再开始填内容 比如这个 v 左侧区域,可以先把主楼 回复 新回复框 这几个白块做出来,然后在回复里拆出子楼层,然后分出回复的头像、标题、正文区域,一点点循序渐进来 这种拆布局拆两次就习惯了,很简单 |
9
murmur 213 天前 1
@b1t 你一开始不考虑 position: absolute 这些用法或者用 before ,after 写伪类,可以把所有的布局都按左右、上下拆分,这样写出来就简单的多,上手也快
|
10
Simle100 213 天前
当时因为 CSS 放弃了前端,实在是整不会
|
11
bzw875 213 天前 1
我亦无他,惟手熟尔。我当年是这么学习,一比一绘制 https://m.jd.com/的 html 、css 。上面图片保存下来;然后是 CSS 动画,过渡。可以开发者工具看它怎么写的
|
14
lovedebug 213 天前 1
谷歌的教程,还算写的很好的 https://web.developers.google.cn/learn/css
|
16
yKXSkKoR8I1RcxaS 213 天前
沒,順其自然就會了,然後越用越熟練,哪裏不會查哪裏,多看文檔。
|
17
linyongxin 213 天前
我以前也纠结 css 各种兼容和布局,后来发现,只要用 Twitter 出品的框架 bootstrap ,就不用那么麻烦
|
18
Jame00001 213 天前 1
html/js/css 是前端最基础的东西。正经前端简历上都不敢写这些,因为太基础了。你如果要用前端,起码吧基础看一下吧。
每次看到说自己不擅长写 y 样式就觉得在侮辱。好像“高级的”你百度一下就会了不屑于学这种低级的东西。逼都让你装了回头再啐一口。 |
19
Justin13 213 天前 via Android 1
盒子模型
流式布局 定位元素 bfc stacking context inline 行框 基线 flex grid 这些基本功学学就差不多了 剩下的用到再学 |
20
yanulg 213 天前 1
真没啥难的,又不需要你兼容老浏览器,以前什么垂直居中的 20 种方法,分割布局的各种奇怪 trick ,现在都能用 flex ,更复杂点的也能用非常直观的 grid ,现在能用到的属性看一看基本没有什么理解不了的,你无非是没法 1 天学会 30 天的知识就着急了
|
21
FeifeiJin 213 天前 via Android
我是决定永远也学不会 css 的。
|
22
Guidoo 213 天前 2
布局就 flex 和 grid 一把梭,找几个常见的布局,多练几次就会了
|
23
Puteulanus 213 天前 3
——“但是 css 是来回调试,经常不生效,或者位置奇奇怪怪”
浏览器的元素查看面板能看到每个元素的样式和计算样式,遇到不生效或者位置奇怪的时候,顺着选择器、继承这些去看,找到确定的原因。 它不是平白无故“失效”和“位置奇怪”的,你不理解的地方就是你该去学习的地方,每次搞懂了下次再出问题的时候对背后的逻辑分析都会清晰一点。你如果只想“换个属性试试”、“换个布局器试试”这样去试,等于每一次面对的都是全新的问题。 |
24
43n5Z6GyW39943pj 213 天前 1
flex 够用, 炫酷的那些一般也玩不转
可以说精通 js, 但没人敢说精通 css |
25
murmur 213 天前 1
@MorJS 精通没必要,贴图解决 100%问题,贴视频解决 120%问题,复杂需求用 unity 或者 unreal 做解决 200%问题
css 不是万金油,当年还在玩 IE 年代的 css 动画,支付宝的背景就开始贴完整视频了 |
27
crocoBaby 213 天前 1
flex 一把梭,秀操作就学 grid,想了解布局的前世今生就从 table,float,margin,position 看一遍
|
28
b1t OP @yanulg 老哥说的对的,其实也是因为一看好像就懂了,所以感觉自己就行了,其实还是得多学学想想练练
@Puteulanus 你如果只想“换个属性试试”、“换个布局器试试”这样去试,等于每一次面对的都是全新的问题。 ------------ 老哥,太懂了。哈哈哈哈,感谢分享查找问题的方法 |
29
DOLLOR 213 天前
CSS 最基本的功能就是调间距、大小、色彩,搞明白 margin 、padding 、border 、font-size 、color 、background ,就能干很多活了。
布局方面优先考虑 flex 。当然有的人 flex 怎么都学不会,用 inline-block 也不是什么可笑的事情。 如果只是想快速出东西,直接用组件库就好了。 |
30
angrylid 213 天前 1
本站怪现状之一,一群人日常嘲笑前端切图仔,而另一群人不会写 CSS
差不多就是 15 楼讲的那样,先把最基本的这些概念学完了。剩下的就是多写多练了。 |
31
lneoi 213 天前
文档流 知道浏览器对常见的元素默认的处理特性 然后可以开始 F12 对着调需要的效果
|
32
wuyiccc 213 天前 1
直接 flex 干一切
|
33
wuyiccc 213 天前
我现在已经放弃思考 css 到底怎么玩了,直接 flex ,可以解决我 95%的问题。剩余 5%的问 gpt, 实在不行!important
|
34
arfaWong 213 天前
模仿和使用练习
|
35
particlec 213 天前 1
display: flex;
align-items: center; justify-content: center; 写的最多的代码了 |
36
storyxc 213 天前
这玩意没别的办法,就是多写,去年写了两个自用的小项目,当时调整样式已经很得心应手了。这俩小项目搞完没碰前端,就又忘的差不多了。
|
37
wu67 213 天前
用多了就熟了.
前端仔表示当年看了一星期就上手了, 至于干活, 当然是 flex 一把梭. 如果常见业务 flex 解决不了, 那是业务有毛病, 得花更多时间去布局, 而且大多数情况下其实客户根本不关心这种效果... |
39
jy02534655 213 天前
先学习下 css 选择器,了解下 css 权重这种基本功吧
|
40
ARslince 213 天前 via iPhone
|
41
cgpiao 213 天前
现代的 CSS 多简单,又不考虑远古,远古 float 是恶心到极致。
flex 就能搞定 99%的布局问题,其他的就属于元素个别样式了。 |
42
zwpaper 213 天前
简直是深有体验。。。和 op 一样,也是想着直接上手,项目里学习,结果发现 css 这玩意就是 op 总结的,要不不生效,要不就各种奇怪,感觉还是没用对方法
|
43
jqtmviyu 212 天前 1
flex 和定位能解决 99%的问题.
然后就是 css 三大特性, 层叠(覆盖), 继承, 优先级(权重) |
44
dj721xHiAvbL11n0 212 天前
那我建议你还是拿主题改,这样更好,不然兴趣都磨光了
|
45
AirCrusher 212 天前
@reDesign 这个好酷,请问导航栏动效是怎么实现的呢
|
46
Ritter 212 天前
月经贴了
|
47
freezebreze 212 天前
直接 tailwindcss 边用边学习 css 知识 用过都说好
|
48
Ashore 212 天前
flex 就够用了
|
49
laobobo 212 天前
你这才刚入门就难,想学的深入就更难了!
|
50
abcdxe2v 212 天前
css (的深入)是前端最难的东西。
“css 是来回调试,经常不生效,或者位置奇奇怪怪” 正常,99%的前端都不知道一个属性到底为什么造成了某个奇怪的效果/位置。真想理解得看这个东西 https://drafts.csswg.org/ ,太乱了。 |
51
NerbraskaGuy 212 天前
CSS 最大难点是吃经验和很多反直觉的遗留问题,新手不要先想着兼容 ie 那些了,最快方法应该就是找现成的例子仿写。
|
52
WhateverYouLike 212 天前
边做边学不一定是个好办法,因为低水平重复调试会浪费时间,最起码掌握了百分之七八十之后边做边学才比较有效果。
|
53
coolmint 212 天前
tailwind 教程看看直接就开始一把梭了,直接项目中用,遇到问题就 gpt 或者翻翻文档,实战下来没啥问题,普通的 css 就算之前学过现在也不是什么都记得了。
|
54
xuhai951753 212 天前
https://devv.ai/zh 直接问你要什么效果,直接出码。
所以重点还是在于你要知道 css 大概能做到怎样的效果 |
55
walker1024 212 天前
招个熟练 CSS 的
|
56
libasten 212 天前
先找个架子,然后现在搜索,现在是问 ai
|
57
lianxiben 212 天前
多写,多踩坑,没有捷径的
|
58
seven123 212 天前
tailwindcss
|
59
DT27 212 天前
要学会 F12 开发者工具排查。
|
60
codehz 212 天前
@murmur 但是 flex 有 Safari 的各种 bug (布局尺寸改变相关)
然后导致很多抽象失效,因为单独测试的时候都是好的,组合起来 safari 就炸了 ( flex in flex @Puteulanus Safari 还真的可以出现 devtools 里给出的框是正确的,但渲染出来就是炸的情况,还能在 devtools 打开后(因为改变了页面宽度导致 reflow )自动恢复,有时候真的只能换个布局() |
61
Leon6868 212 天前
布局需要多练习,先拆解别人的布局方案,然后尝试对着设计稿复现
|
62
me1onsoda 212 天前
为什么好多后端 boy 都很难上手 css🤣
|
63
xlzyxxn 212 天前
可以先练习使用 css 连接数据库,熟悉之后就可以写写布局,动画了
|
64
dif 212 天前
这玩意属实玩不转,学 scala 、go 、python 、java 都没这么难。反正就是各种尝试。最关键的,项目还是 scss 。
|
65
chengxy 212 天前
Tailwind CSS 并不能提升你的 CSS 技能
|
66
draguo 212 天前 1
因为 CSS 是没有逻辑可言,推荐看一下这个 https://zhuanlan.zhihu.com/p/29888231 ,反正我是因为 css 放弃前端的
|
67
morizawatt 212 天前
多写就背下来了,我是设计,自学的 html 、css ,js 学不了一点...
从改网页模版开始学的,然后自己设计、敲代码搭了个人站 也是三四年前了,现在网页端刷知乎摸鱼用最多的是 display:none😗 |
68
lycpang 212 天前
熟能生巧吧。。。做得多了自然就懂了,就是多个样式之间的关联关系,出了问题自己搞不定就问 chatgpt ,只要你描述的够清楚,他就能一下吧 css 全给你搞定
|
70
CHTuring 212 天前
Grid 布局: https://www.joshwcomeau.com/css/interactive-guide-to-grid/
Flex 布局: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/ 把这两篇文章看完,并且跟着敲一遍。保证你布局相关肯定没问题。 |
71
Lemonadeccc 212 天前
@FeifeiJin 好多年不见飞飞了
|
72
Puteulanus 212 天前
@codehz 那你不也搞清楚了原因,还能跟人分享这个案例(摊手)
而不是“有时候别的地方能用的样式不知道为啥突然就不好使了,换个布局就好了” 我们有一回项目临近尾声了甲方突然说他们员工用的都是苹果,要求保证 Safari 用起来正常,QA 一测茫茫多的地方显示有问题,开发头都大了 |
73
DemonQ 212 天前
可以借鉴培训班的思路:照着淘宝京东再来一个复杂点的网站抄,只抄静态浮现,原模原样浮现,有不会的就打开调试看看人家怎么做的,抄两三个基本 css 就是信手拈来了,归根结底还是锻炼少
当然这是基本的 css 训练,至于什么兼容处理,动效实现就是自己积累了 |
74
label 212 天前
学下弹性盒子, 一把梭, 简单的一批
|
75
davin 212 天前
Chrome 还没诞生的年代,靠着各种 CSS CHM 手册、CSS 禅意花园、IETester 和 Firebug 也熬过来了。熬死了那个年代的 IE 、Opera 、Flash 、Silverlight 、Adobe AIR...
|
76
DemonQ 212 天前
浮现-->复现
|
78
dog82 212 天前
css 的浮动我至今都没搞懂
|
79
codehz 212 天前
@Puteulanus 但确实是上下文相关的,我的意思是,同样一个组件,放第一个位置,嗯,没问题,前面随便加一点别的,就整个分崩离析,完全没办法用逻辑解释(当然,chrome 什么的都是正常的),就是 safari 布局引擎本身的 bug
而且主要出现的场景就是 flex layout ,不过很多时候能被 grid 替代,换成 grid 实现一样的效果就不会有问题() |
80
wentx 212 天前 6
|
81
SimonWoo 212 天前
遇事不决 position
|
82
gitignore 212 天前
需不需要手把手教😌在线教学,红包🧧你看着给
|
83
maxmeng936 212 天前
很简单,你只要在浏览网页时也想着怎么布局就行。遇到不会的,打开控制台看一下。
|
84
wzy44944 212 天前
感觉 css 就不属于编程语言,顶多算是设计语言,就是给组件设置属性
|
85
supuwoerc 212 天前
flex + grid 解决绝大多数布局,再补充问一问 gpt ,做几个页面就熟悉了
|
86
mumbler 212 天前
还手动写?让 gpt4 写就行了
|
87
agagega 212 天前 via iPhone
现在 flex 一把梭,高级点的加上 grid ,absolute 、float 这些东西都不太会用到。css 难是因为它各种属性不正交,相互之间会影响,外加浏览器会自带一些属性。但 css 好歹(大部分)是无状态的,调试起来比 js 操纵的布局容易很多。
|
88
guxin0123 212 天前
IE6
|
89
yanyao233 212 天前 via Android
之前也一直觉得 css 难,但实际用了之后发现现代 css 挺简单的,flex grid 布局无脑套,其他的样式看着 tailwind 文档自己挑
|
90
oakland 212 天前
css 真的难,没什么统一的组织理论,都是零零散散,tailwind 不全能,postcss 也不全能,全靠各种拼凑。
你要说做个什么效果,那还好,但是要把整个项目组织起来,真是头大 |
91
xrzxrzxrz 212 天前
主业是后端。如果我写 css ,那就是面向玄学,开 F12 ,各种调调调,效果对了就复制贴到代码里面。
|
92
Rwq8xlHrBAi0ct2w 212 天前
@reDesign 挺不错的 想问下开源没有
|
93
jsq2627 212 天前
现在 flex grid 感觉已经很简单了
要想当年要兼容 IE6 的时代,用 flex 都要畏畏缩缩的 |
94
leegradyllljjjj 212 天前
又不是不能用,业务实现就行,丑点怎么了
|
95
kneo 212 天前 2
CSS 就是很难。
1. 一个效果有无数种实现。比如一个像素也有十几种常见做法,我都会。但是用哪个好?——选择障碍症自杀了。 2. 想实现一个效果,改来改去总是差几个像素。——强迫症自杀了。 3. 抄别人的实现,抄过来几百行代码,能用,但是这么多垃圾代码我不允许。删删删,小不小心效果删没了……加回来几行,好像又能用了,继续删删删。删了一晚上,妈的算了我自己写吧。——洁癖症自杀了。 3. CSS 动画,有现成的,拿过来就能用。啊,要我改个特效?——智力不足者自杀了。 4. 丑?丑是我的问题吗。让你招个设计你不招,非让老子写,说了老子不会做设计。——无产者自杀了。 |
96
NeoChen 212 天前 via iPhone
不知道还有多少人记得 web 标准化的历程…blueidea 到死还是 table 布局
|
97
Adelell 212 天前 via iPhone
不管啥布局,直接 position absolute 一把梭,统统写死。
|
98
Al0rid4l 212 天前
现在的人 CSS 都不过 MDN 了吗...当年把 MDN 和 CSS 权威指南都过了一遍, 从此 CSS 简单轻松
|
99
f14g 212 天前 via Android
感觉楼上有位专业的说的非常有道理的:flex+grid 解决大部分问题、复杂的动画问题完全可以上图片或视频,更进一步的需求则用诸如 unity 、three js 、d3 等前端库了。
综上说,“CSS 难学”真的不是做前端的一个障碍。更何况现在还有 flutter ,如果觉得 CSS 难学,完全可以用其他框架替代嘛 ( BTW ,我觉得 flutter 描述界面那个表现力还不如 X ( HT ) ML+CSS 呢) |
100
rowink 212 天前
建议是找个网站写,手搓博客小工具之类的,还有就是参考别人界面布局的样式,模仿着写,熟练后自然就会了
|