iT邦幫忙

2023 iThome 鐵人賽

DAY 12
1
Modern Web

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

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

  • 分享至 

  • xImage
  •  

本篇同步發表於我的 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 { ... }

YAGNI(你現在不需要它)

You Aren't Gonna Need It.

YAGNI 指的是不要過度設計,或添加不必要的功能。和 KISS 一樣,也是為了保持 code 的簡單,並減少不必要的工作量。

在 CSS 中,YAGNI 原則建議你只加上目前需要的樣式就好了,而不是為了未來可能的變化寫過多的 CSS。讓 CSS 更輕巧一些,瀏覽器的載入速度能更快,使用者體驗就會更好。

例子 1

整個網站的 CSS,每一頁建議有一份共用的 CSS 和一份屬於這個頁面的 CSS,而不是將整個網站的 CSS 全部寫成一大包。index 頁面不需要 about 頁面的樣式,就不需要載入。

YAGNI

例子 2

使用 CSS 各種框架時,雖然有點不符合這個原則,但是講究的話可以研究該框架的結構,獨立引用需要的部分就好。以 Bootstrap 為例,若我的網頁不需要 table、forms 等相關樣式,就不要載入就好:


結論

總之,這三個原則(DRY、KISS 和 YAGNI)是寫 code 時的大方向,當然依據實際情況可以再做微調。如果有互斥的時候,以好維護的、好懂的為優先。


↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

如果你喜歡我的創作,還想看看其他有趣的分享與日常,
可以追蹤我的 IG @im1010ioio,或者是🧋送杯珍奶鼓勵我,謝謝你🥰。

Eva Chen 送杯珍奶鼓勵我


上一篇
#10 原生的 CSS 巢狀 (CSS Nesting) 終於支援啦!
下一篇
#12 CSS 設計方法與命名建議:OOCSS、SMACSS、BEM、RSCSS
系列文
Super Easy CSS,極度簡單:寫出好的 CSS,從零開始前端生涯37
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言