Day12::我所知道的 CSS重構第三章編寫較佳的CSS

2018 iT 邦幫忙鐵人賽

DAY 12

Modern Web

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

2018鐵人賽 css 重構好想工作室我的前端學習路程

只是顆米荳

2017-12-15 09:56:44

3768 瀏覽

分享至

第三章編寫較佳的CSS

善用註解

註解可以幫助自己檢視自己之前所寫的程式碼或是段落說明
應該加上註解的部分包括：

檔案內容
選取器的相依性與用法等
為何要如此宣告
重構過但已停用的樣式與不該再使用的樣式

CSS只有區塊行註解(多行註解)，以/* 開頭，以*/結尾
如果要註解單行的話也是用一樣的方法。

一致的結構規則集

以一致的方式來編寫規則集可以讓你的CSS更容易預期，也更容易被理解。
寫法還是受到個人喜好的影響。

規則集我把它理解成寫扣的排列方式
每個人都有自己的一套方法

書上提出了三種規則集的範例

寫成一行的CSS規則集

selector {property1: value; property2: value; property3: value;}

寫成多行的CSS規則集

selector{
    property1: value;
    property2: value;
    property3: value;
}

大括號另成一行的CSS規則集

selector
{
    property1: value;
    property2: value;
    property3: value;
}

以供應商前綴整理性質

供應商前綴(vendor prefix) 是瀏覽器開發商在新的實驗性CSS屬性尚未標準化前在屬性名稱前加上的標示用字串。
Chrome、Safari：-webkit-
Firefox：-moz-
IE、Edge：-ms-
當該屬性標準化後就不用再加上前綴。

供應商前綴範例

.border-radius{
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; //這個是標準版
}

這些屬性的排列順序很重要，瀏覽器會以宣告區塊中，由上而下的順序來套用屬性
沒辦法辨識的就會略過，只套用它能辨別的屬性。
若將沒有前綴的CSS屬性標準版放在有廠商前綴版的前面，在支援第二個版本的瀏覽器中，標準版就會被覆寫過去。

要讓特定瀏覽器的使用者升級他們的瀏覽器需要一些時間，有前綴與沒有前綴的屬性應該都要保留，直到你的網站不支援該瀏覽器為止。

維持選取器(選擇器)的單純

不斷地將選擇器與 組合器(combinators) 串在一起可能會讓選擇器變得非常複雜。
要維持選擇器的特定度並不定非得要讓他變得很複雜不可

範例3-4 能精準選擇某個元素的CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Keep Selectors Simple</title>
        <style type="text/css">
        div > nav > ul > li > a{
            color: #1200ff;
        }
        </style>
    </head>
    <body>
        <div>
            <nav>
                <ul>
                    <li>
                        <a href="./policies.html">Policies</a>
                    </li>
                </ul>
            </nav>
        </div>
    </body>
</html>

3-4的範例用了幾個子組合器為一個非常明確的錨點標籤指定樣式。
但這並不是錨點標籤製作樣式的好方法⋯
因為這一系列的選擇器與HTML結構的相依性太高，HTML結構只要一有變動所需的樣式就不會被套用。

範例3-5 加進類別後的HTML結構

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Keep Selectors Simple</title>
        <style type="text/css">
        a.nav-link{
            color: #1200ff;
        }
        </style>
    </head>
    <body>
        <div>
            <nav>
                <ul>
                    <li>
                        <a href="./policies.html" class="nav-link">Policies</a>
                    </li>
                </ul>
            </nav>
        </div>
    </body>
</html>

在3-5的範例中，類別選擇器被用來選擇帶有nav-link類別的元素。
不過a.nav-link這個選擇器應該還可以再調整，不需要這麼明確，像這樣的選擇器只能用在一個錨點標籤上，因此被稱為超格選擇器(overqualified selector)

範例3-6 簡化的選擇器

.nav-link{
    color: #1200ff;
}

盡可能地簡化選擇器是有益的，樣式不再依附於所使用的HTML結構上且CSS檔也會稍微再縮小一些。
有時候使用限定選擇器(qualifying selectors) 是比較恰當的

範例3-7 可用的合格選擇器

.error{
    color: #ff0000;
}

input.error{
    border-color: #ff0000;
}

在範例3-7中
因為input.error明確地指定輸入元素的文字與邊框色，他被視為合格選擇器而不是超格選擇器。

心得

這邊看到了以前沒看過的名詞，試著去查了一下他們的意思... 不知道我的理解對不對
超格選擇器：當一個元素和類名一起使用時（即範例3-5中的a.nav-link）。
限定選擇器：套用到該元素上的類別套用到其他元素時會有不同的結果時，該類別就被稱為限定選擇器。
合格選擇器：拿掉任一類別或元素都還能獨立運行且能隨意套用在其他地方的就被稱為合格選擇器。