你不知道的 CSS 中的算法

今天我们来看一看 CSS 中的算法，CSS 在众多 developer 眼中应该不算是一门计算机，在 CSS 中没有作用域的概念，没有流程控制...，真的吗？这些我们都可以用 sass 来实现的。今天我们来在 CSS 和计算机科学间建立一个桥梁。我们找到 CSS 和计算机科学间的隐藏的桥梁。

有了 CSS， 我们 web 世界变得绚丽多彩，不再是简单地堆砌 dom 结构，精彩绝伦的 CSS 。

CSS 是算是一门编程语言吗？在多数的开发者眼中 CSS 算不上编程语言。网上有问卷调查，结果是和不是基本各占一半。

有关 CSS 到底算不算是一门编程语言的讨论，大家争吵的不停，我们先抛弃个人主观的看法。

从编程语言的定义出发来判断 CSS 到底算不算编程语言。那么什么算是编程语言呢？

从客观出发，我们先看编程语言的定义，定义是计算机可以执行的指令集，好像太笼统。计算机语言大致分为两类，一类是指令式计算机语言，一类是声明式语言，我们熟悉的 javascript ruby c++ 和 python 都是指令集语言，计算机会按照一定顺序，一行一行读取指令来执行，在指令式语言内部是有流程控制的。而在声明式语言中却没有流程控制，当下流行的 DSL 语言就是声明式的语言。

那么什么是 DSL 语言，从字面意思来看是特定领域语言。首先这种语言依赖其某个主体，也就是作用于某个领域的语言，这个说起来有点抽象。其实 DSL 是一种描述性的语言，更接近人类语言，可以写语言来控制主体。SQL 就是典型的 DSL 语言，通过写 SQL 可以操作数据库与数据库打交道，领域就是 DSL。还有 gradle 也是一门 DSL 语言，用来描述如何构建一个项目。以后有机会细细地说吧。

既然 CSS 是 DSL 也就是特定（主体）领域的语言，那么 CSS 的特定领域就是 WWW。

好回到 CSS，给 CSS 定义一下吧，通过一句话描述 CSS 到底是什么的语言。CSS 是在特定领域内的声明式语言。个人认为 CSS 应该算上一门语言。

好我们再看一看什么是算法，算法就是通过定义好计算过程将输入转换为一定输出。

例如我们给出一个数字，通过排序算法就得到了一个从小到大的排列的数字。

当然排序算法有很多，像冒泡算法，如果大家感兴趣的话，可以自己找一些算法书籍来看一看，挺有趣味，其实数学也是源于实际并且服务实际。上学的时候后悔没好好学，也没有体会到数学的乐趣。

下面是 javascript 写的冒泡算法。

我们在看一看在 CSS 中的算法，我们输入一个纵向排列的 dom 通过一定算法可以得到横向排列的 dom。

我们可以通过 CSS 的 display:flex 或 float 什么属性，这就是 CSS 中简单的算法。

在 CSS 代码中如下图，这就是声明语言，我们通过定义规则，规则就是 { } 间内容，规则应用到选择器定义的范围的对象。display: flex 是具体的内容。

在声明式语言，我们看到语言只是浮出水面的冰山一角，CSS 的实现是基于海平面的巨大支撑。浏览器都是用 C++ 或是 Rust，Rust 最近用于编写火狐浏览器部分核心代码。个人学习一点了，感觉不错，写起来很顺畅。

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。这里 Cascade 就是小瀑布，奔流下来，也就是新的或是优先级高样式总是覆盖掉之前的或是优先级低的样式。

那么背后算法，就是将不同位置定义的 CSS 属性值组合起来，合并唯一个值。

收集 CSS 中不同值通过一定的算法，排序然后输入给浏览器，浏览器会根据规则调整 dom 的尺寸、布局和样式。

下面是源码。