css 好难,你们怎么熟练把 css 用起来的?

284 天前
b1t  b1t

在学前端,看了 React 、Nextjs

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

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

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

14231 次点击
所在节点   CSS  CSS
113 条回复
murmur
murmur
284 天前
都 2024 了,不需要做 IE 兼容性,不要求你背八股文写各种奇奇怪怪的 hack ,有 flex 布局,直接源生支持--var 和 calc

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

学不会就是菜,难什么,你没好好学而已
murmur
murmur
284 天前
抛去各种炫技、动画,css 本身是切分的艺术,要学会拆布局,拆成几个部分,找出每个部分的规律,一层层拆下去
b1t
b1t
284 天前
@murmur 大佬,确实想着着急出东西,想着边用边学,不过不尽人意。目前在尝试着重新实现一边 v 站,这个过程基本要靠 gpt 完成布局,自己 css 写起来很吃力,如果掌握 flex 布局,是不是就能应对大部分场景了?
reDesign
reDesign
284 天前
刚好也在用 nextjs 和 tailwind 搞博客,放一个链接在这,https://www.augusts.me
我的答案就是先用起来,边解决问题边熟练。就像学习 office 一样,看完《 word 操作大全还是不会用 word 》,能解决自己需求就好了。
InDom
InDom
284 天前
我现在前段的状态就是,你让我微调边距,字体,样式都还行。

但你让我搞布局,我想上吊...
hevi
hevi
284 天前
可以快速把《响应式 Web 设计 HTML5 和 CSS3 实战(图灵出品)》(俗称瓢虫书)看看,我当时是用它入门的。
然后把阮一峰老师的 flex 和 grid 布局文章都看看,就可以莽了
murmur
murmur
284 天前
@b1t gpt 可以写代码,但是得自己练习,毕竟 gpt 出的东西和已有项目的风格不一样,你乱写未必过的了代码审查

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

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

这种拆布局拆两次就习惯了,很简单
b1t
b1t
284 天前
@InDom
@hevi
啊,所以布局方面,大家基本上都是通过 flex 布局一把索是嘛
murmur
murmur
284 天前
@b1t 你一开始不考虑 position: absolute 这些用法或者用 before ,after 写伪类,可以把所有的布局都按左右、上下拆分,这样写出来就简单的多,上手也快
Simle100
Simle100
284 天前
当时因为 CSS 放弃了前端,实在是整不会
bzw875
bzw875
284 天前
我亦无他,惟手熟尔。我当年是这么学习,一比一绘制 https://m.jd.com/的 html 、css 。上面图片保存下来;然后是 CSS 动画,过渡。可以开发者工具看它怎么写的
b1t
b1t
284 天前
@murmur 大佬好方法,感谢提供思路
b1t
b1t
284 天前
@Simle100 css 给人感觉看着不难,一下手就不是那么会事了,得练一练
lovedebug
lovedebug
284 天前
谷歌的教程,还算写的很好的 https://web.developers.google.cn/learn/css
b1t
b1t
284 天前
@lovedebug 我去看看,谢谢
yKXSkKoR8I1RcxaS
yKXSkKoR8I1RcxaS
284 天前
沒,順其自然就會了,然後越用越熟練,哪裏不會查哪裏,多看文檔。
linyongxin
linyongxin
284 天前
我以前也纠结 css 各种兼容和布局,后来发现,只要用 Twitter 出品的框架 bootstrap ,就不用那么麻烦
Jame00001
284 天前
html/js/css 是前端最基础的东西。正经前端简历上都不敢写这些,因为太基础了。你如果要用前端,起码吧基础看一下吧。
每次看到说自己不擅长写 y 样式就觉得在侮辱。好像“高级的”你百度一下就会了不屑于学这种低级的东西。逼都让你装了回头再啐一口。
Justin13
284 天前
盒子模型
流式布局 定位元素
bfc
stacking context
inline 行框 基线
flex grid
这些基本功学学就差不多了
剩下的用到再学
yanulg
284 天前
真没啥难的,又不需要你兼容老浏览器,以前什么垂直居中的 20 种方法,分割布局的各种奇怪 trick ,现在都能用 flex ,更复杂点的也能用非常直观的 grid ,现在能用到的属性看一看基本没有什么理解不了的,你无非是没法 1 天学会 30 天的知识就着急了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1038997

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX