CSS 简介

层叠样式表（Cascading Style Sheets，缩写 CSS）是一种样式表语言。

用来描述在 HTML、XML、SVG、XHTML 等文档的呈现。

CSS 由 W3C 实现跨浏览器的标准化。减少了重复的式样编码。

CSS 的诞生

CSS 的诞生源自 HTML。

Tim Berners-Lee 在 1990 年发明了 HTML，被用来规范科研文档的格式。它为文档赋予基本的结构和意义，比如标题、列表、定义。这些文档通常没有装饰性元素，方便计算机对其进行检索。

但是，清汤寡水的页面终究不能满足人们的需求。各类的样式加入也让其变得更为复杂。这时 CSS 作为解决方案出现了。

CSS 将 HTML 中的表现性标记提取出来，并自成体系。同时也提升了网站的可访问性和加载速度。

它给我们带来了：

一种专用于控制视觉样式和布局的语言。
可重用的样式。
通过关注点分离得到良好的代码结构。

关注点分离（separation of concerns）的思想是“分成小块，松散结合”。每一个小块都是一个结构，实现简单的功能，专注于做好一件事，它可以方便地在系统的其他部分重用。将多个小块组合起来，就可以实现特定的复杂功能。

CSS 的版本

CSS 有很多版本。

1996 年 W3C 将 CSS1 作为推荐标准，现已废弃。

1998 年 W3C 推荐 CSS2 作为新标准。

目前 CSS2.1 是推荐标准。

CSS3 则比较特殊，它不是一种规范，而是指一系列级别独立的模块。

如果规范模块是对之前 CSS 概念的改进，就从 3 级开始命名。如果是不认识的全新技术，就从 1 级开始命名。所以一般提到的 CSS3 指所有足够新的 CSS 规范模块，比如 CSS Backgrounds and Borders Level 3、 Selectors Level 4 和 CSS Grid Layout Level 1。这种模块化的方式可以让不同标准有自己的演变速度。比如 CSS color level 3 已经成为推荐标准，而有些还处于候选阶段。

从 CSS 标准制定，到成为推荐，再到浏览器实现这个标准，可能需要很多年的时间。因此，浏览器会对还在候选阶段的特性就做实验性的实现。等到推荐时，实现就已经变得很稳定。

对于开发者来说，重要的是需要知道 HTML 和 CSS 的哪些部分已经在浏览器中实现了，以及这些实现是否稳健，有没有 bug。比如，这些特性是否还是实验性特性、是否在其他浏览器上也得到了支持。

有几个网站可以了解不同浏览器对不同特性的支持：

如何对不支持某个特定特性的浏览器采用备用代码来实现一样的功能，如何将其处理成可向后兼容的代码，是考验一个 CSS 高手的试金石。

引入 CSS

外部样式表：

<link rel="stylesheet" href="styles.css" />

用属性 rel，让浏览器知道有 CSS 文档存在（所以需要遵守 CSS 样式的规定），并利用属性 href 指定，寻找 CSS 文件的位置。

内部样式表
内联样式表

优先级：内联式 > 嵌入式 > 外部式

渐进增强

想要使用最新的 CSS 特性，又想要向后兼容就需要用到渐进增强（progressive enhancement）策略。渐进增强的意思是“首先为最小公分母准备可用的内容，然后为支持新特性的浏览器添加更多交互优化”。这就需要对代码进行分层，每一层增强代码在相应特性被支持或被认为适当的情况下应用。

渐进增强已经在 HTML 和 CSS 中被内置使用。这样即使浏览器遇到未知属性也不会报错.

举个栗子:

邮件 input 标签:

<input type="text" id="field-email" name="field-email" />

使用新特性的可以写成：

<input type="email" id="field-email" name="field-email" />

当有些浏览器无法理解 type="email"这个新特性时,它会很聪明地回退到上面那种表现方式。而明白这个新特性的浏览器则可以实现新效果。这就是渐进增强。

再举个栗子：

.back-color {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
}

两个都是设定背景色的方法，但是有些浏览器进度慢不理解 rgba。这时候它就会只显示黑色。因为 CSS 是后来居上，当有些学霸浏览器能理解时，rgba 会覆盖前面的声明，显示透明的背景色。

这就是准备好后备代码的渐进增强策略。

厂商前缀

浏览器厂商会基于渐进增强给自家浏览器添加实验性特性。他们会在特性的标准名称前添加特殊字符串。这样只有他们家的浏览器能识别这个特性，其他家的就会忽略这个特性。

.special {
  -webkit-transform: translate(0, 10px);
  -moz-transform: translate(0, 10px);
  -ms-transform: translate(0, 10px);
  transform: translate(0, 10px);
}

最后添加一条不带前缀的特性声明，让支持标准属性的浏览器也不会漏网。

不过厂商前缀正在被抛弃。有些厂商将实验性特性隐藏在 chroms://flags 中，有些厂商只在特定版本的浏览器中提供。

条件规则与检测脚本

如果希望根据浏览器是否支持某个特性来提供完全不同的样式，可以选择@support 块。这个特殊的代码块就是条件规则，它会检测括号中的声明是否被支持。在浏览器支持的情况下，才应用块中的规则。

@supports (dispaly: grid) {
  /**/
}

然而@support 也在一些新的浏览器中才被支持。所以也可以用 JavaScript 来检测，比如 modernizr 库。它可以为 HTML 添加支持提示信息，然后依据这些信息编写 CSS。

总之，渐进增强可以让开发者少一些对 CSS 版本的担忧。留住旧版浏览器的用户时，又可以为新版浏览器的用户提供新的画面。

CSS 的可维护性

可维护性是优秀的代码必备的特点。可维护，即是要求代码具有清晰的结构，方便阅读。进行开发新功能、修复 bug、提升性能等操作时，都因其可读性高而变得简单。反之，则会导致开发者不敢改代码，甚至每改一点都有可能出现问题。最终导致没人再愿意维护这个网站。只能走严格的变更控制流程，每月才能发布一次。

如果代码需要交付给客户或另一个开发团队，可维护性就更加重要。这时候，代码是否逻辑清晰，是否意图明确，是否为将来的修改做过优化，都很重要。

相比其他现代编程语言，CSS 不具有内置的变量、函数和命名空间等特性，不利于其保持代码的结构和模块化。所以它的管理也更为困难。不过在后面的内容，会提到解决方法。

小结

CSS 问世之初还是小众技术，只有技术博主和 web 狂热爱好者才会研究。当时，人们认为它只是一个美好的梦想。然而如今，CSS 的地位已经无法撼动。

CSS（一）：什么是CSS