談談我對CSS層疊的理解

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

*******黃色背景部分是廢話，請忽略********

話說公司加上我，一共才三個前端，我從業一年多，另外兩位估計都在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的鉤子才是最適合的。

後來回想一下，我這個想法還是有些地方沒有考慮到，回頭再完善一下。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More