东东日记

我们很多人会觉得在样式表中放一个这样的类，使用很方便。
.b {font-weight:bold}
<span class=”b”>一段文字</span>
但我觉得这违背了前端结构与表现分离的原则，因为这个类和直接写inline style没差
<span style=”font-weight:bold”>一段文字</span>
这就引入一个话题，我们应该如何规划class呢？什么样式才能被赋予一个class上呢？我的理解是：CSS类应该对应一个页面元素的所有表现（也有例外，比如有些元素上被赋予两个类，属于多种可剥离的可复用的样式模式，不在这里赘述了）。反映到这个实例上来，正确的写法应该是
.sth {font-weight:bold;other:otherstyle}
<span class=”sth”>一段文字</span>
实际给我们带来什么好处？那就是结构与表现分离给我们带来的好处。下次改版说这里不加粗了，那在前者中你得去改HTML把CLASS b去掉（强行改class b的属性也行，那我比较无语），而后者，你只需要修改样式表。
.sth {other:otherstyle}
有人可能会挑战这样一个推理过程：这是有代价的，给每个结构赋予一个不同的class，当然耦合小，改版最灵活了，但带来的是庞大的样式表，包含大量的class。我的解释是：这个问题确实存在，解决办法就是用你丰富的经验，合理抽取在本页，或者本站中可复用的样式，编写为对应的class。每个剥离出来的class不应该过细，细到对应单个视觉表现，类似于本文提到的加粗。而应该是对应一组视觉表现，这组视觉表现用于描绘一个完整的模块。

Apache SSI module let you add content to an existing HTML page directly by Apache, without having to serve the entire page via a CGI program, or other dynamic technology, such as PHP.
It’s simple and helpfull specially for f2e since it doesn’t need any back end envirement. You can separate various shared HTML blocks from [...]

table的行和列在没有设置width或height的时候，会依据浏览器渲染引擎的算法，被赋予一个值以达到table充满整个宽度或高度，从而使得每个表格都是方方正正，不会缺一块。这就是表格相对别的元素所特有的自适应特性。有时候我们可以利用这个特性做一些CSS做不了的特殊布局。
最典型的应用是两列等高布局，这样不管左右列哪一列内容高作为表格的高度支撑列，两边都能齐平。比如想要设置某一边背景色充满整个高度，设置td的背景色即可。这是DIV+CSS无法做到的。如下图所示：

但当一列有多个td，并且开发者还对某些td设置了固定的值，情况就变得复杂了，因为渲染引擎要处理用户的设置值，同时要兼顾齐平的table特性。IE6和IE7不能很好的处理这个问题，导致了bug，如下图所示：

这儿也提供了该bug的演示页面
图中，红色固定高度设置为了30px，但实际在IE6和IE7下，由于受到浏览器引擎对自适应方面的“智能”齐平处理，导致，这一个td的高度不能限定在30px，而是要高一些。IE6和IE7渲染引擎的脆弱可见一斑，庆幸的是IE8中已经不存在这个bug。

看了一眼国内第一大SNS网站开心网的“我的首页”源码，看到了如此践踏优化原则的一幕，就没必要再往细里看了。

1、过多的请求没有进行合并。
2、大量的JS文件放在了head里面阻塞正文加载。
我家的3M电信宽带条件下访问，清空缓存访问这个页面的大致情况是：
Firefox能几乎无等待看到页面出来，最后一共只花2秒钟左右加载完毕，感觉并不是太糟糕。打开瀑布图，看到对js已经不是阻塞下载方式了，有三四个请求同时进行。
而IE7则糟糕了一些，有一个明显的等待时间才能看到内容，整个加载完用时长一些，总体感觉比firefox慢，但是可以接受。
暂且不管开心网在网络状况不好的地方会有多慢，如今的高网速和越来越先进的浏览器下载技术，可以让如此糟糕的前端部署访问起来又显得不是那么糟糕。这在一定程度上，确实可以解放前端开发者，降低了前端开发的门槛，并且让开发者们把注意力放到业务开发中去。