html结构的拆与合

本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载

写下这篇标题的时候，脑海中突然闪过《三国演义》的纲领——天下大势分久必合合久必分。也许html结构也如是，总是在拆拆合合中演绎着一段段神奇的故事。

玩过七巧板的都知道，虽然看起来只有七块，但随便拼装下就是一份不一样的惊喜。而对于重构也一样，常用的标签也就那么几个，但是经过一番拼凑就会呈现出不一样的美。

闲话暂且不表，先来个本文思路来源的实例。

断续进度条

下面是一个进度条，估计大家大概一眼就可以看出这个进度条与普通的不一样，这个进度条是有缺失区域的，有点像被老鼠偷吃了，断断续续的。

这个原本是一个朋友发给我的，问我有什么好的建议，当时想了想也确实想不到什么好的办法，就只好说一个个切吧，那就是本文所说的拆了，结构如下：

底部灰色由progress的背景实现，其余每个done表示一个蓝色段，每个undo表示一个灰色段，各自设置对应的宽度

.progress
    .progress-done
    .progress-undo
    .progress-done
    .progress-undo
    .progress-done
    ...

第二版本

去掉了undo，直接对done使用绝对定位（因为progress容器的灰色跟undo灰色是一样的）

.progress
    .progress-done*n

第三版本

在常规的进度条上使用绝对定位添加undo，相对来说这个版本更好，可以在常规与特殊化之间进行方便的切换

.progress
    .progress-done
    .progress-undone*n

从上面三个版本总结来说：第一个版本是不管三七二十一，都拆了；而第二个版本是加入了一些思考，把蓝色的拆了出来，把灰色的合在一起了；而第三个版本则是在第二个基础上再根据实际场景转化，进一步优化拆与合的思想，先把断断续续的蓝色合成一个，然后通过灰色一个个去拆，以达到视觉上的拆开蓝色。这就是本文拆与合的思想来源。

下面我们继续领略下拆合之美。

扩展应用

标题右侧内容

先来个简单常见的，标题右侧有操作的，如下图：

对于第一个html结构如下：

.block-hd
    h3.block-tt
    a.link-xxx

对于第二种结构，我们就得用到合了，不能再是简单的罗列了，代码如下：

.block-hd
    h3.block-tt
    .hd-right
        a.link-xxx
        a.link-xxx

对比这两种情况，第一种只有一个操作，我们可以直接对操作定位在右边；而第二种有两个操作（甚至更多操作），这时候我们就不能再简单的一个个去定位了，而是增加一个包裹（hd-right）把所有的操作合在一起，然后对包裹进行定位在右侧。

这里我们把零散的组合在一起定位，体现了合的基本原则。

经典的图文混排

如下图：第一种是最简单的，左边图片右边文字；第二种左边图片下面还有内容，可能是标题，也可能是一些操作；第三种在第二种基础上右边又出现了一部分内容

下面我们对结构进行一次次演变：

// 极简主义
.imgtext-mix
    img.mix-img
    h3.mix-tt
    .mix-intro

// 添加链接
.imgtext-mix
    a.mix-img-link>img.mix-img
    h3.mix-tt>a.mix-tt-link
    .mix-intro

// 第一次合，将图片右边内容包裹
.imgtext-mix
    a.mix-img-link>img.mix-img
    .mix-text
        h3.mix-tt>a.mix-tt-link
        .mix-intro

// 第二次合，将左侧图片等内容进行包裹
.imgtext-mix
    .mix-left
        a.mix-img-link>img.mix-img
        .left-oper
    .mix-text
        h3.mix-tt>a.mix-tt-link
        .mix-intro

// 第三次合，将最右侧信息进行包裹
.imgtext-mix
    .mix-left
        a.mix-img-link>img.mix-img
        .left-oper
    .mix-text
        h3.mix-tt>a.mix-tt-link
        .mix-intro
     .mix-right
         ...

先从极简主义出发，然后根据空间原则，一步步组合，从结构上进行空间上区域的划分，实现需要的效果，这是由简单的一锅煮到分类煮，由拆的本质到合的美学体现。

其他拆合

从最终要实现的效果来说，我们对结构要做的无非是上下，左右，脱离与覆盖的拆合。第一个进度条的例子很好的说明了覆盖的拆合（星级评论也可用到），扩展应用的说的更多的是左右的拆合，下面我们继续说说上下与脱离的拆合。

上下拆合

这个最典型的莫过于网站整体布局了，可详见HTML整站结构设计

header.header>.inner-center
section.section-mainr>.inner-center
footer.footerr>.inner-center

脱离拆合

如果从使用css实现的结果来说，所有要应用fixed，absolute的结构都属于脱离的拆合。这里最典型的莫过于fixed导航，及fixed的右下角的回到顶部，效果请看w3cplus，当你滚动滚动条的时候会发现顶部导航一直fixed在顶部，而右下角会出现一个返回顶部的小按钮

说了这么多，总结起来就是：html结构中到处都映射着拆与合的思想。

拆合之道

所谓拆，就是尽可能让每个元素独立或者是每个效果独立。元素独立这个比较简单，比较好理解，就是给每个元素都有各自对应的标签；而效果独立这个就得去根据实战分析，灵活使用了。

而所谓合，就是尽可能少用元素或把一些元素使用标签包裹组合起来以达到统一控制。少用标签这块，one div这种已经做出很好的解释了，css3的进步为这提供了强有力的技术保障；而对于包裹组合这个也得根据实战去取舍。

总之，html结构肯定不是越简单越好，当然也肯定不是越复杂越好，而是建立在拆合之上的一种取舍之道。

本文首发IMWeb，如转载，敬请注明地址。