#11 開始寫 CSS 或程式必須知道的：DRY & KISS & YAGNI

2023 iThome 鐵人賽

DAY 12

Modern Web

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 13 篇

15th鐵人賽 css dry kiss yagni

Eva Chen

2023-09-27 13:00:39

732 瀏覽

分享至

本篇同步發表於我的 Hashnode 部落格：
Eva Chen | 網頁設計師下班後 (hashnode.dev)

↓ 今日學習重點 ↓

了解開發的三大原則：DRY & KISS & YAGNI

在進入寫 CSS（或其他程式碼）的世界之前，有幾個重要的原則值得我們了解和牢記。這些能夠提高 code 的品質，讓他們未來容易維護和擴增。以下將介紹三個重要的原則：

DRY（Don't Repeat Yourself）、
KISS（Keep It Simple, Stupid）和
YAGNI（You Aren't Gonna Need It）。

DRY（不要重複自己）

Don't Repeat Yourself.

DRY 原則是程式設計中的一個基本原則，也適用於 CSS 的撰寫。這個原則的核心思想是盡量避免 code 中的重複部分。當你在不同地方多次使用相同的片段時，不僅會讓 code 變得難以維護，還容易發生錯誤。

在 CSS 中，可以透過使用 class 和 tag 選擇器，設定重複的樣式，來實現 DRY 原則。這樣一來，如果要修改，只需在一個地方修改，不用在整個專案中搜索和替換。

例子 1：善用 class

.list-A {
    background-color: #f5f5f5;
    color: #aaa;
}
.list-B {
    background-color: #f5f5f5;
    color: #888;
}

/* 可以再多使用一個 class 設定共用的樣式，變成： */
.list {
    background-color: #f5f5f5;
}
.list-A {
    color: #aaa;
}
.list-B {
    color: #888;
}

例子 2：善用逗號（群組式宣告）或巢狀 CSS

li:before{
    content: "";
    display: block;
    background-color: pink;
}
li:after{
    content: "";
    display: block;
    background-color: cyan;
}

/* 可以使用逗號與巢狀 CSS，同時選取兩個元素寫共用的部分，變成： */
li{
    &:before, &:after{
        content: "";
        display: block;
    }
    &:before{
        background-color: pink;
    }
    &:after{
        background-color: cyan;
    }
}

KISS（保持簡單）

Keep It Simple, Stupid.

KISS 原則的目標是保持 code 的簡單。寫 CSS 時，盡量要避免過度複雜。越簡單就越容易理解、測試和維護，減少你的工作量。

比如說，選擇適合的選擇器，避免不必要的巢狀結構，並且選擇有意義的 class 或 id 命名。

例子 1：巢狀太多層

巢狀太多層了，會不好管理。如果未來要改裡面的樣式，會記不得上面寫了幾層爸爸。如果是 Sass (SCSS) 檔案，可能會造成編譯的 loading，建議在三層內為佳。

/* 巢狀態多層的例子 */
#col-main {
    background-color: white;
    .main-content {
        margin: 1.5rem;
        .step-content {
            ...
            .title {
                ...
                .img { ... }
            }
        }
    }
}

/* 可以改成： */

/* 分為大範圍容器的部分 */
#col-main {
    background-color: white;
    .main-content {
        margin: 1.5rem;
    }
}
/* 與獨立內容的部分 */
.step-content {
    ...
    .title {
        ...
    }
    .title .img {
        ...
    }
    /* 雖然這裡 .title 重複了，不符合 DRY，但是比較好讀 */
    /* 原則有時也會有互斥的時候，這時候優先選擇較好維護的 */
}

例子 2：命名語意衝突

命名與內容不符，會讓接手人或未來的自己頭暈。

/* 會發生這個狀況通常可能是，主要按鈕本來是藍色的，後來改成了橘色的 */
.button-blue {
    background-color: orange;
}

/* 可以改成： */
.button-primary {
    background-color: orange;
}

/* 這個發生狀況可能也與上面雷同，原本側邊欄在左側，後來改為右側 */
.menu-left {
    float: right;
}

/* 可以改成： */
.side-menu {
    float: right;
}

例子 3：謹慎使用數字

/* 不 OK 的情況：過多或隨意的數字，未來絕對會忘記 27 是什麼意思，與其他 1 - 26 又有何不同 */
.title-27 { ... }

/* OK 的情況：於團隊內部定義好標題分為六級 */
.title-1 { ... }
.title-2 { ... }
.title-3 { ... }
.title-4 { ... }
.title-5 { ... }
.title-6 { ... }