CSS样式分离之再分离达到精简与重用

一、关于CSS样式分离
zxx://一些名词表意含有自己的理解成分，或许与您的理解有偏差，希望不要拘泥于措辞。
无论是CSS的分离还是js的分离，其主要作用之一就是精简与重用。
CSS本身就代表着精简与重用。例如我们可以设置一个如下的样式：
.example{color:red;}所有想让文字显示红色的标签都可以应用这个样式，这比10年前使用font标签，将color样式写在font标签上（尤其标签多时）要精简很多代码，代码可读性也更佳。
CSS样式分离，我一般指的是“以单独的CSS文件将CSS样式分离出来”，此处的重用多针对不同页面的重用，就是说，一个样式文件，可以多个页面使用，这对于一些公共样式的重构是很有用的。当然，对于一些重要的页面，例如淘宝首页，直接将CSS嵌在了页面头部，其降低链接请求的重要性要大于样式的重用。
以上估计大家都是很熟悉与常用的，我一般不会拿一些众所周知的白蜡拿来嚼的。本文会展示一些新的东西，关于CSS样式分离再分离。本文核心不在于展示如果分离，而是传达一种“库”与“CSS高度重用”的概念，同时也是为后面的文章“我是如何对项目CSS进行架构”做铺垫的。

二、CSS样式分离之再分离
“CSS样式分离之再分离”表型上的两个特点为“分离”和“命名”，掌握与理解其深层次思想的关键是思维方式的转变，这包括“CSS库概念”意识。举个例子吧，依照现在主流的写法，下截图所示的灰色背景的框框命名与样式可能如下：
pic

也就是说，我们深处的整个自然，整个宇宙，仅仅通过5个元素就构成了。这5个元素，我们可以理解为基础，或者说是“库”。
如果我们把自然宇宙当作是一个复杂的页面，那么，这个页面仅仅使用5个样式就可以构成了！

再举另外一个例子，与我的大学生物专业相关的，人类的生老病死，复杂的行为，情感，归根结底都是有基因⤴控制的，而基因仅仅有5种不同类型的碱基⤴构成。也就是说，我们人类一切的一切都是有5中碱基（腺嘌呤、鸟嘌呤、胞嘧啶、胸腺嘧啶和尿嘧啶）构成的。

如果我们把人这个生物看做一个页面，那么这个页面仅仅使用5个样式就可以构成了。
不必深究细节，重在这类构成思想。

回到主题，我们的页面结构与表现是由CSS+HTML构成的，想想看，在CSS2中，总共有多少个属性，是很有限的。如果我们把CSS中的每个样式独立出来，作为最最基本的构成元素，就像基因中的碱基一样，那么，我们实际上、理论上要使用的CSS代码量是非常非常之少的，不会出现开心网一样高达81K大小的样式文件了。
如果CSS是碱基，那么理论上CSS文件大小仅仅是5个CSS属性的大小，如下：

前面提到，就理论而言，样