CSS 真难学啊不考虑各种历史遗留因素，有没有可能诞生一个更简单明了地定义样式的语言(不知道能不能算语言)？

CSS

语言

明了

教程

51 条回复 • 2021-03-20 23:04:11 +08:00

1

aydd2004

2021-03-16 08:15:16 +08:00

前端们不是写的还蛮开心的？

2

murmur

2021-03-16 08:21:58 +08:00

css 有什么难学的，IE8+以上都没啥 trick 了，新人直接学 flex 布局能省好多事

3

bzw875

2021-03-16 08:22:05 +08:00

不需要刻意的学习，从事前端的工作，天天画页面调样式倒逼你去学习遇到不懂的就查资料。

4

renmu123

2021-03-16 08:22:52 +08:00 via Android

css 权威指南，抠字眼去看，你就差不多能明白 css 原理了

5

qwei

2021-03-16 08:25:18 +08:00

@murmur 也不全是，iOS 对 flex 的支持不是很友好，总会出些奇奇怪怪的问题。

6

Jirajine

2021-03-16 08:30:03 +08:00 via Android

css 也还好吧，要么你就用 css-in-js 的方案。
不过 css 的问题是管的东西有点多，布局、动画之类的，单单样式还算挺简单明了的。

7

msg7086

2021-03-16 08:38:13 +08:00

12

8

treblex

2021-03-16 09:01:48 +08:00

flutter. web 端算是正式支持了，不过好像还是 canvas 方案，不太了解

9

10bkill1p

2021-03-16 09:02:24 +08:00

面试官：请写出隐藏元素的常用方法
我：margin-left: -99999px

10

liyang5945

2021-03-16 09:03:47 +08:00

css 难学个鸡儿，我之前是看培训班视频学的前端，觉得很简单，就是需要记忆的东西比较多点

11

ran1ever

2021-03-16 09:12:51 +08:00

@10bkill1p 学到了

12

murmur

2021-03-16 09:13:25 +08:00

@treblex flutter web 的官方 demo 连字体渲染都有问题，还是算了吧，第一次见到 2021 年 utf-8 环境英文字体都渲染出方框的

13

Building

2021-03-16 09:28:00 +08:00 via iPhone

前端难就难在兼容性上，新东西不敢用，同一段代码每个浏览器都有自己的想法...

14

LiuJiang

2021-03-16 09:28:48 +08:00

你说 CSS 特效难学，我还能理解，布局相对之前（不考虑 IE ），好写多了。

15

murmur

2021-03-16 09:32:30 +08:00

@Building flex 布局、transform 、translate 这些东西 IE10 就可以用了，新东西你用他干嘛，有哪个布局必须用新特性才做的出来

16

clown007

2021-03-16 09:32:46 +08:00

多写写记住那些属性就行了

17

djs

2021-03-16 09:38:19 +08:00

一直觉得 css 是非常难学习的，很多人那巧劲用的我都眼花了

18

yaphets666

2021-03-16 09:41:04 +08:00

css 学习难度大约在 java 的 1%这个水平.当然这里直说是会用,不谈精通.
觉得难学,主要还是因为你对 css 有成见...不愿意去记这些东西,或者不愿意动手.

19

murmur

2021-03-16 09:42:54 +08:00

1

你觉得 css 难学是因为 css 本身太强大，描述了太多东西，如果 css 好学岂不是这个东西太弱鸡

比如你要描述个物体，他有尺寸、位置，尺寸又有绝对大小和相对大小

物体不只一个，那就有位置关系，物体之间还有排布、间距

作为最简单的文字，也有颜色、粗细、大小、间距、行高

物体如果是个框框，还有外框、外框粗细、圆角、背景，作为背景有背景色，是不是还有渐变，有背景图，图片要怎么摆放

这种拓展的东西太多，你就觉得 css 复杂，所以学 css 要从需求学起，拆解设计稿，设计稿有什么你用什么

20

Vegetable

2021-03-16 09:45:06 +08:00

最近几年 css 没那么难学了

很多历史遗留问题都可以入土了，比如 ie6，基本不用考虑兼容问题了，学习 css 也不用掌握 css 本身，只需要够用就行了。
新出的东西设计其实很不错，比如 flex 、vw 、vh 之类的，都是非常棒特性，解决了很多痛点。不要打开一个教程一点一点学 css，那可能会很痛苦。顶多过一遍 https://zh.learnlayout.com/ ，然后现用现查

21

zxCoder

OP

2021-03-16 09:45:52 +08:00

补充一下我的实际问题，就是文章详情页里，通过点击目录，可以定位到某个大标题，然后就被顶部的固定导航栏盖住了，然后我就百度做法，找到一个解决方案，https://zhuanlan.zhihu.com/p/127781764，就是用负数 margin-top 和正数 padding-top，然后这种方法不知道为什么和上面网站演示的不太一样，我的在大标题上面会出现一段空白，滚动就出现了，然后我就又调了调 padding margin.... 最后才勉强成形(不太准确，反正肉眼看不出区别就是了)

@aydd2004
@murmur
@bzw875
@renmu123
@qwei
@Jirajine
@msg7086
@treblex
@10bkill1p
@liyang5945
@ran1ever
@Building
@LiuJiang
@clown007

22

SpiritQAQ

2021-03-16 09:55:33 +08:00

CSS 就个画样式的竟然三天内学不会 === CSS 难

23

Mutoo

2021-03-16 10:04:45 +08:00 via iPhone

你可以试试新的潮流：utility-first 的 tailwindcss

24

murmur

2021-03-16 10:06:04 +08:00

@Mutoo 这东西玩以下还可以，工程化太差了

领导说让你把所有灰色的按钮字体改大一号，但是你的按钮是 bg-gray 、width-20 、fontsize-12 组成的，你怎么改

全文搜索么

25

wangmn

2021-03-16 10:08:31 +08:00

css 大神张鑫旭的书 css 世界推荐一下

26

zaul

2021-03-16 10:09:34 +08:00

flex 一把梭

27

Mutoo

2021-03-16 10:13:00 +08:00 via iPhone

@murmur postcss 管线 + @apply 喽。tailwindcss 2.0 早就工程化了。

28

ctrlands

2021-03-16 10:13:18 +08:00

现在不用兼容 ie 了，工作后几乎没有遇到过要兼容 ie 的项目了

29

hahastudio

2021-03-16 10:13:32 +08:00

因为排版是一个非常复杂的问题

30

66beta

2021-03-16 10:17:34 +08:00

不考虑历史问题兼容性问题的话
你需要易读性的话，可以在 tailwindcss 上自定义一套更语义化的：
.padding-vertical-2 {
@apply py-2;
}

31

Liam1997

2021-03-16 10:27:30 +08:00

现在很少手撸 CSS 的吧，基本都是各种 UI 框架一把梭，自己写点儿 sass 、less，布局 flex 就能 cover 大部分场景了。自己的网站可以使用 tailwindcss 啥的。

32

otakustay

2021-03-16 10:31:24 +08:00

“更简单明了地定义样式的语言”就是“现代化的 CSS”
Web 布局的核心是流式布局，这是很少在其它 UI 体系中见到的形式，而现有的 CSS 几乎是流式布局的最佳声明方式了
如果你要的不是流式布局，比如传统的绝对定位或者卡片布局，那可能会有一些更好的声明式的方案，或者直接找带 Layout 的组件库就行了