正文

大家好，我是fire，上一篇介绍了，CSS的来源、制定组织、规范的制定过程，并在结尾提到了，了解CSS全貌，最好的参照规范为CSS2.1，这一篇，让我们看一下，CSS2.1中到底构建了一个怎样的CSS世界。

通过产生式查看CSS总体结构

在开始之前先介绍一个了解一门编程语言的工具——产生式。所谓产生式就是一种用形式化符号精确描述程序设计语言的系统，是一种典型的元语言，最常见的有BNF(巴科斯范式) 。通过产生式，我们可以从整体了解一门语言的语法构成，所以，接下来我们通过产生式来了解一下CSS整体结构。

在CSS2.1规范中，有对CSS语法描述的产生式，下面是截取的整个产生式的第一部分，对整个样式表(stylesheet) 描述的产生式，内容如下：

stylesheet
  : [ CHARSET_SYM STRING ';' ]?
    [S|CDO|CDC]* [ import [ CDO S* | CDC S* ]* ]*
    [ [ ruleset | media | page ] [ CDO S* | CDC S* ]* ]*
  ;

我来解释一下上面的内容:

首先，stylesheet，表示CSS样式表。冒号:表示，左边的stylesheet是由右边的部分构成，所以主要看一下右边这部分内容，其中的一些结构含义如下：

[]: 表示分组的意思，可以理解为stylesheet的一个组成部分

*: 表示前面的内容重复0次或多次

?: 表示前面的内容重复0次或1次

|: 表示或的关系可以看出，这些规则和正则表达式内容完全一致。然后我们逐行的看一下:右边的内容。

第一行[CHARSET_SYM STRING ';']?

?结尾，表示前面这一组内容，可以最多只能出现一次，也就是可以忽略不写，写的话只能写一遍。[]中的内容CHARSET_SYM STRING ';'表示编码系统，也就是用@charset声明的编码格式，例如：@charset 'utf-8';

第二行的[S|CDO|CDC]*

这部分表示是由中括号中的这三个结构其中之一构成，这三个结构的意思是：

S：表示空白符，包括空格、换行符(\n)、制表符(\t)等内容

首先，stylesheet，表示CSS样式表。冒号:表示，左边的stylesheet是由右边的部分构成，所以主要看一下右边这部分内容，其中的一些结构含义如下：

[]: 表示分组的意思，可以理解为stylesheet的一个组成部分

*: 表示前面的内容重复0次或多次

?: 表示前面的内容重复0次或1次

|: 表示或的关系

可以看出，这些规则和正则表达式内容完全一致。然后我们逐行的看一下:右边的内容:
第一行[CHARSET_SYM STRING ';']?

?结尾，表示前面这一组内容，可以最多只能出现一次，也就是可以忽略不写，写的话只能写一遍。[]中的内容CHARSET_SYM STRING ';'表示编码系统，也就是用@charset声明的编码格式，例如：@charset 'utf-8';

第二行的[S|CDO|CDC]*

这部分表示是由中括号中的这三个结构其中之一构成，这三个结构的意思是：

S：表示空白符，包括空格、换行符(\n)、制表符(\t)等内容

CDO：HTML注释开头部分，

关于CDO和CDC，这是个历史遗留问题，用来兼容一些不支持CSS解析的极其老的浏览器，这样通过CDO和CDC，不支持CSS解析的浏览器会把CSS内容当成HTML注释然后忽略，支持CSS解析的浏览器便会解析内容。现在想找个不支持解析CSS的浏览器也是极其困难的事，所以可以感性的忽略这部分内容。

第二行的[ import [ CDO S* | CDC S* ]* ]*

import表示@import规则，也就是引入一些外部的样式表的语法规则，具体内容后面细看，只需要了解这部分是记录@import语法的部分。
第三行[ [ ruleset | media | page ] [ CDO S* | CDC S* ]* ]*

ruleset表示基本的CSS规则，也就是选择器+具体的CSS规则的结构，例如：
div {
  width: 100px;
}
media表示媒体查询部分，也就是@media规则。

page表示的是@page规则，用来在打印文档时修改某些CSS属性，换页的概念主要用于打印机，所以@page在日常开发中基本上不会使用，所以也可以忽略。

通过对整个stylesheet产生式的解读，可以了解到，一个CSS的样式表的基本结构浮现了出来，首先是编码规定，如果有的话必须写在整个样式表的开头，其次是@import导入外部样式表的语法，是写在@charset规则后面，其他规则前面，最后是其他规则，普通CSS规则或者@media媒体查询规则，这些就没有严格的顺序限制了。

综上所述，CSS2.1规定的总体结构大概如下：

@charset
@import
rules
- rule（日常工作中，写的最多的地方）
- @media
- @page CSS2.1规定的整体的基本结构一般来说变化的可能性很小，基本上后面的版本都是围绕这rule来做变化，不过为了便于我们接下来研究，然后结合日常开发，对上述结构进行了一下分类重组，形成如下的结构：

CSS2.1体系结构.png CSS2.1规定的整体的基本结构一般来说变化的可能性很小，基本上后面的版本都是围绕着rule`来做变化，不过为了便于我们接下来研究，然后结合日常开发，对上述结构进行了一下分类重组，形成如下的结构：

CSS体系结构.png 本篇内容先到这里，后面我们慢慢的补全这个CSS体系结构图，下一篇内容将汇总一下at-rule具体包含哪些规则。

你了解CSS吗？——从产生式窥探CSS组成结构

正文

通过产生式查看CSS总体结构