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

　　.example{color:red; } 所有想让文字显示红色的标签都可以应用这个样式，这比10年前使用font标签，将color样式写在font标签上（尤其标签多时）要精简很多代码，代码可读性也更佳。

　　CSS样式分离，我一般指的是“以单独的CSS文件将CSS样式分离出来”，此处的重用多针对不同页面的重用，就是说，一个样式文件，可以多个页面使用，这对于一些公共样式的重构是很有用的。当然，对于一些重要的页面，例如淘宝首页，直接将CSS嵌在了页面头部，其降低链接请求的重要性要大于样式的重用。

　　以上估计大家都是很熟悉与常用的，我一般不会拿一些众所周知的白蜡拿来嚼的。本文会展示一些新的东西，关于CSS样式分离再分离。本文核心不在于展示如果分离，而是传达一种“库”与“CSS高度重用”的概念，同时也是为后面的文章“我是如何对项目CSS进行架构”做铺垫的。

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

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

　　高中时学习马克思主义哲学，记得有部分是关于理论与实践的，“理论指导实践”，这句话对我影响很大。在我看来，任何一门学问，要想做到一定的高度，必须有一定的理论基础，这个理论可以在别人看来或是100年后看来是错误的，只要能在当下解释清楚，自圆其说，这就是优秀的理论常用asp代码大全图片及名称下载网站安装教程视频。即使是做技术也是如此，我现在总是会从哲学中找到与现在所从事的技术所相同的地方，并将之归纳，以自己一套理论解释它，当然，这个理论不是凭空而来，而是在其他一些理论基础上建立起来的，例如，中国古代的那些传承千年的哲学观。

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

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

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

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

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

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

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

　　样式的独立拆分，使得各种效果可以自由组合，这是有别于一个class类覆盖多个CSS属性的做法的。样式的独立拆分，精简的CSS文件，每个样式的重用性可谓发挥到的最大，同时，页面的后期维护变得异常轻松，样式冲突的可能性也是非常低的。实际上的CSS独立样式库不仅仅是上面展示的，还包括常见颜色，常见margin于padding值，清除浮动属性等。

　　总结这一节的核心观点，其实不难理解，就是“构成的基本元素越是独立，越是最简，其组合的可能性，元素的利用率越是高！”，CSS样式越是分离，其样式的利用率和覆盖率就越高，CSS代码就越精简！

　　万物守恒，CSS的精简会导致部分HTML代码的开销增大。本节重点在于理论，实际情况下面再叙述。

　　前面提到，就理论而言，样式越是拆分的彻底，CSS代码越是精简，CSS代码的重用率以及单个页面CSS样式的覆盖率都会相当惊人。但是，物极必反，理论不能代表实践。如果我们把所有的CSS样式进行拆分。对于一些复杂的UI效果，例如圆角自适应的导航，则此处的HTML代码开销会非常之大，此时一味的样式再分离，会使得HTML代码变得很痛苦。

　　上面的问题不是一句话能说清楚的，其中有点只可意会的味道，这需要经验，以及结合自己的那套CSS准则，布局思想等！

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

　　要想让样式分离发挥巨大的潜力，设计师在其中也扮演了至关重要的作用。如果遇到的是很随性的，细节要求不严的，没有固定设计准则的网页设计师，那么，抱歉，样式分离的惊人效用将大打折扣。不难理解，拿间距来说，假设一个项目60张设计页面，结果模块间间距有的10像素，有的10像素，有的则15像素；或是内边距(padding)，没有统一的边距值，那么就会比较糟糕，分离出来的独立CSS重用性就很低，不但增加了CSS文件大小，页面本身就缺少统一性；或是颜色的例子，文字颜色凭感觉来，这里#333，那里又是#454545，然后又是#484848，这显然会有问题。或是宽度大小的设置等。

　　设计师设计要有模块化的思想，不要这里想到一个不多的设计效果，这里用一个，那里想到一个效果，就用另一个。这本身就缺少重用性，这会使得分离的效用大打折扣的。

　　我认为，分离的终极目的在于精简这个网站的CSS文件，将整个网站的CSS文件只精简至一个。于是这其中就存在一个阈值的问题，如果分离的功力不够，或是理解不够准确透彻，则网站的CSS文件就会大于50K，这时，可能就是又走上以前多样式文件，系列页面拆分的老路了。所以，其中就存在了一个隐形的阈值，是一个单CSS文件还是多CSS文件的阈值。

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

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

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

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

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

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

　　这里提到的6点，前两点在前面的文章中已经简单阐释过，第三点“分离”就是本文的内容，而后面的合并，架构，以及“兼容性”将在后面按顺序阐述。

　　最后，还想强调一下适应性的问题。这里提到的“体系”纯粹是自己思考，积累形成的，是否对其他人适用，我是很怀疑的，尤其一些自认为CSS还不错，有一套自己固有模式的同行。人总是不同的，对CSS关注的地方也有所差异，成长学习经历不同，所处的团队不同，种种因素使得这些我认为非常有用，百益无一害的方法、思想在别人看来狗屁不通，一文不值，这也是可以理解的。

　　最后的最后，我呢，其实从业时间也短，资历还是有限的，有些想法，观点或许有不准确之处，欢迎各位同行指正。也欢迎发表您的观点，或是通过评论或是点击这里⤴与我进行沟通交流。

　　课程开始： 前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动&...查看详情

　　上节课我们将导航条做成了下面的效果但是此时的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条【第四步】 我们需要将上面的导航条做以下几个修改 1）给上面的导航加上链接； 2）链接文字大小修改为12px; 3）并且规定链接样式常用asp代码大全图片及名称下载网站免费安装视频，鼠标移上去和拿开的效果 修改方法如下 1...查看详情

　　【第一步 整体布局与公共CSS定义】我们先来分析一下这个页面页面主要分5大块，顶部的Logo、导航条Nav、Banner、Content、Footer，如下图 下载 (116.12 KB)2009-6-1 09:22这样HTML就很容易写出来了复制代码代码如下: <div ...查看详情

　　【第七步 内容左侧板块(ContentL)布局】 我们分析一下他的结构，主要包括标题和文章内容两块，并且标题和内容之间有一条虚线，而第二篇文章的内容部分是图片和文字相结合且文字环绕图片。 好~！既然搞清楚结构了，后面我们布局就容易了 我打算标题用<h1>标签，为什么这...查看详情

　　如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用...查看详情

　　如果你还是不能太明白这句话，我们就做个实例，把我们第5节页面的头部blog区域用定位(position)来布局一下 HTML代码和原来的没有区别： 复制代码代码如下: <div id=Logo> <a href=# id=logoLink>&l...查看详情

　　说到浏览器兼容性问题，就必须说CSS Hack！提到Hack大家肯定会想到电脑黑客(hacker)、和病毒程序联系到一块，不过在CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法。说的更直白一些就是，你平时做个页面，布局正确，CSS正确，可就是在不同的浏览器中显...查看详情

　　代码如下： HTML代码： 复制代码代码如下: <a id=theLink></a> CSS代码： 复制代码代码如下: #theLink{ display:block;/*因为标签a是内链元素，所以利用这句话将内链元素转化成块状元素，后面的width和...查看详情

　　前言为了帮助确保你的网页在所有未来的IE版本都有一致的外观，IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式，文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。新的IE为了确保网页在未来的版本中都有一支的外观，IE8引入了文件兼容性。当你引入一个增设的兼容性模式，...查看详情

　　使用CSS来修饰滚动条 1．overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2．scrollbar-3d-ligh...查看详情