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

对于后端开发,如何学好 CSS?

  •  1
     
  •   xiaotianhu · 44 天前 · 7623 次点击
    这是一个创建于 44 天前的主题,其中的信息可能已经有所发展或是发生改变。
    对于主要写后端的开发来说,感觉学 CSS 挺蛋疼的。
    从 PHP 转学 C++都没有这么痛苦,总觉得 CSS 是很 slippy 的,捉摸不定;细节特别多,又不够系统
    看起来知识都会了,实际写起来,不是宽了就是窄了,要不就是差一点,想弄对经常靠运气。

    学习方式比较 old fashion ,不喜欢看视频
    想问问有什么书和教程比较系统的讲解 css 的吗。自己做点东西还是得学好这个。
    目前主要用 Vue ,配合一些 Element 之类的 UI 库,想做点东西已经容易很多了,但是想写好,高效,还是得下点功夫了。

    求推荐,感谢
    120 条回复    2022-08-20 13:47:19 +08:00
    1  2  
    angrylid
        1
    angrylid  
       44 天前 via Android   ❤️ 38
    前端都不敢想这个话题。
    murmur
        2
    murmur  
       44 天前
    学会按需求搜索,当然得 google ,比如你想做一个分栏布局,做一个居中,做一个渐变

    然后就是各种熟悉了,面试你要掌握多种方法,最优解,实际开发熟练一两种就够了

    css 现在很系统了,布局学个 flex ,剩下的都是按需求学习
    jazzg62
        3
    jazzg62  
       44 天前   ❤️ 14
    去他妈的 css
    Kenmin
        5
    Kenmin  
       44 天前
    @Kenmin 书有点老,作为入门还是不错的。
    h1104350235
        6
    h1104350235  
       44 天前
    不用刻意去学,现在蓝湖都自带样式代码。
    可以找个插件做代码转换,把时间花费在 JS 才是重点
    stoluoyu
        7
    stoluoyu  
       44 天前
    忘了怎么学的了,好久没写 css 了
    css 够用就行了
    murmur
        8
    murmur  
       44 天前   ❤️ 1
    都 2022 年了,还对 css 抱有敌意的,除了菜,没别的理由嗷

    以前说做 ie6 兼容性,语法不当人,可以骂,都 chrome 年代了,起手就是 flex 、grid 布局,这很难吗

    还有人是活的,规则是死的,你不是后端么,页面渲染什么是你自己定的

    nth 选择器弄不明白,自己在页面上加标志不丢人,比如 row-even ,row-odd ,row-first ,row-last 这些,不比 nth 选择器好理解?
    Kenmin
        9
    Kenmin  
       44 天前   ❤️ 1
    平时开发善用 MDN 文档 https://developer.mozilla.org/zh-CN/
    TWorldIsNButThis
        10
    TWorldIsNButThis  
       44 天前
    直接看 tailwind
    另外学一下各个 html 元素的固有 css 属性,不然出现非预期的行为很难排查
    leeggco
        11
    leeggco  
       44 天前
    常用的也不过十来个属性而已,多用就好了
    debuggerx
        12
    debuggerx  
       44 天前
    其实就那几个套路 别多想 写写就好了
    越是想所谓“系统、高效”学习 越是会走弯路 除非是面向面试 不建议浪费这个精力
    murmur
        13
    murmur  
       44 天前
    @h1104350235 js 是看不到的东西,写的稀烂没人管你,能跑起来就赢了,css 是脸面,css 写的烂页面效果出不来,直接交差都交不了
    xiaojun1994
        14
    xiaojun1994  
       44 天前
    tailwindcss
    davin
        15
    davin  
       44 天前   ❤️ 2
    CSS Zen Garden 即可。看看现在所谓的 SPA / SSR ,只会 div 套 div ,一点 semantics 都没有,还不如当年的 table 🐶
    encro
        16
    encro  
       44 天前
    CSS 需要学吗?看 W3CSchool 半天就看完语法了,这是一门需要动手的标记语言!

    建议学习路径:

    1, 半天看 CSS 语法了解大概内容;

    2,了解 bootstrap ,做一个项目;

    3,了解 tailwind 和 windcss ,做一个项目;

    学习 CSS 的办法就是动手,参考,改造。
    zjsxwc
        17
    zjsxwc  
       44 天前   ❤️ 1
    我最开始也是写后端的,后来兼前端,学 css 的话,
    建议找一本 css 教程从头到尾过一遍,我当时看的是 Keith-J-Grant 的《深入解析 css 》,
    然后就是 看看别人写的 css 效果,找几个项目开始写 css 啦。
    ns09005264
        18
    ns09005264  
       44 天前
    用 tailwind 这样的 css 原子库,可以从中学到一些 css 知识
    不过,要使用 tailwind 本身也要会一点 css ,有点鸡生蛋的意味。
    CathayChen
        19
    CathayChen  
       44 天前   ❤️ 1
    同为后端,我也被这个问题纠结过。
    我觉得不是 CSS 我们学不好,而是没有足够的审美去写一个好看的样式。
    如果你拿着一个设计好的 UI 图去写,其实也是可以写得好的。
    towry
        20
    towry  
       44 天前
    做前端的。

    感觉前端最痛苦的点就在一些兼容性上,这个不支持那个不支持。
    zhuangzhuang1988
        21
    zhuangzhuang1988  
       44 天前
    P233
        22
    P233  
       44 天前
    @CathayChen 所谓的 design concepts
    keyrinrin
        23
    keyrinrin  
       44 天前
    谁还敢说前端简单的,css 比一比
    xiaotianhu
        24
    xiaotianhu  
    OP
       44 天前
    @Kenmin
    感谢推荐,看一下。
    murmur
        25
    murmur  
       44 天前
    @davin div 省事啊,div 没有什么初始化属性,语义字段有初始化属性,如果忘了 reset 就等着处理样式问题吧
    Kakarrot
        26
    Kakarrot  
       44 天前
    CSS 感觉就是上手去调 去改 审查元素

    找到你的目标样式 审查元素 一个一个去掉 /添加 查看变化
    sunwei0325
        27
    sunwei0325  
       44 天前
    先写中文注释, 等 copilot 补全看看, 不行再改
    redford42
        28
    redford42  
       44 天前
    他不需要学,他就是背...
    kop1989smurf
        29
    kop1989smurf  
       44 天前   ❤️ 2
    做业务的界面样式,不管平台( Android 、iOS 、winform 、web ),其实就这么几个关键点:布局方式、对齐方式、距离、间隔方式、填充方式。
    剩下的都是以上的具体实现与简化。

    只有那种海报展示页,有艺术成分的,对样式才会要求高。
    一般程序员能掌握业务展现就已经够用了。
    kop1989smurf
        30
    kop1989smurf  
       44 天前
    相对而言,更有技术含量的,是如何把一个既定 ui 拆解成合理的布局关系
    K1W1
        31
    K1W1  
       44 天前
    同后端,CSS 是典型"学会它只要五分钟,但要学精它,要花上一辈子"的东西。一直觉得 CSS 很玄学,因为你怎么写他都不报错。但得到的结果又总是"差之毫厘 谬之千里"。后来看了《[深入解析 CSS]( https://book.douban.com/subject/35021471/)》,对 CSS 印象有了很大的改观。
    darkengine
        32
    darkengine  
       44 天前
    不是专门搞 web 开发的话,学个 flex-box ,万物皆 div 就完事儿了😂
    rodrick
        33
    rodrick  
       44 天前
    css 要用眼睛去看 不要太用脑子去理解
    zzzmh
        34
    zzzmh  
       44 天前
    使劲写,尤其是从零写点什么,真正有用的东西,对标一下互联网大厂,正好练练审美方面。
    当然有个前提,你喜欢写这玩意,或者你工作用得上,要不然是折磨
    zcf0508
        35
    zcf0508  
       44 天前
    再 devtool 里把样式调好了再把代码复制到 css 里,不要想着直接写 css
    dabaoziwy
        36
    dabaoziwy  
       44 天前
    无他,唯手熟尔
    Veneris
        37
    Veneris  
       44 天前
    作为后端,从来没有试图系统性学过前端。
    写写 js 问题不大,但是样式顶多就是用用组件库,不符合需求的就捉急,只能摇人。

    这事拖了好几年,前几天终于下决心看一看 html + css 了,真的是完全从头看的,看的 mdn 。
    稍微看了看就发现之前过于想当然了,比如不知道 margin 原来会重叠,不知道元素分为块级和行内元素,不知道有些元素自带一部分属性。
    回头想想之前遇到的一些样式问题,原来都是因为自己连这种基础都不知道,所以即使调整各种属性也解决不了,还在那怪 css 垃圾。

    不过也没仔细的深入看,就看了一两天,知道大概都有什么属性,然后去上手 tailwind 了。
    尤其是现在基本都是 chrome ,兼容性都不错。
    虽然不能说多了解,但是无脑上 flex 布局,遇到点小样式问题用 f12 都能基本解决了,单纯是后端的话是够用了。

    现在也是刚学完,下一步怎么学还不清楚,没事就按 f12 看看感兴趣的网站样式都是如何实现吧。
    LavaC
        38
    LavaC  
       44 天前
    css 这玩意挺直观的啊,除了布局上可能稍微繁琐了点,宽高、颜色、阴影、字体大小、边框,跟用文字版 ps 一样。
    配合提示插件的话,就算你不知道有没有这个属性,直接打对应的英文单词也会提示给你。
    learnshare
        39
    learnshare  
       44 天前
    多写多练,10 万行很快就能上手
    从基本效果到复杂布局,从单一模块到组件化

    http://www.tup.tsinghua.edu.cn/booksCenter/book_07765201.html 自荐一下
    Veneris
        40
    Veneris  
       44 天前
    > #37

    总的来说,基础这个东西太重要了,最好是按文档读一遍,千万不能想当然,不然遇到坑是真不知道为什么。

    然后就是 ui 也是个技术活,单纯给给原形,我是想不出来该怎么设计好看的,涉及到颜色,间隔,文字大小,花里胡哨的特效,甚至文字和背景的对比度,完全没这个概念。

    就算有 ui ,脑子里还是没法第一时间反应出来,该怎么区布局,用哪些样式,毕竟 css 的细节太多。

    只能靠经验慢慢去堆。
    vevlins
        41
    vevlins  
       44 天前   ❤️ 3
    css 是不系统的,毕竟( UI )设计领域没有图灵模型,跟学自然语言一样,需要多学多练,可能有很多细碎的点。

    从大处讲:
    1. 学布局,flex 、float 、fixed 。
    2. 学盒模型,padding 、margin 、border 。
    3. 学基本样式,字体控制、box-shadow 、border-radius 。
    4. 学动画,hover 效果。

    还可以多用 awsome xxx 来找一些总结的成熟样式。遇见网站,多在脑海里练习布局。对于 css ,我的看法是够用即可,不追求成为专家。学到一定程度得学点设计基本概念,我写了一份 tailwindcss 出品的《重构 UI ( Refactoring UI )》的学习笔记,可以看看 https://vevlins.com/posts/48b97bb0/ ,节省 99 刀。
    darknoll
        42
    darknoll  
       44 天前
    后端都是卡在 css 这边
    dsa999
        43
    dsa999  
       44 天前
    我可能跟其他人不一样,我蛮喜欢写 css ,写 css 有一种写自然语言的感觉。
    css 的那套方法论跟 java 、c++这些一般编程语言都不一样。
    不要先入为主的去学习可能会比较好 ?
    lujiaosama
        44
    lujiaosama  
       44 天前
    原子化 CSS 还是有额外学习成本的, 原来的属性的新写法得记老半天. 优点是预设样式比较标准, 效果也比较好. 但是全局样式冲突很头疼(antd/element plus 都有), 最后还是放弃回到了预编译的写法.
    yaphets666
        45
    yaphets666  
       44 天前
    俺是专业前端,俺也觉得前端不系统,很细节,没办法,是这样的。一个一个背呗。
    qiumaoyuan
        46
    qiumaoyuan  
       44 天前
    感觉这东西就靠多练多积累经验。
    beiyu
        47
    beiyu  
       44 天前
    我觉得你这个 problem 的主要 reason 还是用的少了,可以尝试边 study 边用,碰到不会的时候网上 search 相关的资料,把这些方法名词都 remember 之后,写起来就如鱼得水了。
    zaul
        48
    zaul  
       44 天前 via iPhone
    tailwind css 一把梭哈?
    gowk
        49
    gowk  
       44 天前
    这里问题我也一直在思索,这个东西不实践不行,看过几本书,用的时候又歇菜了,终究不得其门而入
    wangtian2020
        50
    wangtian2020  
       44 天前   ❤️ 4
    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
    专业前端。
    其实学完 flex ,前端布局就可以当做是学完了
    在所有地方都用 flex 就行
    什么 float ,2022 年了可别再用了


    推荐几个属性
    transform: translate(10px, 10px);
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

    position: absolute;

    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;

    <div style="flex:1"></div>

    学完这些,css 可太简单了
    另外要会滚键盘,chrome devtools 的时候摁住"↓"滚完全部数据
    Slshaolong
        51
    Slshaolong  
       44 天前 via Android
    你在想啥 我看见 css 都头疼 这玩楞可麻烦死了
    chztv
        52
    chztv  
       44 天前
    这……感觉实战就是最好的学习方法,参与几个 PC 站、移动 H5 的开发,css 分分钟就会了
    我从 PHP 后端成功转型专业前端已经 10 年了
    um1ng
        53
    um1ng  
       44 天前
    本人前端,css 一生之敌
    Light3
        54
    Light3  
       44 天前
    大哥别骗人了 写 php 的咋会不会写静态页面嘛
    不会写 吃不上饭的啊 之前
    xyqhkr
        55
    xyqhkr  
       44 天前
    head first html and css
    qzhai
        56
    qzhai  
       44 天前
    本人前端, toC 。
    怎么说,我觉得 CSS 都不应该算语言,因为毫无逻辑。
    只要记住属性就可以用。
    比 js 简单太多了。
    SxqSachin
        57
    SxqSachin  
       44 天前
    学前端一定要看 mdn
    code4you
        58
    code4you  
       44 天前
    多写吧

    写了 你就不讨厌了

    你不熟悉 ta 你就厌倦 ta

    不过说实话 我熟悉了 css 也依旧讨厌 css 花 UI 界面太花费时间了
    lifesimple
        59
    lifesimple  
       44 天前
    多看多写吧 不过一般 crud 的项目基本都组件库支持很少自己手写样式
    molvqingtai
        60
    molvqingtai  
       44 天前
    搞清 flex, 搞清 static relative fixed absolute sticky 几个定位的区别,基本能完成 80% 需求

    初学者不要使用 float
    liuw666
        61
    liuw666  
       44 天前 via iPhone
    感觉够用就行,不需要搞太复杂
    wu67
        62
    wu67  
       44 天前
    css 其实还行, 要简单有简单的写法, 要难也能豆腐雕花. 基本上你找几个前端仔过来切同一个页面, js 部分的逻辑大同小异, 但 css 部分的代码, 大概有几个人就会有几种写法....

    所以你看即使是卷王一般的前端面试, 也比较少问 css 的详细问题的, 即使有, 比重也不大....
    biglion666
        63
    biglion666  
       44 天前
    我觉得前面提到的网站都不太好,我来推荐一个

    https://css-tricks.com/
    yikyo
        64
    yikyo  
       44 天前 via iPhone
    比十几年前好多了,当时适配多浏览器真的要疯
    chloerei
        65
    chloerei  
       44 天前   ❤️ 1
    在理解 CSS 语法之后,我觉得接下来遇到的问题是不知道什么是好的设计。

    推荐一本书:《写给大家看的设计书》。书的内容很少,但是很精辟,遵循里面的原则就可以让设计感大不一样。

    实践部份,可以找一个好看的博客主题,像素级拷贝到自己的博客上。拷贝的过程就会研究这个效果是怎么实现。
    mynameislihua
        66
    mynameislihua  
       44 天前
    文档流,行内元素,块级元素,盒模型,定位,再加一个 flex 布局就 OK 了。
    placeholder
        67
    placeholder  
       44 天前
    像什么 flex 啊,grid 之类的布局,直接网上找拖拽工具拖出来,然后抄代码这样学习,

    其他属性查参考手册,
    wangyzj
        68
    wangyzj  
       44 天前
    得加钱
    Simle100
        69
    Simle100  
       44 天前
    我当年读大学的时候,就是因为 CSS 才放弃学前端的。
    dayeye2006199
        70
    dayeye2006199  
       44 天前
    同后端,已经放弃,bootstrap 一把梭
    jatsz
        71
    jatsz  
       44 天前
    其实 CSS 难以理解的是布局,剩下的都是很"直觉"的。最近看了这篇文章让我从后端角度(开发者角度)更加理解布局了。https://www.joshwcomeau.com/css/understanding-layout-algorithms/
    xiaojun996
        72
    xiaojun996  
       44 天前
    @murmur 没错,flex grid 走天下,尤其 flex 超级经常用
    huangwei8ku
        73
    huangwei8ku  
       44 天前
    watch and learn
    fcfangcc
        74
    fcfangcc  
       44 天前
    flex 一把梭
    MengiNo
        75
    MengiNo  
       44 天前 via iPhone
    css 感觉就不怎么逻辑。其他语言靠逻辑写,css 全靠 dev tool 调。 特别是还要考虑兼容性问题时。
    danhahaha
        76
    danhahaha  
       44 天前
    每次调 CSS 都温习一遍排列组合
    Wzieee
        77
    Wzieee  
       44 天前
    现在在学前端,css 的‘奇淫技巧‘真的蛮多的,css 大作业就是纯 css 写小米商城首页。首页绝大部分效果都能用 css 写出来。
    bzw875
        78
    bzw875  
       44 天前
    去小公司做全栈开发,但是要懂得写 HTML 和 js 才行因为很难单独学 css
    penll
        79
    penll  
       44 天前
    css 学个 flex 就算半只脚入门了。
    写过一年小程序,从小白到熟练,再到小程序框架(简单点比如注入、重写 Page )
    penll
        80
    penll  
       44 天前
    @penll by the way 我是后端
    gy123
        81
    gy123  
       44 天前   ❤️ 1
    B 站看 pink 老师~
    cssTheGreatest
        82
    cssTheGreatest  
       44 天前 via Android
    最 old school 的就是拿着 o'reilly 的 css 书来学,当年大学里就这么学起来。后来就纯纯的“唯手熟尔”
    towave
        83
    towave  
       44 天前 via Android
    一般前端都没学明白,想学好直接 css 世界三本书看完再大量练习
    zqx
        84
    zqx  
       44 天前 via Android
    把张鑫旭博客看一遍,就行了,css 的怪异行为主要靠亲手实验
    saigo
        85
    saigo  
       44 天前
    我是培训班出身,老师教的时候,是按照 样式、盒子模型,定位、动画学的,后面用到什么百度,要记到脑子里。张鑫旭的书都可以看看
    TomatoYuyuko
        86
    TomatoYuyuko  
       44 天前
    写多了还挺快乐的,比较难的还是怎么设计比较美观易用吧,再就是海量的”小技巧“
    mofeishiwoa
        87
    mofeishiwoa  
       44 天前
    正在学,脑袋都懵掉了。
    dcsuibian
        88
    dcsuibian  
       44 天前
    同后端,推荐《精通 CSS 》,对于盒子模型、响应式 Web 设计、表单、变换过渡动画、flex 等都有介绍,详略得当,应付日常使用不在话下,挺不错的。
    不推荐《 CSS 权威指南》中文版。中文版的翻译非常差。

    个人感觉想要系统性学习,看书是一个非常好的途径。虽然慢,但质量比网上的资料更有保证。

    CSS 的话,你写错了浏览器也不会告诉你,你实现了效果也不知道为什么。必须要知其然,知其所以然。搞明白到底是哪几行起作用了。
    elevioux
        89
    elevioux  
       44 天前
    css 本身并不难,多写多记而已。

    但写了 6 、7 年的 css ,div 居中每次都还是要谷歌,也是菜的没谁了。。。
    alphardex
        90
    alphardex  
       44 天前
    CSS 要以玩的心态去学
    一些小建议:
    1.刚开始可以尝试多用 CSS 来代替 JS 实现一些常见的 UI 效果
    2.书我就推荐一本《 CSS 揭秘》
    3.多上 codepen ,上面有很多实用的 demo
    4.多写 demo ,不论结果如何,写多了你甚至会发现 CSS 还能用来画画
    OnlyShimmer
        91
    OnlyShimmer  
       44 天前
    @Wzieee 小米商城小 Case ,挑战在小米手机宣传页
    geebos
        92
    geebos  
       44 天前
    flex box 一把梭
    leega0
        93
    leega0  
       44 天前
    css 更加偏视觉和想法一些,各种奇淫技巧都是写多了之后突然想到的灵感,比如纯 css 进度条、折角背景、各种动画视差效果等,追崇的是利用元素本身的属性特点及用最少最简洁的代码或元素实现较为复杂的展现,如果你不是要转前端,系统学习了解下 flex 等布局方式就足够应付业务了,想深入点可以看下 CSS 揭秘,国内的有 CSS 世界系列
    zhuweiyou
        94
    zhuweiyou  
       44 天前   ❤️ 1
    后端不建议学这些, 术业有专攻, 什么都会 约等于 什么都菜.

    非要学的话, flex 和 position 会, 就差不多了.

    别搞什么 tailwind, 开倒车的东西.
    solohealer
        95
    solohealer  
       44 天前
    我理解其实 css 是一种声明式的语言,想象成配置 json 或者 yaml 就行了
    HiCode
        96
    HiCode  
       44 天前
    @murmur css 是垃圾这个没得洗的。跟人无关,就像屎难吃,没人喜欢吃屎一样。并不是说有些人习惯吃屎了,其他吃不惯的人就是“菜”!
    dfkjgklfdjg
        97
    dfkjgklfdjg  
       44 天前
    CSS 这个东西确实比较吃经验,因为太灵活了,但是有多很有趣的效果就是突然脑洞大开之后实现的。
    如果 OP 偏后端的话,还是直接使用这些 UI 库的样式即可,如果一定要写一些页面样式的话可以尝试 tailwind 。

    不过依照国内设计师的设计方式多半 tailwind 其实会总是差一点点然后还是需要自己去调整。
    如果有条件需要还是找一个专职前端来负责来的好。
    guanhui07
        98
    guanhui07  
       44 天前 via Android
    我也不喜欢写 css
    dfkjgklfdjg
        99
    dfkjgklfdjg  
       44 天前
    @HiCode #96 ,CSS 这种简单的声明式标记语言连小学生花几周时间就能搞请套路的东西还能学不明白,
    只能说是没有摆正态度花时间去学,要么就是真的菜。
    常用的属性就那么二三十个。而且所有的规则都是有明确规范的、并且有规律的。

    基本的复原 UI 设计稿样式只需要你开始持续写 2 周就能弄清楚,只要控制好书写规则的应用范围和影响范围即可,剩下的内容都是靠时间积累复用的套路 /模式。
    weixiaochen0914
        100
    weixiaochen0914  
       44 天前 via iPhone
    理解盒子模型,基本上就够了,其他属性,用的时候再查就好了。
    1  2  
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   889 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 65ms · UTC 21:39 · PVG 05:39 · LAX 14:39 · JFK 17:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.