Day13::我所知道的 CSS重構第三章之二

2018 iT 邦幫忙鐵人賽

DAY 13

Modern Web

三十哩路，我的前端學習路程系列第 13 篇

2018鐵人賽 css 重構閱讀心得我的前端學習路程

只是顆米荳

2017-12-16 00:39:40

2981 瀏覽

分享至

高效選擇器

簡單選擇器的效能會比複雜選擇器的效能要好，簡單的選擇器應該優先被使用
這是因為他比較容易被重複使用與理解而不是因為他們比較有效率。

由右向左比對選擇器

瀏覽器會從右至左比對選擇器，所以可以很快速的排除前頭不符合的元素，不會浪費時間在檢查可能符合的元素

範例3-8 簡單的HTML層次結構

<body>
    <div>
        <nav>
            <ul>
                <li>
                    <strong>Not a Link</strong>
                </li>
            </ul>
        </nav>
    </div>    
    <div>
        <nav>
            <ul>
                <li>
                    <a href="#" class="nav-link">Link</a>
                </li>
            </ul>
        </nav>
    </div>
</body>

錨點標籤透過div > nav > ul > li > a選擇器被選取

如果瀏覽器試著由左至右比對元素的話，他需要：

迭代過每一個元素以檢查該元素是否為元素。
檢查符合步驟一條件的每一個，看看其中是否有子元素。
檢查符合步驟二條件的每一個，看看其中是否有子元素。
檢查符合步驟三條件的每一個，看看其中是否有子元素。
檢查符合步驟四條件的每一個，看看其中是否有子元素。
將樣式套用到所找到的那一個元素上。

同樣的，選擇器要從右至左比對的話，瀏覽器需要：

迭代過每一個元素以檢查該元素是否為元素。
檢查符合步驟一條件的每一個，看看其中是否有父元素。
檢查符合步驟一條件的每一個，看看其中是否有父元素。
檢查符合步驟一條件的每一個，看看其中是否有父元素。
檢查符合步驟一條件的每一個，看看其中是否有父元素。
將樣式套用到符合選擇器的那一個元素上。
雖然步驟數目一樣，但是由左至右檢查時兩個div都會被檢查到
如果是由右至左的話瀏覽器可以排除不含錨點標籤的整個結構。

個人理解是...
由左至右大概就像是在翻資料夾找檔案的時候是一個個點進資料夾裡面看一樣
由右至左就是直接用搜尋找到要的那個檔案後在看上一層的資料夾確定是不是這個檔案

關鍵選擇器

選擇器最右邊的部分稱為關鍵選擇器(key selecot)

body *{
    font-size: 12px;
}

上面的程式碼能選取上源(ancestor)為標籤的元素。
而＊號的全域選擇器就是關鍵選擇器。

當全域選擇器用來將樣式套用到所有元素上，瀏覽器套用起來相當快，因為只要將樣式套用到頁面中所有元素上即可
不過，使用全域選擇器的話瀏覽器就必須要做更多工作來比對適合的元素。(因為選擇的範圍太大了，篩選需要時間)
只用全域選擇器不與組合器與其他選擇器併用才能避免這種狀況。

切斷CSS與JavaScript的耦合

JavaScript與CSS可以交替使用
但是JavaScript也能改變HTML元素的樣式這讓兩者之間容易混淆。
為了讓CSS與JavaScript能分開處理，JavaScript中用來選擇元素的類別與ID不應該用來替元素指定樣式。
元素的樣式需要透過JavaScript來調整時，應該透過增刪類別的方式來做。
(就是要把CSS跟JavaScript使用的class分開啦)

為JavaScript中的類別與ID加上前綴

在JavaScript中的類別與ID名稱之前加上js-就可以解決這個問題
使用加上js-的類別或ID作為JavaScript選擇器，任何可能存在於JavaScript與CSS間的相依性就可被排除。

以類別修改元素樣式

JavaScript可以透過style為元素加上行內樣式也可以更改特定的CSS樣式，但這似乎已經超出他的責任區域。
與其透過JavaScript將樣式加到style中來調整HTML的樣式，我們應該透過增刪元素類別的方式來進行調整。
不只適當的樣式會被套用，所使用的CSS規則集也可持續且適當地被整理在網站的CSS中。

使用類別

類別可以在網頁上無限制的視需求而重複使用，他們的特定度相當低、複寫起來也非常容易。
但是ID卻是完全相反，他們的特定度很高也不易複寫，每個頁面最多只能使用一次。
如果在編寫內容會持續變動的網頁CSS時，應該用類別來指定元素的樣式。
對於這樣的寫法看法還是有些分歧。

ID是JavaScript中選擇元素最快的方法，與在類別名稱前加上js-一樣，不用他指定元素的樣式是另一種將CSS與JavsScript分離的好方法。

為類別取有意義的名稱

為類別取個有意義的名稱，可以讓他有足夠的細節而不會在使用時造成混淆，也不會因太多細節而影響到程式碼的複用。
但是過於簡化的類別名稱也容易造成混淆⋯
能清楚表達意義很重要，但也要注意千萬別做過頭了！

範例3-10

.a{
    width: 200px;
}

範例用類別來選取一個元素，但是那個a是代表什麼呢？用直接可以明確表達元素用途的詞會更加理想。

避免類別過度模組化

過度模組化(over-modularization) 我們應該要避免使用過度模組化的類別，因為他們跟行內樣式相比也好不到哪裡去。
(像Bootstrap就是個很棒的過度模組化例子...!!class名稱都落落長...)

//過度模組化
<h1 class="font-bold uppercase blue-text margin-bottom-large no-padding">
    Too Many CSS Classes
</h1>

//行內CSS
<h2 style="font-weight: bold; text-transform: uppercase; color: #1200ff; margin-bottom: 20px; padding: 0;">
    Too Many CSS Class
</h2>