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

2020-04-28 08:11:15易采站长站整理

即使没有读过关于中国古代的一些哲学著作,例如《老子》《易经》,也应该在中国的神话剧中听过一些哲学观点,这些观点往往都是这些哲学体系的核心。例如:“无极生太极,太极生两仪,两仪生四向,四向生八卦,八卦生五行”。

按照“五行”学说,大自然是由“金木水火土”这五种要素所构成,随着这五个要素的盛衰,而使得大自然产生变化,不但影响到人的命运,同时也使宇宙万物循环不已。

五行图片 张鑫旭-鑫空间-鑫生活

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

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

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

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


A{a~~}
G{g~~}
C{c~~}
T{t~~}
U{u~~}

也就是说,最小的CSS文件不足50个字符大小。万物是相对,辩证的,CSS虽然理论上非常之小,但是,要实现同样的效果,HTML代码量就是非常庞大,于是可能会有类似下面的HTML代码:


<div><span class=”A”></span><span class=”A”></span><span class=”G”></span><span class=”A”></span><span class=”G”></span><span class=”A”></span><span class=”G”></span><span class=”C”></span><span class=”C”></span><span class=”C”></span><span class=”A”></span><span class=”T”></span><span class=”T”></span><span class=”A”></span><span class=”G”></span>…</div>