iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 5
1
Modern Web

CSS 實戰心法系列 第 5

小故事 + 圖文介紹 CSS 的命名技巧

程式語言的命名一直是個麻煩課題,除了要有良好邏輯外,還必須有大量的英文詞彙能力。CSS 雖然不需要有太深的邏輯,但由於上手容易,團隊合作的命名就容易被其他小夥伴所影響。

本篇透過圖文及小故事來介紹 CSS 命名概念,讓你與小夥伴的命名協作能力更順暢。

除了不需要維護的網站以外, CSS 命名都是前端工程師的痛,因為很容易踩到先前所寫的坑,久而久之就會發生權重的問題。

案例s

/* 100 行 */
.tab {
  color: red;
}

/* 300 行 */
a.tab {
  color: blue;
}

/* 600 行 */
.card a.tab {
  color: green;
}

/* 1200 行 Joe 1203 修正錯誤 */
a.tab {
  color: red !important;
}

相信在維護過去的專案時,不少人有遇過這樣的經驗,當下的網站樣式是正常的,新的需求要調整目前的樣式,前一個離職同事用巧妙的手法安裝了未爆彈,為了證明你的實力只好再多一層 !important

前人的債我們只能補,新的路我們可以自己鋪,除了前面所提到的兩個 CSS 分離方法,這邊要介紹好的 CSS 命名,讓 Class 複用性更高,這邊介紹幾個基本原則:

  1. 抽象化命名 (避免使用具體的色彩、單位尺寸等)
  2. 用元件形體命名 (不使用頁面上的功能做命名)

抽象化命名

一般來說,品牌會定義色彩,網站也是一樣會定義色彩,比如說網站會定義主要色、次要色、強調色、警告色等。

  • 主要色:藍色
  • 強調色:紅色

網站上可以依據這樣的色彩直接命名,就如同下方這個範例,將色彩直接作為名稱

/* 避免 */
.text-blue{
  color: blue;
}

.text-red {
  color: red;
}

但是,好景不常,設計師和老闆總是能夠合力起來做 "微調",先前的藍色想改成綠色,紅色想改成橘色,畢竟這樣比較有質感。為了避免新人不知道紅為什麼是橘,還要跟他說一篇故事來介紹,其實我們可以將名稱做以下的調整。

/* 建議 */
.text-primary {
  color: blue;
}

.text-accent {
  color: red;
}

除此之外,還有許多會使用單位尺寸做名稱,如:

/* 避免 */
.m-t-50 {
  margin-top: 50px;
}
.m-t-30 {
  margin-top: 30px;
}
.m-t-10 {
  margin-top: 10px;
}

為了避免發生 "50px 太大了,改 44px 可以嗎?"。 (小劇場等以下略)
所以也是避免直接用數值來命名,我們可以用抽象畫的尺寸來做調整。

/* 建議 */
.m-t-l {
  margin-top: 50px;
}
.m-t-m {
  margin-top: 30px;
}
.m-t-s {
  margin-top: 10px;
}

如果這時候他需要在兩個數值中間再插入一個值呢?
我也不知道,因為這真的太欠揍了。

用元件形體命名

一般來說命名都會很直白,像是 左側的選單 就叫做 left-menu,產品列表稱為 .product-list

這樣的以後選單只能放在左邊,如果放到右邊去又是一個小劇場了;產品列表也是相同道理,誰知道哪天會不會放產品以外的內容呢!?

這邊用一個範例來介紹命名的方法:

這是一個排版的範例,左側是選單,右側比較大的空間是主要文章,一開始可能直接會用他所在的位置或功能性來命名,如 .menu.article

http://ithelp.ithome.com.tw/upload/images/20161205/20083608ykzx304sDE.png

實際上呢,側面欄不會只有放選單;右方的主要內容可能也不是文章,可能會有產品、廣告、文件等其他內容,所以我們可以將命名做一些調整,用頁面上所在的位置命名,例如側面叫做 .side,主要內容區域叫做 .content

http://ithelp.ithome.com.tw/upload/images/20161205/20083608onXGZNXmqu.png

接下來,下方增加了 .ad 的區塊,寬度佔 1/3 和 .side 相同,由於是後來新增的區塊,直接稱為 .side 不太適合,所以就直接命名為 .ad。

http://ithelp.ithome.com.tw/upload/images/20161205/20083608kpdhk7FeVn.png

這個時候,如果直接用 12欄的命名方法來命名,這樣網格的可用性就會變得更高。

http://ithelp.ithome.com.tw/upload/images/20161205/20083608et7nSymQqx.png

所以我們在命名的時候,如果只能用在當下,沒有思考到未來的發展就可能會有大量相同的模組,或者是命名與實際運用的不搭,在這邊提供幾個命名概念給大家參考:

  • 元件的外型命名
    • 避免限制性的命名:.product-list
    • 建議:.list
  • 色彩的命名
    • 避免直接用色名:.text-blue
    • 建議:.text-primary
  • Layout 的命名
    • 避免直接用位置命名:.left-menu
    • 建議:col-4

這篇嘗試使用小劇場的方式來介紹 CSS,自我感覺良好,但需要花雙倍的時間啊啊啊啊~。

文章同時發表於:https://wcc723.github.io/css/2016/12/05/css-naming/


上一篇
OOCSS 容器與內容分離 (最佳實踐)
下一篇
CSS 的元件狀態
系列文
CSS 實戰心法30

尚未有邦友留言

立即登入留言