为什么 CSS 这么难学?

本文来自知乎上的问题回答——为什么 CSS 这么难学?

本文节选自方应杭的回答。你可以通过点击文章下方的阅读原文来访问知乎问题地址

因为 CSS 不正交

什么是正交?

你调过显示器的「亮度」、「色调」和「饱和度」吧。

  • 「亮度」就是明暗程度,值越大,屏幕越亮。
  • 「色调」就是颜色,你通过调色调,可以把红色调成绿色。
  • 「饱和度」就是鲜艳程度,值越大越鲜艳。

「正交」就是,你调节这三者中的一个时,不影响其他两个效果。

  • 你调节「亮度」的时候「色调」和「饱和度」不会变化。
  • 你调节「色调」的时候「亮度」和「饱和度」不会变化。
  • 你调节「饱和度」的时候「亮度」和「色调」不会变化。

「正交」看起来应该是理所当然的,对吧。

想象一下「不正交」的情况:你调节「亮度」的时候,「色调」和「饱和度」会跟着无规律的变化。如果是这样,你会调得想死,因为你很难调到你想要的效果。

而 CSS,就是「不正交」的。

我以 width 对 margin-left 的影响为例,假设有如下代码:

.parent 里面的 .child 宽度为 300px,现在我给他添加一个 margin-left: -10px,会发现

整个 .child 左移 10 像素

好的,于是我们知道 margin-left: -10px 会让元素整体左移。

真的是这样吗?

这个时候把 width 去掉重新做实验,这是在添加 margin-left 之前:

这是在添加 margin-left 之后:

我们发现 margin-left: -10px 并没有让整个元素左移,只是让左边缘左移了,右边缘并没有动。

现在来总结一下:

  1. 如果指定了 width,那么 margin-left: 10px 会使元素整体左移
  2. 如果没有指定 width,那么 margin-left: 10px 只会使做边缘左移(也就是宽度扩大)

看到这里,你就会觉得 CSS 特别不正交:

  1. 为什么 width 的存在与否会影响 margin-left 的作用?
  2. 有没有 width 之外的其他属性也会影响 margin-left 的作用?恐怕你无法得知。

这就是不正交的恐怖之处,你只有把所有属性与 margin-left 一起用一下,才能得知 margin-left 的真正规律。

这还只是两个属性的影响,你能想象三个属性互相影响的情况吗?

P.S. 有些前端老手已经能「感性」地理解 width: auto 的意义,觉得这不是「不正交」。其实我只是举例说明「你无法只看一个属性就知道这个属性对应的效果,你必须结合另一个属性一起来看」。

我再举第二个例子,大家都知道 position: fixed 是相对于视口(viewport)定位的。

但是这个「真理」会受另一个元素的影响……对,我知道你很震惊……

先看正常情况:

网页右边是一个 iframe,红色的 .fixed 元素相对于 iframe 视口左上角定位,与我们预期一致。

接下来我在 .box 上面加一个 CSS3 中的属性,就会改变你的认知:

父容器加了 transform 之后,fixed 定位的元素居然相对于父容器定位。

天知道以后 CSS 会不会加更多元素来影响我已经认为是真理的事情?

我说一个更实际的问题吧,你敢在接手一个项目时,在任意一个元素上加 transform 属性吗?

你不敢!除非你把它的每个子元素的属性都检查一遍……确定没有 fixed 定位。

这就是「不正交」的恶心之处。

我再举一个例子,大家都知道给固定宽度的 div 加 margin: 0 auto 可以让它水平居中,很多人就问,那为什么 margin: auto 0(注意 auto 和 0 的位置反过来了)不能做到垂直居中呢?

其实是可以的:

但是必须是在当前元素有 position: absolute; top: 0; bottom:0; 的情况下才能垂直居中。或者与 flex 结合起来用也行。

这就很「不正交」了……

还有一些很常见的例子我就不一一详细列举了

  1. border、padding、overflow、display:table、display:inline-block 会影响 margin
  2. position: absolute 会影响 display 和 float
  3. transform 会影响 z-index
  4. display 会影响 li 前面的小黑点 JS Bin

关键在于这些例子,要一个一个记,各属性被影响的情况都不一样!

CSS 最不正交的地方就是明明有 BFC,却非要把 BFC 藏起来,然后用 overflow:hidden 和 display: inline-block 等属性来触发 BFC。但用这些属性触发 BFC 总是会有副作用,这就是典型的不正交。

要触发 BFC 就单独发明一个触发 BFC 的属性不就好了。display: flow-root; 不就是在填这个坑嘛?所以你们说 CSS 是正交的,我肯定是不服的。

怎么学习「不正交」的东西?

有一个办法:试。

你试的组合情况越多,就越能了解各种奇怪的现象。

其实不用那么悲观,常用的组合也就几十种吧,都试出来并记下来就行了。

目前我们知道

  1. 不同属性的组合会有不同的效果;
  2. 新的属性会影响你已经学会的知识;
  3. 这些规律,毫无逻辑可言,你只能试出来。

这,就是 CSS 难学的原因。

以我的经验,越是理性的人,越难理解 CSS;越是感性的人,越容易理解 CSS。

这就是为什么大部分后端程序员能学会 JS,却学不会 CSS——他们太理性了。

你想用学编程的思路来学 CSS?放弃吧!

你需要用学画画的思路来学习 CSS——每天不停地画画,一个鸡蛋用不同的方式画一千遍,就成了。

所以我在课上说过一句话:

CSS 不是科学,CSS 是艺术。

不过凡事都有例外,如果你愿意老老实实看完 CSS 规格文档,然后再写 CSS,可能就不觉得有那么多不正交的地方了,但是有多少人有这个能力和精力呢?

一些解释

CSS 不正交并不是对 CSS 的指责,如果能正交它肯定会做到正交的,现在的设计虽然不完美,但可能是最好的设计。

上文列举的问题能在规范里找到解释不能说明 CSS 是正交的,因为正不正交应该是从表面上就能看出来的。正交一般都是对接口的约束,具体实现我不管的。

我是这么觉得的,如果有人问 CSS 为什么这么难学,我们就应该好好回答 CSS 为什么这么难学;至于 CSS 多牛逼,应该另开一个问题。

原文发布于微信公众号 - 较真的前端(gh_7af41a2be77e)

原文发表时间:2017-11-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

1分钟读懂HTML5技术

HTML5学堂:如何来理解HTML5技术是什么呢?我们从几个角度进行阐述,分别是狭义上的HTML5(就技术来讨论技术)、广义上的HTML5(平时技术会议、聊天时...

3588
来自专栏无原型不设计

技巧分享: 如何快速搭建一致统一的设计系统

以下内容由摹客(https://www.mockplus.cn)团队翻译整理,仅供学习交流,摹客设计系统是国内独家设计规范制作平台。

1262
来自专栏菜鸟致敬

[菜鸟致敬⑨] 排版建议

最近有关注诸多大佬的博客亦或微信公众号,也时常阅读一些好的文章,它们的排版风格亦是各不相同。大概是大佬都专注于叠代码的缘故,对于文章的排版好坏可能抱着得过且过的...

1112
来自专栏钱塘大数据

用Excel画画“封神”,77岁日本老人成网红

“Excel就像一把天山寒铁淬炼而成的杀猪刀,本身已经很厉害,但具体有多厉害,取决于用它的人。它最牛逼的地方在于,它不是小李飞刀也不是轩辕剑——需要练个10年8...

4555
来自专栏九彩拼盘的叨叨叨

活动#1 秀出你的前端技能吧

我们会选出2位获奖者。1位是前端技能文章获得喜欢数最多的。另1位是前端管理小组选出写的最用心的。

991
来自专栏MixLab科技+设计实验室

谈设计与技术,以WEB布局为例

本文基于“跨界”思维,以 WEB 布局为例,从3个方面,谈谈设计与技术的关系: 1 自适应布局与响应式布局 2 CSS 的布局特性演进 3 设计语言与 W...

3247
来自专栏数据小魔方

数据地图系列12|PowerMap(下)图层叠加与复合数据地图!

今天要跟大家分享数据地图系列12——PowerMap(下)图层叠加与复合数据地图! 昨天跟大家介绍的powermap数据地图还有最后一种图形没有来得及介绍,就是...

3717
来自专栏CDA数据分析师

【图表大师一】如何让Excel图表更具“商务气质”?

如何让Excel图表更具“商务气质”? 文/ExcelPro的图表博客 这是去年底的时候,应《电脑爱好者》杂志约稿写的一篇小文,内容大致是《图表之道》第1章的略...

2768
来自专栏HTML5学堂

无技术基础 看懂HTML5

HTML5学堂:如果你对C语言、网站制作等技术没有什么了解,你可以查看这篇文章。无论你是唱歌的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。只要你平时...

49411
来自专栏直播系统开发

关于直播系统和短视频系统安卓手机屏幕适配的方向思路

直播与短视频的接踵而至,将互联网推向了网红经济时代,而智能手机的更新迭代为二者的发展提供了“温床”。但随着Android机型的增多,设备碎片化的程度也在不断加深...

1420

扫码关注云+社区

领取腾讯云代金券