网页布局、样式精简总结记录（二）

一、CSS样式分离之再分离（即库与CSS重度重用）

1.1 分离

分离作用：精简与重用
CSS样式库也分为“通用库”，和“当前项目库”
CSS样式分离，一般指的是“以单独的CSS文件将CSS样式分离出来”，此处的重用多针对不同页面的重用，即一个样式文件，可以多个页面使用

对于一些重要的页面，例如淘宝首页，直接将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;}

即把上述样式分离成一个一个单独的样式。

1.2 分离的基础

用最基础的样式形成基础库，再此基础上进行组合从而布局出复杂页面
页面结构与表现是由CSS+HTML构成的，在CSS2中，属性是很有限的，可把CSS中每个样式独立出来，作为最最基本的构成元素。

分离的CSS样式足够多，HTML挂载的选择符越多，分离的少，CSS样式不够灵活。要在这两者之间抓到一个均衡点。

实际上，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{text-decoration: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代码就可以了，基本上都可以用上面的进行组合。

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

构成的基本元素越是独立，越是最简，其组合的可能性，元素的利用率越是高

1.3 样式彻底分离的副作用

CSS样式怎么分？分离哪些？分到什么样的程度才ok？（CSS分离的标准、分离的程度怎么确定）
样式精简与重用的矛盾怎么解决。
CSS样式需要架构
从重用性考虑，需要设计师有模块化思想，即不能太随性，需要用一定设计准则，否则缺少重用性；
分离的程度：一个单CSS文件还是多CSS文件

如何做到CSS精简高效？
使用流体布局，少或无CSS reset，样式分离，样式合并，样式架构，理解“兼容性”

将HTML进行模块化设计，

二、CSS的样式合并与模块化

分离可以精简CSS代码，合并也可以精简CSS代码，找到均衡点。
“通用库”属于很良性的东西，任何网站都可以拿来用，不会产生什么副作用，因为其与当前项目的结构，样式表现没有必然的关联。
“实际项目库”是根据当前实际项目分离出来的独立样式集合，如各个都分离出来，如背景、边框等，如要修改模块化的样式也是使用的分离样式组合而成，那么后期修改样式可能会有很多样式需要替换。

2.1 模块化

“模块化”专指“页面元素”的模块化
样式再分离是应用到“模块化的独立元素”上可那会产生后期维护的问题，并不是应用到“页面模块”会产生后期维护的问题
如网站通用按钮，通用选项卡，通用小图标，或是页面的一些固定框架结构等。这些元素是不适宜使用样式再分离的

2.2 CSS样式合并？

CSS样式合并，指的是一些不可分离的样式（按钮，图标等），将他们公共的样式部分进行合并，非公共的再次独立出来，以减小CSS文件的大小。

使用最多的合并也是背景图片的合并
其次就是一些效果类似但又不完全一致的模块化元素
样式的合并，没有规律性可言，一般，遇到结构或是写法类似但又不完全一样的元素的时候，就可以使用样式的合并
使用英文字符的逗号(,)分隔样式名，将相同的样式写在后面。项目不同，情况也各异，要想达到充分的样式合并，前期的设计与架构很重要。

2.3 CSS分离与CSS合并的共存

这里的CSS分离指的就是在实际项目中分离出来的“实际项目库”

一般情况下，“分离”与“合并”处于CSS文件的不同部分，两者是不直接相连的。“分离”一般针对那些非模块化的元素，而“合并”多针对模块化的元素，所以两者是对立的属于不同类别的，之间不会产生什么冲突。由于两者都有精简CSS代码的作用，所以双管齐下，事半功倍。

模块化元素是不适宜使用分离的。如文本框，在其上面添加淡灰渐变背景，效果如下（图片也来自于张鑫旭博客）：


此处文本框就是整站通用的独立的“模块化元素”，是不推荐使用分离的。整个网站，文本框的宽度有好几种，不可能针对每个宽度写一个独立的样式的。将公共部分提取出来（假设class为inset），不同的是宽度，这里宽度的选择符命名取名是关键

.inset {    height:16px;    background-position:0 -220px;    background-color:#fff;    border: 1px solid #e0e0e0;    padding: 3px 0 2px 2px;}

.w50{width: 50px;}.w70{width: 70px;}.w90{width: 90px;}

上面取名不合理，不利于后期改动(如修改第一个宽度为55px,类名改为.w55，可能会影响后面也使用.w50的标签），分离应体现在命名上，改为如下：

.txtw1{width: 50px;}.txtw2{width: 70px;}.txtw3{width: 90px;}

接下来只需将.txtw1、.txtw2、.txtw3 、inset 挂载到相应HTML上即可。
上面.txtw1是独立样式，却不能当作分离样式使用，如果要将其当做“分离”使用呢？这里合并要开始上场了，我们可以将分离样式与内容语义的独立样式进行合并，就可以实现样式分离重用又没有后期维护潜在风险的问题。如，做另一个列表，列表宽为50px;，只需分离出一个宽度样式w50，然后于txtw1进行合并。这样即实现了重用，又避免了后期修改的风险。

.txtw1, w50{width: 50px;}

上述代码即体现了“分离”与“合并”共存。

2.4 精简高效的CSS代码需要各方配合

涉及人员：前端工程师、设计师、后台程序工程师

样式再分离，最怕的就是整站通用的模块化元素。对后端工程师要求：要有模块化的思想，系统有良好的架构

三、如何对网站CSS进行架构？

对CSS进行的分类方式：

• 分为header.css, body.css, footer.css；
• 分为reset.css, main.css, content.css；
• 分为common.css,然后每个种类的页面一个CSS（如home.css(主页), album.css(相册页面),message.css(站内信页面),blog.css(日志页面)等）；
• 分为base.css，然后每个活动页面一个单独的CSS；
• 直接将CSS嵌在页面中，而非外部链接调用

每个CSS文件的内容：CSS reset（样式重置）+有着统一前缀，命名较长的样式内容

3.1 如何对网站CSS进行架构

只使用一个文件

3.1.1 整个CSS结构

(图片来自张鑫旭博客）

3.1.2 关于CSS reset

基本上是不需要

body{    line-height:1.4;    color:#333;    font-family:arial;    font-size: 12px;}input,textarea,select{    font-size:100%;        font-family:inherit;}body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{    margin:0;}h4,h5,h6{    font-size:1em;}ul,ol{    padding-left:0;     list-style-type:none;}/*image with no-border*/img{border:0;}

3.1.3 关于CSS通用样式库

CSS通用样式库就是可以在任何网站使用的CSS样式库
张鑫旭的通用样式库

3.1.4 网站CSS样式库

根据当前实际的项目内容指定
网站CSS样式库又可以架构为以下几部分：

• 常见颜色（如链接色）
• 常见背景色（.bg+颜色前两字母）
• 常见边框色（一定要告知设计师，边框取色不宜多，不能凭感觉，要有所牺牲）
• 遗留的单margin属性（有div空白较多，有属性margin-top:20px;，将这个属性放在CSS样式库中，方便后面类似布局调用）
• 遗留的单padding属性 （双栏自适应布局时，无论是浮动自适应，还是绝对定位自适应，都需要使用padding-left值，此时的padding-left多单样式，可抽取出来，以网站样式库的形式存在。记住，是单属性，且不可从通用元素中抽取单独的padding值，否则是给自己挖火坑。……这个火坑我已经跳过一次了！）
• 遗留的width属性 （流体布局时，宽度是有限的，需好好利用）
• 常用的一些height属性 （指一些高度值，例如height:18px; height:20px; height:24px; 等）

原则：网站通用的元素（按钮，导航，选项卡的）的样式千万不能分离作为网站的CSS样式库

3.1.5 网站通用小图标样式集

小图标的样式合并是普遍处理的较好的，其规律可循
一般合并样式部分样式为{background:url(xx.png) no-repeat;}，分离部分的样式是{background-position:x, y;}

小图标样式命名，不要关联图片的内容。原因：

• 图片名字命名不好取
• 名字命名长，占字节数
• 后期不易维护

使用一个不常用的标签作为网站的小图标专用标签，例如s标签，或是u标，使用矩阵命名法，命名只关联位置。优点：

• 命名冲突
• 后期更换图片，不用重命名

3.1.6~10 网站通用样式

网站通用样式专指“独立元素”的通用样式，所谓“独立元素”指的是网站通用的导航，菜单，按钮，选项卡，文本框装饰，图片装饰，圆角处理等等。
不能对其这些“独立元素”的样式进行分离并归入“网站通用样式库”中，不利于后期维护。

按钮宽度自适应：尽量不对按钮或是导航进行定宽，应让宽度自适应，这样可节约Sprite背景图片以及CSS代码的成本。

3.1.11 网站公共结构样式

主要指的最外框div的样式，一般限制网站的宽度(960~990不等)
还有就是网站的分栏布局样式，这里的样式仅仅针对主体结构，例如left_part，或是right_part；还包括网站的头部的一些公用结构，底部的样式结构等。

建议：公共结构仅仅定宽定高，设置浮动属性，不可在结构样式上添加margin或是padding属性，这会使网站的公共结构重用度降低！

3.1.12 单页面的精细结构

上述11项您都架构的非常好，那么您在编写每个具体页面的时候，就会非常轻松，非常迅速。因为80%~90%的样式都可以从上面11项中直接拿来用（上述11项全部都是网站公用样式）。

整站的角度上去思考CSS，有助于写出精简高效的样式代码
1-11项都完成了，就开始着手写页面
新增的代码开销地方：

• 分离一些样式归入“网站CSS样式库”中
• 凡事使用的CSS Sprite的样式与其他样式进行合并
• 一些精细的复杂的样式(命名都应该跟随内容而不是属性本身)

opacity:0 的作用和 visibility:hidden区别？
opacity:0 可以触发点击事件啊 visibility:hidden 不会触发 而且会导致页面重绘

四、CSS页面重构之“门派”之分

写页面，有限条件下的权衡，即适当的取舍
页面重构代表性站点是“腾讯网”和“Google”，前者是“兼容体验派”（更好的视觉体验、兼容性），后者是“扩展性能派”（准则：简洁、成本低、页面加载速度快，同时有最大化的视觉体验，特点：流体布局，页面扩展性、简洁以及性能方面良好）

页面的重用与扩展性，其次就是性能
扩展性例子：

如下一层标签即可：

.box{width:430px; padding:20px; border:1px solid #ddd;}

<div class="box">    <strong>温馨提示</strong><br />    团购成功后，消费凭证将发送到手机：<strong class="cr">132 0803 3621</strong>，凭短信去商家消费。</div>

如果考虑到扩展性，以及流体布局：用两层标签
将width属性与padding分离在不同标签下。外层标签就负责宽度或者与之分离的margin属性，这样可以提高CSS的重用性、页面的容错与自适应能力。

.box{width:470px;}.box_in{padding:20px; border:1px solid #ddd;}

<div class="box">   <div class="box_in">        <strong>温馨提示</strong><br />        团购成功后，消费凭证将发送到手机：<strong class="cr">132 0803 3621</strong>，凭短信去商家消费。    </div></div>

在这类非公用功能模块上，外部box的class一定会以w470分离出来作为网站通用样式库。而padding:20px;属性可由p20代替，p20来自CSS通用样式库。这些都是无关紧要的，主要的是，为何这里需要两层标签，要将padding值放在里面一层标签上。

padding值放在里面一层标签：自适应布局，padding会增加box的占据高宽，border属性也是如此，所以padding/border一定要与width属性分离，这样页面模块会有更好的扩展性，出bug的可能性也会降低，没有计算，宽度就是宽度
两层标签：将宽度标签单独剥离出来可以提高扩展性与重用性

CSS与HTML代码的重用性与扩展性是否足够高，CSS代码是否足够简洁，性能是否足够高，对于所谓的兼容性（也重要）不是最先决的条件

五、精简高效的CSS命名准则/方法

怎么命名比较好？如何避免样式冲突？

5.1 面向属性的命名方法

习惯在CSS命名的时候掺杂语义，这样可以让代码更易懂
命名不合理会大大限制CSS重用性
如何命名才能让CSS发挥最大的重用性潜力呢？(分离后样式的命名就是样式本身)
“面向属性的命名”就是针对自身属性的一种命名方式，只会overwrite，不会冲突

.side-item-header{padding:0 0 8px; text-align:right;}

上述代码进行分离如下：

.tr{text-align:right;} // CSS通用样式库.pb8{padding-bottom:8px;} // 网站通用样式库

现在上面分离出来的样式又可以被其他地方使用，不过如果网站本身的架构不是对每个侧栏内容进行模块化处理的话，这种方法是不可取的。
不要对网站通用的元素进行分离
对于网站非通用元素，如果样式简单(1~2个属性)，对其分离并使用面向属性的命名方法

5.2 精简高效CSS命名之“三无原则”

“三无原则”：无ID，无层级，无标签
CSS命名就应该最简单、最直接，没有HTML标签，没有层级。

• 限制重用
  使用层级(#test .test)，会使用标签(ul.test)，如果不是为了改变CSS优先级的话，应避免使用
• CSS文件大小（CSS名称不宜太长）
• 降低了渲染效率

<div id="test">    <ul class="test"></ul></div>

给这里的ul标签一个样式，比如padding-left:25px;那么下面四种写法哪个渲染速度最快？
#test .test{}， ul.test{}，#test ul{} 以及.test{}

ul与.test 不好比较哪个渲染速度更快，但一旦牵扯到层级与标签，.test这种最直接的命名方式渲染效率是最高的。
CSS渲染元素和使用JavaScript获取页面元素那是完全不一样的。如用JavaScript获取DOM元素，则#test ul{}速度是最快的
CSS的渲染方式是“从右往左”渲染的，就拿#test ul{}举例，先渲染页面上所有的ul标签，再去寻找id为test的元素
CSS命名，只要出现了层级，出现了标签，就是一次额外的渲染，层级越多，渲染的开销也就越大（尽量避免过深的层级，做到“无层级”，“无标签”）

5.3 “三无原则”遗留之样式冲突问题

层级，标签可以避免样式冲突，虽然“面向属性的命名”不存在冲突问题，但是，页面上很多样式是无法分离使用“面向属性的命名”的，此时，一不能有层级，二不能有标签，如果避免冲突呢？

规范。项目组所有人的命名方法，习惯都要统一。
其次，也是实际的做法，同一内容，使用同一前缀。

小结：
精简高效的CSS命名的关键字有“分离”，“统一前缀”，方法为“面向属性的命名”，准则为“无层级、无标签”。
“分离”是“面向属性命名”的基础。“面向属性命名”和“无层级、无标签”属于两个不同的系列，一个针对短命名属性，一个针对长命名属性。

六、页面重构“鑫三无准则” 之“无宽度”准则

“无宽度”、“无图片”和“无浮动”，目的是使CSS布局模块化以及增强可扩展性

6.1

切图：精确测量、计算每个元素的宽度，计算的时候还考虑到margin，padding以及border，总是精确到像素级，然后使用浮动进行无缝拼接————很初级和急需提高的阶段

一是开发效率低下（要计算宽度什么的）；
二是结构的重用性和可扩展性就是个不好；
三是页面的日后可维护性差（错位等bug像要债的一样三天两头串门）
使用宽度计算+横向拼接的做法不仅浪费精力、开发成本，最终实现的页面其实也是比较脆弱的。

固定的宽度值限制了页面内容的重用性和扩展性，所以，要想页面布局具有较高的重用性和扩展性，我们需要遵循“无宽度”准则。

“无宽度”准则对比demo
“无宽度”具体指的是没有固定的宽度值（尤其是以px为单位的宽度值，em需看具体情况，%百分值不在其中）