V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lovemaoyun
V2EX  ›  程序员

后端程序员学习前端,你门是怎么掌握 css 的

  •  
  •   lovemaoyun · 2023-09-09 20:40:44 +08:00 · 3709 次点击
    这是一个创建于 441 天前的主题,其中的信息可能已经有所发展或是发生改变。

    感觉学个 js vue 啥的不难,但 css 这个东西感觉反人类的,大家是怎么学习的,有什么好的方法没

    40 条回复    2023-09-11 15:21:12 +08:00
    zackkson1991
        1
    zackkson1991  
       2023-09-09 20:48:22 +08:00   ❤️ 1
    要不上手 TailwindCSS 。 上面有它自身的说明。
    SadBox
        2
    SadBox  
       2023-09-09 20:59:05 +08:00
    tailwindcss
    pengtdyd
        3
    pengtdyd  
       2023-09-09 21:04:16 +08:00
    css 难吗???????????????
    liuw666
        4
    liuw666  
       2023-09-09 21:14:35 +08:00 via iPhone
    flex ,宽高,margin ,padding 。 差不多就行了…
    kongkx
        5
    kongkx  
       2023-09-09 21:16:35 +08:00 via iPhone
    盒模型,流式布局。其他属性还是很直观的,过一遍,留点记忆就好

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow
    peterlitszo
        6
    peterlitszo  
       2023-09-09 21:22:20 +08:00
    tailwind css 的确可以的,你用它写代码的时候也可以关注一下它对应了哪些 CSS 属性。然后一些基本的 CSS 概念也可以看看。
    DOLLOR
        7
    DOLLOR  
       2023-09-09 21:22:47 +08:00   ❤️ 1
    最基本的盒模型,调宽高、边距,调文字、背景颜色,然后就是 flex 、grid 布局,剩下的就是边用边积累。
    z1645444
        8
    z1645444  
       2023-09-09 21:28:59 +08:00
    先看盒模型,其他属性的概念参照富文本编辑器的概念、Photoshop 这类图片处理软件的元操作进行联想,写着写着好像就会了,就够了,精通感觉不太可能(
    kneo
        9
    kneo  
       2023-09-09 21:40:00 +08:00 via Android
    最重要的是理解 css 能做什么,不能做什么。至于细节,基本都是现学现卖,然后忘光,下次重学。
    liberty1900
        10
    liberty1900  
       2023-09-09 21:49:35 +08:00
    CSS 是个好名字,全称是 Cascading Style Sheet ,中文是层叠样式表

    有层叠就有样式继承和优先级问题,这是 CSS 最基本的知识,可是好多人连这个都没意识到

    其次才是盒模型,布局,响应式

    太多人指望一个下午搞定 CSS ,以为自己是 AI 吗
    mmdsun
        11
    mmdsun  
       2023-09-09 21:51:22 +08:00   ❤️ 1
    用框架就好,别为难自己。bootstrap 都行。
    fantastM
        12
    fantastM  
       2023-09-09 22:00:17 +08:00
    盒模型
    thetbw
        13
    thetbw  
       2023-09-09 22:05:52 +08:00
    css 要多记,之前关注了一些前端的博主,经常看看他们的文章或者短视频,内容都不是很长,多是介绍一些前端 html css 特性,时间久了就记住了
    besscroft
        14
    besscroft  
       2023-09-09 22:12:48 +08:00
    tailwindcss 一把梭
    ryomahan
        15
    ryomahan  
       2023-09-09 23:59:41 +08:00
    找几个没什么动画但是比较美观的网站(例如各种新闻门户网站)去仿写静态页面,仿写几个页面之后基础的就会了。至于说熟练掌握,CSS 这个东西估计只有真正的大佬能熟练掌握。
    wanderingaround
        16
    wanderingaround  
       2023-09-10 00:31:27 +08:00 via Android
    成为这方面专家有点小难,会常用的还是可以做到,和后端一样,你不可能精通吧,除非大佬,遵循 2 8 原则就可以了,现实当中用起来,你就算把那几本 CSS 书看完都没有,只有运用你才能加深理解。
    wqq096737ink
        17
    wqq096737ink  
       2023-09-10 01:30:05 +08:00
    不是只有 css ,现在写 css 的很少了吧, 都是 sass scss less
    233373
        18
    233373  
       2023-09-10 09:09:01 +08:00
    掌握不了,放弃了
    xuanbg
        19
    xuanbg  
       2023-09-10 09:47:54 +08:00
    主要是对页面的结构要有一个清晰的定义,要明白怎么一层层嵌套的。每层对应一个 css ,就很好写。
    cr51k2
        20
    cr51k2  
       2023-09-10 09:56:24 +08:00 via Android
    跟着 b 站培训班做几个 div 网页,后面不知道
    PTLin
        21
    PTLin  
       2023-09-10 09:59:17 +08:00
    https://book.douban.com/subject/35021471/
    我看的这本,感觉很适合入门
    iorilu
        22
    iorilu  
       2023-09-10 10:34:51 +08:00
    学习一下
    说实话, 我也几次想学 css
    最终还是没学到
    又空再试试,可能直接学习下 TailwindCSS

    我目标也不是研究多少原理, 只是想相对自由调整一些 css
    dingyaguang117
        23
    dingyaguang117  
       2023-09-10 13:24:25 +08:00 via iPhone
    主要是布局 这个学下来就差不多了 https://zh.learnlayout.com
    liuhai233
        24
    liuhai233  
       2023-09-10 14:21:56 +08:00
    我选择 chatgpt
    wenzhuo
        25
    wenzhuo  
       2023-09-10 14:39:01 +08:00
    html 和 css 知识并不连贯,体系化并不明显,基本就是看一个会一个,然而,前端迭代速度快,多且杂,真后端的话,别搞太多,搞个教程看看就行
    davin
        26
    davin  
       2023-09-10 16:18:11 +08:00
    记得当年入门看的书叫做《 CSS 禅意花园》
    wanei
        27
    wanei  
       2023-09-10 16:18:40 +08:00
    徒手撸一个简单的网站,保证 html css js 都有基本的掌握
    qiumaoyuan
        28
    qiumaoyuan  
       2023-09-10 16:42:46 +08:00
    没有 IE 的话,CSS 还挺简单的。
    Orange2269
        29
    Orange2269  
       2023-09-10 16:49:15 +08:00
    多练几年就会了
    kljsandjb
        30
    kljsandjb  
       2023-09-10 17:20:32 +08:00 via Android
    去看看 head first html & css, 精髓都在里面
    nexo
        31
    nexo  
       2023-09-10 19:14:37 +08:00
    @fantastM 这是你自己做的还是买的 求推荐
    fantastM
        32
    fantastM  
       2023-09-10 19:22:08 +08:00
    @nexo #31 推特的图,图里有作者 id
    sub166
        33
    sub166  
       2023-09-10 19:23:42 +08:00
    我是给 obsidian 写了个主题,然后就掌握了
    cheny4work
        34
    cheny4work  
       2023-09-10 20:01:59 +08:00
    tailwind
    22F41628gA98q4Lx
        35
    22F41628gA98q4Lx  
       2023-09-10 22:53:26 +08:00
    首先是 taildwind css ,直接用这个开始写。
    其次是,看大佬们是怎么写的啦,比如 shadcn 的博客。比如你想做一个 sidebar 或者 header 或者 footer 都可以参照他的来写。
    最后是,学会用英文搜索。
    kaiki
        36
    kaiki  
       2023-09-11 09:28:50 +08:00
    看谁的网站好看,复制他代码,久而久之就都记住了
    abcbuzhiming
        37
    abcbuzhiming  
       2023-09-11 10:19:47 +08:00
    @pengtdyd CSS 非常非常难。

    知乎有个问答里,对 CSS 的难度做过分析,首要问题就是 CSS 是不正交的,你改变了 A ,会奇怪的影响到 B 。即它存在大量的隐式条件和输入,导致你在推导结果的过程中,在大脑里必须得预加载条件输入方案,而且这个方案数量并不低。大约有十几种组合,这些组合是你要背的。绝大部分传统程序员,是习惯以逐行代码推导来进行思维过程的,天生不适应这种非正交系统。

    其次就是 CSS 的调试工具至今没有得到足够的改善,要知道 CSS 调试的目的往往是为了解决“这个该死的盒子为啥在这里?”或者“那个该死的样式为啥就不起效”之类的问题,然而目前的浏览器调试工具,只能提供当前盒子受影响的条件参数,但是很多时候,影响这个盒子样式的原因,在十万八千里之外的另外一个盒子身上(这又是该死的非正交问题)。这和编程调试器在大多数能很方便把问题定位在一个非常小区域的上下文之上,很方便的找到问题,完全不是一个级别的。恕我直言,CSS 调试工具目前的能力非常落后。这种落后在于 CSS 系统里任何一个盒子的样式是受到诸多不在这个盒子上的,其它盒子的参数影响,最后被浏览器推导出来的,然而浏览器的 CSS 调试工具却不具备逆向推导的能力。这导致很多时候非常难以发现问题在哪里,于是我们会看到很多自称学会 CSS 的人,他们也改不了别人的 CSS 源码,他们解决问题最常见的一招就是:按自己的习惯完全重新写一遍。

    所以从上面你也看到,很多自认为学会了 CSS 的人,其实并没有学会 CSS ,它们只是熟练的 CSS 搬砖工而已,判断这个人是否真的掌握了 CSS ,要看它能不能对一个已经存在的,且比较复杂页面的 CSS 代码进行推导和修改,即能能准确的分析中的某个盒子的样式到底是如何被影响的,然而通过那十几种组合,快速的研究出改哪里会生效。而现实中却往往是:md 搞不懂为啥,重写一遍!

    所以 CSS 真的是很难,不过这个难是相对程序员说的,因为 CSS 是另外一种思维,它最初被设计出来是为了排版系统准备的,也许在排版领域,这东西设计的很好。但是换到程序员,这种从一开始就是培养逐行推理思路的领域,天生就不匹配。所以,学不会就学不会吧,像我至今就不敢说自己学会了 CSS ,虽然我有时候甚至可以用 CSS 问住搞前端的同学,但是我自己是很清楚的,我不会 CSS
    abcbuzhiming
        38
    abcbuzhiming  
       2023-09-11 10:21:17 +08:00
    @zackkson1991 请教 TailwindCSS 这个东西和 bootstrap 的区别在哪里?
    zackkson1991
        39
    zackkson1991  
       2023-09-11 12:46:38 +08:00 via Android
    @abcbuzhiming bootstrap 就是一个组件库,但是也有类似于 tailwind CSS 内置自定义 css name. 参考官网。
    penll
        40
    penll  
       2023-09-11 15:21:12 +08:00
    确实,主要是布局,其他,都是基础的。
    学个 flex 布局,一把梭
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2810 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 14:01 · PVG 22:01 · LAX 06:01 · JFK 09:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.