对于后端开发，如何学好 CSS？

CSS

学好

Vue

slippy

122 条回复 • 2022-10-30 10:17:39 +08:00

1 2

❮

❯

1

angrylid

2022-08-18 09:44:28 +08:00 via Android

38

前端都不敢想这个话题。

2

murmur

2022-08-18 09:44:52 +08:00

学会按需求搜索，当然得 google ，比如你想做一个分栏布局，做一个居中，做一个渐变

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

css 现在很系统了，布局学个 flex ，剩下的都是按需求学习

3

jazzg62

2022-08-18 09:46:14 +08:00

14

去他妈的 css

4

Kenmin

2022-08-18 09:47:11 +08:00

https://book.douban.com/subject/26745943/

5

Kenmin

2022-08-18 09:47:40 +08:00

@Kenmin 书有点老，作为入门还是不错的。

6

h1104350235

2022-08-18 09:47:51 +08:00

不用刻意去学，现在蓝湖都自带样式代码。
可以找个插件做代码转换，把时间花费在 JS 才是重点

7

stoluoyu

2022-08-18 09:48:15 +08:00

忘了怎么学的了，好久没写 css 了
css 够用就行了

8

murmur

2022-08-18 09:48:26 +08:00

1

都 2022 年了，还对 css 抱有敌意的，除了菜，没别的理由嗷

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

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

nth 选择器弄不明白，自己在页面上加标志不丢人，比如 row-even ，row-odd ，row-first ，row-last 这些，不比 nth 选择器好理解？

9

Kenmin

2022-08-18 09:49:00 +08:00

1

平时开发善用 MDN 文档 https://developer.mozilla.org/zh-CN/

10

TWorldIsNButThis

2022-08-18 09:49:10 +08:00

直接看 tailwind
另外学一下各个 html 元素的固有 css 属性，不然出现非预期的行为很难排查

11

leeggco

2022-08-18 09:50:03 +08:00

常用的也不过十来个属性而已，多用就好了

12

debuggerx

2022-08-18 09:50:07 +08:00

其实就那几个套路别多想写写就好了
越是想所谓“系统、高效”学习越是会走弯路除非是面向面试不建议浪费这个精力

13

murmur

2022-08-18 09:50:48 +08:00

@h1104350235 js 是看不到的东西，写的稀烂没人管你，能跑起来就赢了，css 是脸面，css 写的烂页面效果出不来，直接交差都交不了

14

xiaojun1994

2022-08-18 09:54:07 +08:00

tailwindcss

15

davin

2022-08-18 09:54:57 +08:00

2

CSS Zen Garden 即可。看看现在所谓的 SPA / SSR ，只会 div 套 div ，一点 semantics 都没有，还不如当年的 table 🐶

16

encro

2022-08-18 09:55:33 +08:00

CSS 需要学吗？看 W3CSchool 半天就看完语法了，这是一门需要动手的标记语言！

建议学习路径：

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

2,了解 bootstrap ，做一个项目；

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

学习 CSS 的办法就是动手，参考，改造。

17

zjsxwc

2022-08-18 09:56:38 +08:00

1

我最开始也是写后端的，后来兼前端，学 css 的话，
建议找一本 css 教程从头到尾过一遍，我当时看的是 Keith-J-Grant 的《深入解析 css 》，
然后就是看看别人写的 css 效果，找几个项目开始写 css 啦。

18

ns09005264

2022-08-18 09:56:45 +08:00

用 tailwind 这样的 css 原子库，可以从中学到一些 css 知识
不过,要使用 tailwind 本身也要会一点 css ，有点鸡生蛋的意味。

19

CathayChen

2022-08-18 09:58:05 +08:00

2

同为后端，我也被这个问题纠结过。
我觉得不是 CSS 我们学不好，而是没有足够的审美去写一个好看的样式。
如果你拿着一个设计好的 UI 图去写，其实也是可以写得好的。

20

towry

2022-08-18 09:59:40 +08:00

做前端的。

感觉前端最痛苦的点就在一些兼容性上，这个不支持那个不支持。

21

zhuangzhuang1988

2022-08-18 10:02:11 +08:00

https://web.dev/learn/css/

22

P233

2022-08-18 10:02:15 +08:00

@CathayChen 所谓的 design concepts

23

keyrinrin

2022-08-18 10:02:38 +08:00

谁还敢说前端简单的，css 比一比

24

xiaotianhu

OP

2022-08-18 10:03:22 +08:00

@Kenmin
感谢推荐，看一下。

25

murmur

2022-08-18 10:03:43 +08:00

@davin div 省事啊，div 没有什么初始化属性，语义字段有初始化属性，如果忘了 reset 就等着处理样式问题吧

26

Kakarrot

2022-08-18 10:05:43 +08:00

CSS 感觉就是上手去调去改审查元素

找到你的目标样式审查元素一个一个去掉 /添加查看变化

27

sunwei0325

2022-08-18 10:07:07 +08:00

先写中文注释, 等 copilot 补全看看, 不行再改

28

redford42

2022-08-18 10:07:36 +08:00

他不需要学，他就是背...

29

kop1989smurf

2022-08-18 10:08:39 +08:00

2

做业务的界面样式，不管平台（ Android 、iOS 、winform 、web ），其实就这么几个关键点：布局方式、对齐方式、距离、间隔方式、填充方式。
剩下的都是以上的具体实现与简化。

只有那种海报展示页，有艺术成分的，对样式才会要求高。
一般程序员能掌握业务展现就已经够用了。

30

kop1989smurf

2022-08-18 10:10:42 +08:00

相对而言，更有技术含量的，是如何把一个既定 ui 拆解成合理的布局关系

31

K1W1

2022-08-18 10:10:58 +08:00

同后端，CSS 是典型"学会它只要五分钟,但要学精它,要花上一辈子"的东西。一直觉得 CSS 很玄学，因为你怎么写他都不报错。但得到的结果又总是"差之毫厘谬之千里"。后来看了《[深入解析 CSS]( https://book.douban.com/subject/35021471/)》，对 CSS 印象有了很大的改观。

32

darkengine

2022-08-18 10:11:42 +08:00

不是专门搞 web 开发的话，学个 flex-box ，万物皆 div 就完事儿了😂

33

rodrick

2022-08-18 10:15:36 +08:00

css 要用眼睛去看不要太用脑子去理解

34

zzzmh

2022-08-18 10:16:31 +08:00

使劲写，尤其是从零写点什么，真正有用的东西，对标一下互联网大厂，正好练练审美方面。
当然有个前提，你喜欢写这玩意，或者你工作用得上，要不然是折磨

35

zcf0508

2022-08-18 10:17:04 +08:00

再 devtool 里把样式调好了再把代码复制到 css 里，不要想着直接写 css

36

dabaoziwy

2022-08-18 10:19:31 +08:00

无他，唯手熟尔

37

Veneris

2022-08-18 10:20:27 +08:00

作为后端，从来没有试图系统性学过前端。
写写 js 问题不大，但是样式顶多就是用用组件库，不符合需求的就捉急，只能摇人。

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

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

现在也是刚学完，下一步怎么学还不清楚，没事就按 f12 看看感兴趣的网站样式都是如何实现吧。

38

LavaC

2022-08-18 10:23:24 +08:00

css 这玩意挺直观的啊，除了布局上可能稍微繁琐了点，宽高、颜色、阴影、字体大小、边框，跟用文字版 ps 一样。
配合提示插件的话，就算你不知道有没有这个属性，直接打对应的英文单词也会提示给你。

39

learnshare

2022-08-18 10:26:02 +08:00

多写多练，10 万行很快就能上手
从基本效果到复杂布局，从单一模块到组件化

http://www.tup.tsinghua.edu.cn/booksCenter/book_07765201.html 自荐一下

40

Veneris

2022-08-18 10:27:14 +08:00

> #37

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

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

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

只能靠经验慢慢去堆。

41

vevlins

2022-08-18 10:28:09 +08:00

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 刀。

42

darknoll

2022-08-18 10:30:04 +08:00

后端都是卡在 css 这边

43

dsa999

2022-08-18 10:33:11 +08:00

我可能跟其他人不一样，我蛮喜欢写 css ，写 css 有一种写自然语言的感觉。
css 的那套方法论跟 java 、c++这些一般编程语言都不一样。
不要先入为主的去学习可能会比较好？

44

lujiaosama

2022-08-18 10:36:49 +08:00

原子化 CSS 还是有额外学习成本的, 原来的属性的新写法得记老半天. 优点是预设样式比较标准, 效果也比较好. 但是全局样式冲突很头疼(antd/element plus 都有), 最后还是放弃回到了预编译的写法.

45

yaphets666

2022-08-18 10:38:19 +08:00

俺是专业前端，俺也觉得前端不系统，很细节，没办法，是这样的。一个一个背呗。

46

qiumaoyuan

2022-08-18 10:39:05 +08:00

感觉这东西就靠多练多积累经验。

47

beiyu

2022-08-18 10:53:29 +08:00

我觉得你这个 problem 的主要 reason 还是用的少了，可以尝试边 study 边用，碰到不会的时候网上 search 相关的资料，把这些方法名词都 remember 之后，写起来就如鱼得水了。

48

zaul

2022-08-18 10:56:23 +08:00 via iPhone

tailwind css 一把梭哈？

49

gowk

2022-08-18 10:58:05 +08:00

这里问题我也一直在思索，这个东西不实践不行，看过几本书，用的时候又歇菜了，终究不得其门而入

50

wangtian2020

2022-08-18 10:58:19 +08:00

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 的时候摁住"↓"滚完全部数据

51

Slshaolong

2022-08-18 11:03:29 +08:00 via Android

你在想啥我看见 css 都头疼这玩楞可麻烦死了

52

chztv

2022-08-18 11:05:23 +08:00

这……感觉实战就是最好的学习方法，参与几个 PC 站、移动 H5 的开发，css 分分钟就会了
我从 PHP 后端成功转型专业前端已经 10 年了

53

um1ng

2022-08-18 11:07:07 +08:00

本人前端，css 一生之敌

54

Light3

2022-08-18 11:07:22 +08:00

大哥别骗人了写 php 的咋会不会写静态页面嘛
不会写吃不上饭的啊之前

55

xyqhkr

2022-08-18 11:19:24 +08:00

head first html and css

56

qzhai

2022-08-18 11:20:55 +08:00

本人前端, toC 。
怎么说，我觉得 CSS 都不应该算语言，因为毫无逻辑。
只要记住属性就可以用。
比 js 简单太多了。

57

SxqSachin

2022-08-18 11:25:46 +08:00

学前端一定要看 mdn

58

code4you

2022-08-18 11:32:17 +08:00

多写吧

写了你就不讨厌了

你不熟悉 ta 你就厌倦 ta

不过说实话我熟悉了 css 也依旧讨厌 css 花 UI 界面太花费时间了

59

lifesimple

2022-08-18 11:37:39 +08:00

多看多写吧不过一般 crud 的项目基本都组件库支持很少自己手写样式

60

molvqingtai

2022-08-18 11:46:13 +08:00

搞清 flex, 搞清 static relative fixed absolute sticky 几个定位的区别，基本能完成 80% 需求

初学者不要使用 float

61

liuw666

2022-08-18 11:53:51 +08:00 via iPhone

感觉够用就行，不需要搞太复杂

62

wu67

2022-08-18 11:54:12 +08:00

css 其实还行, 要简单有简单的写法, 要难也能豆腐雕花. 基本上你找几个前端仔过来切同一个页面, js 部分的逻辑大同小异, 但 css 部分的代码, 大概有几个人就会有几种写法....

所以你看即使是卷王一般的前端面试, 也比较少问 css 的详细问题的, 即使有, 比重也不大....

63

biglion666

2022-08-18 12:52:48 +08:00

我觉得前面提到的网站都不太好，我来推荐一个

https://css-tricks.com/

64

yikyo

2022-08-18 13:03:35 +08:00 via iPhone

比十几年前好多了，当时适配多浏览器真的要疯

65

chloerei

2022-08-18 13:03:47 +08:00

1

在理解 CSS 语法之后，我觉得接下来遇到的问题是不知道什么是好的设计。

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

实践部份，可以找一个好看的博客主题，像素级拷贝到自己的博客上。拷贝的过程就会研究这个效果是怎么实现。

66

mynameislihua

2022-08-18 13:26:14 +08:00

文档流，行内元素，块级元素，盒模型，定位，再加一个 flex 布局就 OK 了。

67

placeholder

2022-08-18 13:36:15 +08:00

像什么 flex 啊，grid 之类的布局，直接网上找拖拽工具拖出来，然后抄代码这样学习，

其他属性查参考手册，

68

wangyzj

2022-08-18 13:37:56 +08:00

得加钱

69

Simle100

2022-08-18 13:42:11 +08:00

我当年读大学的时候，就是因为 CSS 才放弃学前端的。

70

dayeye2006199

2022-08-18 13:42:24 +08:00

同后端，已经放弃，bootstrap 一把梭

71

jatsz

2022-08-18 13:58:46 +08:00

其实 CSS 难以理解的是布局，剩下的都是很"直觉"的。最近看了这篇文章让我从后端角度(开发者角度)更加理解布局了。https://www.joshwcomeau.com/css/understanding-layout-algorithms/

72

xiaojun996

2022-08-18 14:06:55 +08:00

@murmur 没错，flex grid 走天下，尤其 flex 超级经常用

73

huangwei8ku

2022-08-18 14:07:21 +08:00

watch and learn

74

fcfangcc

2022-08-18 14:07:57 +08:00

flex 一把梭

75

MengiNo

2022-08-18 14:13:34 +08:00 via iPhone

css 感觉就不怎么逻辑。其他语言靠逻辑写，css 全靠 dev tool 调。特别是还要考虑兼容性问题时。

76

danhahaha

2022-08-18 14:16:22 +08:00

每次调 CSS 都温习一遍排列组合

77

Wzieee

2022-08-18 14:34:28 +08:00

现在在学前端，css 的‘奇淫技巧‘真的蛮多的，css 大作业就是纯 css 写小米商城首页。首页绝大部分效果都能用 css 写出来。

78

bzw875

2022-08-18 14:45:01 +08:00

去小公司做全栈开发，但是要懂得写 HTML 和 js 才行因为很难单独学 css

79

penll

2022-08-18 14:46:49 +08:00

css 学个 flex 就算半只脚入门了。
写过一年小程序，从小白到熟练，再到小程序框架（简单点比如注入、重写 Page ）

80

penll

2022-08-18 14:47:08 +08:00

@penll by the way 我是后端

81

gy123

2022-08-18 15:00:17 +08:00

1

B 站看 pink 老师~

82

cssTheGreatest

2022-08-18 15:03:56 +08:00 via Android

最 old school 的就是拿着 o'reilly 的 css 书来学，当年大学里就这么学起来。后来就纯纯的“唯手熟尔”

83

towave

2022-08-18 15:12:30 +08:00 via Android

一般前端都没学明白，想学好直接 css 世界三本书看完再大量练习

84

zqx

2022-08-18 15:36:27 +08:00 via Android

把张鑫旭博客看一遍，就行了，css 的怪异行为主要靠亲手实验

85

saigo

2022-08-18 15:44:28 +08:00

我是培训班出身，老师教的时候，是按照样式、盒子模型，定位、动画学的，后面用到什么百度，要记到脑子里。张鑫旭的书都可以看看

86

TomatoYuyuko

2022-08-18 15:49:42 +08:00

写多了还挺快乐的，比较难的还是怎么设计比较美观易用吧，再就是海量的”小技巧“

87

KookSpookk

2022-08-18 16:05:16 +08:00

正在学，脑袋都懵掉了。

88

dcsuibian

2022-08-18 16:19:23 +08:00

同后端，推荐《精通 CSS 》，对于盒子模型、响应式 Web 设计、表单、变换过渡动画、flex 等都有介绍，详略得当，应付日常使用不在话下，挺不错的。
不推荐《 CSS 权威指南》中文版。中文版的翻译非常差。

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

CSS 的话，你写错了浏览器也不会告诉你，你实现了效果也不知道为什么。必须要知其然，知其所以然。搞明白到底是哪几行起作用了。

89

elevioux

2022-08-18 16:30:41 +08:00

css 本身并不难，多写多记而已。

但写了 6 、7 年的 css ，div 居中每次都还是要谷歌，也是菜的没谁了。。。

90

alphardex

2022-08-18 16:58:15 +08:00

CSS 要以玩的心态去学
一些小建议：
1.刚开始可以尝试多用 CSS 来代替 JS 实现一些常见的 UI 效果
2.书我就推荐一本《 CSS 揭秘》
3.多上 codepen ，上面有很多实用的 demo
4.多写 demo ，不论结果如何，写多了你甚至会发现 CSS 还能用来画画

91

OnlyShimmer

2022-08-18 17:10:57 +08:00

@Wzieee 小米商城小 Case ，挑战在小米手机宣传页

92

geebos

2022-08-18 17:17:01 +08:00

flex box 一把梭

93

leega0

2022-08-18 17:20:28 +08:00

css 更加偏视觉和想法一些，各种奇淫技巧都是写多了之后突然想到的灵感，比如纯 css 进度条、折角背景、各种动画视差效果等，追崇的是利用元素本身的属性特点及用最少最简洁的代码或元素实现较为复杂的展现，如果你不是要转前端，系统学习了解下 flex 等布局方式就足够应付业务了，想深入点可以看下 CSS 揭秘，国内的有 CSS 世界系列

94

zhuweiyou

2022-08-18 21:23:27 +08:00

1

后端不建议学这些, 术业有专攻, 什么都会约等于什么都菜.

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

别搞什么 tailwind, 开倒车的东西.

95

solohealer

2022-08-18 21:58:20 +08:00

我理解其实 css 是一种声明式的语言，想象成配置 json 或者 yaml 就行了

96

HiCode

2022-08-18 23:57:44 +08:00

@murmur css 是垃圾这个没得洗的。跟人无关，就像屎难吃，没人喜欢吃屎一样。并不是说有些人习惯吃屎了，其他吃不惯的人就是“菜”！

97

dfkjgklfdjg

2022-08-19 00:08:01 +08:00

CSS 这个东西确实比较吃经验，因为太灵活了，但是有多很有趣的效果就是突然脑洞大开之后实现的。
如果 OP 偏后端的话，还是直接使用这些 UI 库的样式即可，如果一定要写一些页面样式的话可以尝试 tailwind 。

不过依照国内设计师的设计方式多半 tailwind 其实会总是差一点点然后还是需要自己去调整。
如果有条件需要还是找一个专职前端来负责来的好。

98

guanhui07

2022-08-19 00:22:36 +08:00 via Android

我也不喜欢写 css

99

dfkjgklfdjg

2022-08-19 00:27:41 +08:00

@HiCode #96 ，CSS 这种简单的声明式标记语言连小学生花几周时间就能搞请套路的东西还能学不明白，
只能说是没有摆正态度花时间去学，要么就是真的菜。
常用的属性就那么二三十个。而且所有的规则都是有明确规范的、并且有规律的。

基本的复原 UI 设计稿样式只需要你开始持续写 2 周就能弄清楚，只要控制好书写规则的应用范围和影响范围即可，剩下的内容都是靠时间积累复用的套路 /模式。

100

0914xc

2022-08-19 00:54:54 +08:00 via iPhone

理解盒子模型，基本上就够了，其他属性，用的时候再查就好了。

1 2

❮

❯