[Layout] Web Design Part 10

由於我沒有娘家可以回，所以大年初二在家寫寫部落格也是很合理的。當然也因為這樣，~~省下不少紅包錢~~買來的紅包袋只用了兩個，實在有點太說不過去了。

小的時候很期待回去外婆家，長大了，外婆家原本的地址已不復在。然而，我卻有種近鄉情卻的憂愁。

SELECTOR

上一回聊到了一些選擇器，雖然我好像有很多都沒有交待到，但是，基本上選擇器的用法都如出一轍。雖然說 w3c 提供了那麼多的選擇器，但是，由於瀏覽器支援的程度差異，導致這些東西未必全部都可以使用（~~IE 表示：~~）。

我們以一個簡單的例子來說明各種選擇器的使用時機，

<div id="container">

    <header id="header">
        <h1 class="slogan"></h1>
        <h4 class="description"></h4>
    </header>

    <nav id="navigation">
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </nav>

    <div id="main">
        <article class="entry">
            <h2></h2>
            <p class="categories"></p>
            <p class="content">
            </p>
        </article>
    </div>

    <aside id="sidebar">
        <div class="sidebar-element">
            <h3></h3>
            <div class="content">
            </div>
        </div>
        <div class="sidebar-element">
            <h3></h3>
            <div class="content">
            </div>
        </div>
    </aside>

    <footer id="footer">
        <p></p>
    </footer>

</div>

面對一個切版完成的 HTML 來說，你必須要知道的事情是，

你的 DOM Tree 結構，是為了要達成視覺設計的結果
你的 CSS 樣式表，能夠順利操作 DOM 來達到上述目的
最終輸出的結果可能會因為瀏覽器，而發生各自表述的問題

倘若我們在不考慮第三點的情況下，那你大抵上可以任意使用各種新式的選擇器。

#container {
}

#header {
}

#footer {
}

#aside {
}

#main {
}

大的結構其實很簡單，把 ID 選擇器挑出來就好了。那其他的部份呢，

#header > h1.slogan {
}
#header > h4.description {
}

#main > article.entry {
}

#main > article.entry > h2 {
}

#main > article.entry p {
}

#main > article.entry p.categories {
}

#main > article.entry p.content {
}

#sidebar > div.sidebar-element {
}

#sidebar > div.sidebar-element > h3 {
}

#footer > p {
}

眼尖的你應該發現了，我並沒有特別使用什麼特殊的選擇器。這是習慣性使然，這種事情寫久了，你就會下意識的避開某些，瀏覽器無法實現或是實作有問題的選擇器。這，當然就要歸功於我們偉大的 IE6/7/8 了。

適用時機

選擇器是這樣，沒有人規定你什麼不能用、什麼可以用，這會隨著你的使用習慣而有所不同。不過，雖然樣式表的表述方式因人而異，不過還是會有一些事情是我們不小心會遇上的。

重複的樣式定義
過多選擇器
選擇器權重陷阱
DOM Tree 陷阱

雖然網路上有很多文章在教你怎麼寫出，或是避免掉一些 CSS 選擇器的問題，不過，那也是經驗累積而來，沒有真正遇到，你也不會有深刻體驗的。

這裡有篇老文章，但是值得參考：Taming Advanced CSS Selectors

#×重複定義

最早開始寫樣式表的時候，時常會遇到這種情況。這並不是什麼缺點，而是一種會讓你的後續維護，變得相當困難的一件事情。

article.entry p.description {
    color: blue;
}
article.entry p.content {
    color: blue;
}

對於 p.description 與 p.content 來說，顏色雖然都是藍色（blue），但是，其實我們可以換一個方式來作。

<p class="categories text-blue"></p>
<p class="content text-blue">
</p>

.text-blue {
    color: blue;
}

也許你會這麼問，為什麼不直接使用 article.entry p 來定義藍色就好？相信我，當你的 DOM Tree 愈趨複雜時，這會是場惡夢。

<p class="categories text-blue"></p>
<p class="content text-blue">
</p>
<p class="footer-note">
</p>

如果你使用 article.entry p 來定義，那麼 .footer-note 也會跟著變成藍色。你就得多消費一組設定，將顏色改回來。

#×過多選擇器

以往我們在觀察 DOM Tree 的時候，因為我們可能需要定義到相對複雜的子元件上，所以會用了相當多的選擇器，來達到我們所要得結果，

<aside id="sidebar">
    <div class="sidebar-element">
        <h3></h3>
        <div class="content">
            <img class="author-icon" src="" width="" height="" alt="" />
            <p class="content">
            </p>
            <p class="back-to-top">
                <a class="top-link" href=""></a>
            </p>
        </div>
    </div>
</aside>

如果我想要定義 a.top-link 這個標籤，讓他變成灰色（gray），那麼我們會怎麼做？最直覺的作法是，

.top-link {
    color: gray;
}

問題來了，我除了 #sidebar 裡面有這種設定外，我在 #main 裡面也有的話，該怎麼辦？這個時候，我們通常會用選擇器來限制這個項目的適用性。

#sidebar .top-link {
    color: gray;
}

然後我們可能又會發現，我的 #sidebar 裡面，不只有一個地方用上 .top-link，然後我們繼續加上選擇器，最後變成了，

#sidebar .sidebar-element .content p.back-to-top a.top-link {
    color: gray;
}

你算得出來總共用了幾個嗎？答案是 7 個！我們為什麼要避免這種事情？

維護困難
權重陷阱
倘若修改切版，樣式會失效無用
複用性太低

#×權重陷阱

CSS Selectors 有一種優先權（specificity）的設定。

Calculating a selector's specificity

然而為了比較簡易的計算，所以我們會這樣用，

一個 HTML 我們給 1
一個 Selectors 我們給 10
一個 ID Selector 我們給 100
一個行內設定（style=""）我們給 1000

那，我們拿剛剛的例子來加加看：

#sidebar .sidebar-element .content p.back-to-top a.top-link {
    color: gray;
}

這個設定有 1 個 ID Selector，4 個類別選擇器，2 個標籤，所以結果就是：100 * 1 + 10 * 4 + 2 * 1 = 142，這樣方便的計算讓你知道優先權值是多少。所以，我們如果要覆蓋上面的灰色的數值，那麼優先權值就必須大於 142！

所以，當我們想要覆蓋這樣的設定時，就必須多加上一組選擇器，但是，這樣的惡性循環下，只會讓你的選擇器越來越複雜。而這樣複雜的樣式表，除了維護上的困難之外，切版的 DOM Tree 如果改變，那麼勢必也是無法使用的。

#×DOM Tree 陷阱

切版輸出的方式，通常直接左右你的樣式表的組成。而，我們為了要因應一些改變，勢必會修改我們的切版輸出。當完整的樣式表設定完成之後，切版輸出的改變，就會干擾到樣式表的套用狀況。

舉個簡單的例子來說，

<div id="container">
    <header id="header">
        <h1 class="slogan"></h1>
        <h4 class="description">
            <p class="website-memo"></p>
            <p></p>
        </h4>
    </header>
</div>

#header > .slogan {
}
#header > .description {
}
.description > p {
}
.description > .website-memo {
}

如果不巧我們的切版修改了，

<div id="container">
    <header id="header">
        <h1 class="slogan"></h1>
        <h4 class="description">
        </h4>
    </header>
</div>

那麼，原先套用在 .description 底下的兩組 .website-memo 與 p 就會相繼失效。當然，我們熟知修改切版的情況，勢必要對樣式表有所更動，但，問題是，如果樣式表有如上述例子般的簡易，那麼修改上是不會有什麼問題的。

但是倘若，

<aside id="sidebar">
    <div class="sidebar-element">
        <h3></h3>
        <div class="content">
            <img class="author-icon" src="" width="" height="" alt="" />
            <p class="content">
            </p>
            <p class="back-to-top">
                <a class="top-link" href=""></a>
            </p>
        </div>
    </div>
</aside>

#sidebar .sidebar-element .content p.back-to-top a.top-link {
    color: gray;
}
#sidebar .sidebar-element p.content + p.back-to-top {
    background-color: white;
}

如果我們修改了切版，把 <p class="back-to-top"></p> 這個區塊移除了，

<aside id="sidebar">
    <div class="sidebar-element">
        <h3></h3>
        <div class="content">
            <img class="author-icon" src="" width="" height="" alt="" />
            <p class="content">
            </p>
            <a class="top-link" href=""></a>
        </div>
    </div>
</aside>

這樣你知道樣式表設定上的嚴重性了嗎？

適用而選

選擇器的宗旨，並不是照著切版的 DOM Tree 來選擇，而應該是適用而選。我們從切版了解我們的目的，並從選擇器當中，挑選適切的方式，來呈現出我們所想要的結果。這樣才是在這麼多選擇器當中，使用你所想要的唯一的方式。

當然，要解決上述這些疑難雜症，也不是沒有方法。我的經驗告訴我，可以參考，但活用在你，

多重選擇器，倒不如用 ID SELECTOR
多重選擇器，但無法使用 ID SELECTOR，那就利用多類別來套用
重複性質高的屬性，用單一類別選擇器定義，用多類別來套用
DOM Tree 依賴性高的選擇器，擇一而用，人多必嘴雜
分類你的樣式表，將同區塊、同功能的東西放在一起

不要再說你不懂選擇器了，他很易懂，只是我們太複雜。