CSS Key Concepts

[xxleyi]

CSS 大全：CSS: Cascading Style Sheets | MDN

---

前端程序员在处理 CSS 时，很容易产生这样一种微妙的心理：一方面看不上 CSS，因为它就是用来指定下页面样式；另一方面又时常受折磨，觉得 CSS 一团糟，各种 issue 不断，打心底里觉得根本无法像理解 JS 一样去理解 CSS，只求能把想要的样式搞出来。尽快脱离苦海。

CSS 的重难点是向后兼容，简单属性背后的复杂概念模型，以及属性之间不一定正交，会耦合，会多个属性协同工作。

但 CSS 本身绝对是可以理解的。

在这段集中学习 CSS 的时间里，我慢慢有一些体会，简单总结如下：

• CSS 是一种 DSL，领域特定语言，不是通用编程语言，但也是「语言」
• CSS 使用选择器和属性来声明样式规则，属于声明类型的语言
• 样式规则能够构造复杂样式的背后依托是几种清晰有效、简约不简单的概念模型
• 使用 CSS 时主要是利用选择器声明各种属性的值，背后的概念模型值得学习和理解，否则就只能不断记住各种规则和特例
• 学习方法：遇到不可理解或无法构造的 CSS 样式问题时，尝试 google some-attribute mdn，并回归基础的概念模型本身
  • CSS specificity + importance + source code order
  • block formatting context
  • stacking context + z-index
  • box model
  • positioned or static
  • float
  • flex
  • grid
  • getBoundingClientRect(), client(viewport), page(content, scroll)

以上是我个人总结，下面是 MDN 列出的关键概念

• CSS key concepts:
  • The syntax and forms of the language
  • Specificity, inheritance and the Cascade ✨
  • CSS units and values
  • Box model and margin collapse ✨
  • The containing block ✨
  • Stacking and block-formatting contexts ✨
  • Initial, computed, used, and actual values
  • CSS shorthand properties
  • CSS Flexible Box Layout
  • CSS Grid Layout
  • Media queries
  • Animation

[xxleyi]

Calculating a property's actual value

The user agent performs four steps to calculate a property's actual (final) value:

1. First, the specified value is determined based on the result of cascading, inheritance, or using the initial value.
2. Next, the computed value is calculated according to the specification (for example, a span with position: absolute will have its computed display changed to block).
3. Then, layout is calculated, resulting in the used value.
4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value.

[xxleyi]