谈谈我对CSS层叠的理解

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：admin 阅读 302 次

*******黄色背景部分是废话，请忽略********话说公司加上我，一共才三个前端，我从业一年多，另外两位估计都在4、5年以上，本以为可以跟他们学到些许什么，不过经过一段时间的了解之后，才发现人

*******黄色背景部分是废话，请忽略********

话说公司加上我，一共才三个前端，我从业一年多，另外两位估计都在4、5年以上，本以为可以跟他们学到些许什么，不过经过一段时间的了解之后，才发现人浮于事，他们已经被时代甩了好几条街。本以为三个人的前端可以做很多事，会有自己的工具，会有自己的思想，会有自己的风格，可惜组长······无奈啊。早前就提过辞职，碍于老大的面子，总算同意明天辞职，这段时间也一直想把自己的一些思考写出来，但是又懒得动笔。上个星期告诫自己，不管写些什么，每天都来这里写一篇日志，以示警示，也希望有善于思考的人一起交流。

想起来规划CSS是源于这半年来的纠结，项目改动频繁，多次向组长提出要好好规划，可是他依旧保留自己的外包思想（没有BS其他人的意思）—— 做完就不管了。我始终觉得一个产品的维护性比开发重要得多，这些东西总归要自己用的，就像自己的孩子一样。可惜每次我提出的意见就被组长压下来，不接受意见，所以半年来一直给他们擦屁股。不过这更让我明白一个道理，合作就跟会思考的聪明人合作，找不会思考的人老实人干活。

废话还是少说，回归CSS吧。

CSS翻译过来叫做层叠样式表。样式这就不管了，我想说的是对层叠的理解。

层叠就像Java里面的继承与重载一样，虽然CSS里面也有继承一说，不过此继承非彼继承，CSS里面的继承是有选择性的（说法可能不准确，大意是某些会继承，某些不会继承，比如字体与边框）。

运用到层叠的时候，主要就是靠CSS的组合与子选择器。我用的时候，组合主要是用来添加属性（相当于扩展了一个接口），子选择器主要是用来覆盖属性（相当于重载一个方法）；很多人都告诉我，一个元素的CSS尽量少定宽度，起初我觉得这个很有道理，后来理解过来，才发现应该是一个子元素应该少定宽度，最好实现无宽度。让子元素随着父元素的宽度来改变。需要宽度的时候，我们就添加一个（组合）类，以实现一个扩展。沿着这个思路，我觉得不仅是宽度，padding，margin，这些影响块大小显示的都应该少规定。于是，经过层层选拔，除去width，padding，margin以后，剩下的那部分公用的，就是我的CSS基础结构，或者称作带有框架性质的抽象CSS，这里面除了基本的布局代码，其他都尽量避免使用ID，并尽量通俗化的命名。了解java的应该知道，java里面的抽象类是不能直接实例化的，显然这个抽象CSS是不能直接用的，要使用的话，必须给一个组合类或者用一个子选择器来来实例化它。

由于抽象CSS只会包含简单的公有属性，组合类的属性主要用来表达一些尺寸相关的属性，两者之间没有重叠部分，因此书写顺序并不会引起冲突。同理，子选择器的优先级肯定比抽象CSS的高，因此也可以放心的来书写。我想要达到的目的就是尽可能少的去重复代码，用可接受范围内的组合来拼出页面，实现CSS语义化的无缝迁移。

说得不清不楚，上个例子来说：

上面是当当的一个“书包”搜索的结果页面，可以看到有两个列表，怎么实现的大家因该清楚，我按照我上面说的意思照猫画虎写了

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        /*  RESET */
        html{ height: 100%;}
        body{ height: 100%; line-height: 1.5;}
        body,input,select,textarea{ font-size: 12px; font-family: "\5b8b\4f53" sans-serif;}
        body,p,dl,dd,ul,ol,h1, h2, h3, h4, h5, h6,form{ margin: 0; }
        ul,ol{ padding-left: 0; list-style-type: none;}
        img{ border: 0; }
        a{ text-decoration: none; color: #1A66B3;}
        a:hover{ text-decoration: underline; color: #1A66B3;}
        .fix {*zoom: 1}
        .fix:after {display: block;content: "$";height: 0;clear: both;overflow: hidden;visibility: hidden}
    </style>
    <style type="text/css">
        /* 基本布局 */
        #container{ width: 960px; margin: 0 auto;}
        #main{ display: inline; float: right; width: 760px; }
        #side{ display: inline; float: left; width: 190px;}
        .dis{ color: #9C9C9C; text-decoration: line-through;}
    </style>
    <style type="text/css">
        /* 列表的公用CSS */
        .data_list li{ padding: 8px;}
        .data_list li:hover{ background: #faf0e6;}
        .data_list .img{ display: block; background: #7fffd4;}
        .data_list .summary{ margin-top: 8px;}
        .data_list .summary .title{ display: block; }
        .data_list .summary .price{ display: block; margin-top: 8px;}
        .data_list .summary .price strong{ color: #C30; font:normal 18px Arial;}
    </style>
    <style type="text/css">
        .grid li{ display: inline; float: left; }
        .grid .img{ height: 200px; }
        .list .img{ height: 150px; }
    </style>
    <style type="text/css">
        .block{  margin-bottom: 8px;}
        .block .hd { margin-top: 1px; padding:5px 8px; border: 1px solid #d4d4d4; }
        .block .hd h3{ color: #fff;}
        .block .bd { border: 1px solid #d4d4d4; border-top: 0; }
        .h_1{ background: #8b008b;}
        .h_2{ background: #006400;}
        .h_3{ background: #adff2f;}
    </style>
    <style type="text/css">
        .data_1 li{ width: 200px; margin-left: 27px; font-size: 14px;}
        .data_2 li{ padding: 10px;}
        .data_2 .price{ text-align: center;}
        .data_3{ padding: 0 5px;}
        .data_3 li{ width: 350px;}
        .data_3 li .img{ float: left; width: 100px; height: 100px;}
        .data_3 li .summary{ margin-left: 108px;}
        .text_list { padding: 8px;}
        .text_list li{ line-height: 24px;}
    </style>
</head>
<body>
<div id="wrap">
<div id="container">
    <div id="side">
        <div class="block">
            <div class="hd h_1">
                <h3>热卖商品</h3>
            </div>
            <div class="bd">
                <ul class="data_list list data_2">
                    <li>
                        <a class="img" href="#"></a>
                        <p class="summary"><span class="price"><strong>￥89.00</strong></span><a class="title" href="#">特价迪士尼手表，母贝表盘全场包邮，还有三天</a></p>
                    </li>
                    <li>
                        <a class="img" href="#"></a>
                        <p class="summary"><span class="price"><strong>￥89.00</strong></span><a class="title" href="#">特价迪士尼手表，母贝表盘全场包邮，还有三天</a></p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="block">
            <div class="hd h_2">
                <h3>热卖商品</h3>
            </div>
            <div class="bd">
                <ul class="data_list list data_2">
                    <li>
                        <a class="img" href="#"></a>
                        <p class="summary"><span class="price"><strong>￥89.00</strong></span><a class="title" href="#">特价迪士尼手表，母贝表盘全场包邮，还有三天</a></p>
                    </li>
                    <li>
                        <a class="img" href="#"></a>
                        <p class="summary"><span class="price"><strong>￥89.00</strong></span><a class="title" href="#">特价迪士尼手表，母贝表盘全场包邮，还有三天</a></p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="block">
            <div class="hd h_3">
                <h3>热卖商品</h3>
            </div>
            <div class="bd">
                <ul class="data_list list data_2">
                    <li>
                        <a class="img" href="#"></a>
                        <p class="summary"><span class="price"><strong>￥89.00</strong></span><a class="title" href="#">特价迪士尼手表，母贝表盘全场包邮，还有三天</a></p>
                    </li>
                    <li>
                        <a class="img" href="#"></a>
                        <p class="summary"><span class="price"><strong>￥89.00</strong></span><a class="title" href="#">特价迪士尼手表，母贝表盘全场包邮，还有三天</a></p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="block">
            <div class="hd h_1">
                <h3>热点新闻</h3>
            </div>
            <div class="bd">
                <ul class="text_list">
                    <li>大减价吐血促销大减价吐血促销</li>
                    <li>大减价吐血促销大减价吐血促销</li>
                    <li>大减价吐血促销大减价吐血促销</li>
                    <li>大减价吐血促销大减价吐血促销</li>
                    <li>大减价吐血促销大减价吐血促销</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="main">
        <ul class="fix data_list grid data_1">
            <li>
                <a class="img" href="#"></a>
                <p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
            </li>
            <li>
                <a class="img" href="#"></a>
                <p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
            </li>
            <li>
                <a class="img" href="#"></a>
                <p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
            </li>
            <li>
                <a class="img" href="#"></a>
                <p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
            </li>
        </ul>
        <hr />
        <ul class="fix data_list grid data_3">
            <li>
                <a class="img" href="#"></a>
                <p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
            </li>
            <li>
                <a class="img" href="#"></a>
                <p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
            </li>
            <li>
                <a class="img" href="#"></a>
                <p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
            </li>
            <li>
                <a class="img" href="#"></a>
                <p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
            </li>
        </ul>
    </div>
</div>
</div>
</body>
</html>

效果图：

写完之后，发现还是不能明确表达我的意思。其实归根结底，还是为了CSS的重用与可控制性，同时当时我也是为了CSS的分层(把抽象CSS分到高层CSS文件去)，可惜被组长的“一个CSS搞到死"的思想扼杀了。

剥掉各种绚丽的JS效果，所有的网页大体都差不多，所以退一步说，一个网站的同一系列的页面，应该也是差不多的，这样就可以把组合的数量与页面的大小控制到一个最佳的范围。话说回来，一个页面用于CSS的ID过多，不是设计有问题，就是CSS代码有问题，id作用JS的钩子才是最适合的。

后来回想一下，我这个想法还是有些地方没有考虑到，回头再完善一下。

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。