CSS样式分离

引导语：

 

    举个例子，依照现在主流的写法，下截图所示的灰色背景的框框命名与样式可能如下：



.topic_edit_box{display:inline-block; border:1px solid#ddd; background:#f7f7f7; padding:20px 40px;}

如果您有强烈的分离意识，尤其在大型的项目中，这段样式可能会是这个样子（注意命名）：



.dib{display:inline-block;}


.bdd border:1px solid #ddd;}


.bgf7{background:#f7f7f7;}


.p20_40{padding:20px 40px;}

注意：字面上很容易理解，就是把这段样式分离成一个一个单独的样式。当然，这只是表象，要想让样式再分离发挥其最大的功效，对其精髓思想有着较为深入的理解是很必须的，否则，您可能会用的很痛苦，或是滥用而产生其他一些问题。

理论上的优势：

想想看，在CSS2中，总共有多少个属性，是很有限的。如果我们把CSS中的每个样式独立出来，作为最最基本的构成元素，那么，我们实际上、理论上要使用的CSS代码量是非常非常之少的，不会出现开心网一样高达81K大小的样式文件了。

理论上的缺陷：

万物是相对，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>



因此在实际操作中需要在两者之间作出权衡。



实际上：



CSS有几十种不同的属性，撇开一些不定参数（例如宽度，高度，颜色值）的样式，CSS的基础构成也是非常有限的，例如下面截取的的一小段CSS库样式（命名仅供参考）：



.l{float:left;}                     .r{float:right;}             .cl{clear:both;}      

.tc{text-align:center;}             .tr{text-align:right;}       .tl{text-align:left;}  .tdl{textdecoration:underline;}     .tdn,a.tdl:hover,a.tdn:hover{text-decoration:none;}


.b{font-weight:bold;}          .n{font-weight:normal; font-style:normal;}


.vm{vertical-align:middle;}    .vtb{vertical-align:text-bottom;}

.vt{vertical-align:top;}       .vn{vertical-align:-2px;}

.fa{font-family:arial;}        .ft{font-family:tahoma;}

.fw{font-family:"微软雅黑"}    .fs{font-family:'宋体';}


.rel{position:relative;}       .abs{position:absolute;}     

.ovh{overflow:hidden;}        
.dn{display:none;}             

.db{display:block;}            .dib{display:inline-block;}    

.di{display:inline;}        
.cur{cursor:pointer;}

所以，理论上讲，几乎一半的样式效果，只需要上面这点CSS代码就可以了，例如，我们需要设置一个字体为“微软雅黑”，粗体，inline-block水平，相对定位的样式，则代码如下：

<strong class="fw dib rel"></strong>



样式的独立拆分，使得各种效果可以自由组合，这是有别于一个class类覆盖多个CSS属性的做法的。



样式的独立拆分，精简的CSS文件，每个样式的重用性可谓发挥到的最大。



同时，页面的后期维护变得异常轻松，样式冲突的可能性也是非常低的。实际上的CSS独立样式库不仅仅是上面展示的，还包括常见颜色，
常见margin于padding值，清除浮动属性等。



但是，物极必反，理论不能代表实践。如果我们把所有的CSS样式进行拆分。对于一些复杂的UI效果，例如圆角自适应的导航，则此处的HTML代码开销会非常之大，此时一味的样式再分离，会使得HTML代码变得很痛苦。



所以，我们需要权衡，何时分离，哪些要分离。

样式彻底分离的副作用

可以肯定的是，所有样式都要分离显然是不行的，更加可以肯定的是，目前基本上所有的网站的样式的分离都是不够的，远远不够，CSS也是需要架构的，而没有架构这一意识，分离反而会出问题。

不得不提的网页设计师

要想让样式分离发挥巨大的潜力，设计师在其中也扮演了至关重要的作用。如果遇到的是很随性的，细节要求不严的，没有固定设计准则的网页设计师，那么，抱歉，样式分离的惊人效用将大打折扣。不难理解，如果设计师交到你手里的页面，一个页面有多种字体颜色，不统一的间距，边框等等，这样的页面对前端来说无异是十分痛苦的。

隐形的阈值

实际上，我是可以保证，一个CSS文件就可以搞定整个网站项目（前提是网站的风格要统一，要是这一个页面婉约派，另外一个豪放派，那就没辙了）的。但是，不是每个人都可以实现的，这需要对CSS理解透彻，知道如何使用最简单的代码实现同样的兼容性的效果；还要知道对整站CSS进行架构，还需要知道样式要适时合并。

如果您跨不了这个阈值，分离的作用仅仅是一定程度上精简的CSS，减小了一些开发维护成本而言，其更强大的精简CSS文件个数的作用就体现不出来了！

重要的结语

我从以前讲布局思想，讲无CSSreset，到现在的CSS样式分离之再分离，以及后面的CSS架构，都是一个体系里面的。我清楚的指导，这些东西，其实很多优秀的前端人员也是知道一二，或是比我理解更深刻的。但是，对于大多数同行而言，可能认为我“又在挑刺”，其实不然。

我把我自己的理解讲出来，是希望让您知道，现在绝大多数的CSS写法，架构都是有很多不足的，缺少创新。我就这么跟您说吧，您所做的任何项目，其实根本只要一个CSS文件就足够，您要是真的通透了CSS的“分离”、“架构”，即使这个网站项目有100个页面（风格统一），您也可以只使用一个CSS页面，并且可以控制CSS文件（未压缩）在40K以下。

我是自信可以这么实现的。我最近做的项目50多个页面，未压缩（含大量注释，竖排）的CSS文件，就30K左右，服务器端压缩后仅11K左右，同时网站整站自适应，从内容到各个按钮，导航，全部宽度自适应，兼容性良好。

要想CSS足够精简高效，请使用流体布局，少或无CSS reset样式分离，样式合并，样式架构，理解所谓的“兼容性”。

原文地址：http://www.zhangxinxu.com/wordpress/?p=916