透過識別符重新認識 CSS

2024/09/27閱讀時間約 1 分鐘

你是否在撰寫 CSS 時曾遇過寫了 Class name 卻沒有效果的詭異情況？
現在讓我們玩個小賭局吧(註1)，猜猜看下方 HTML 搭配兩組 Class 樣式後，最終文字的顏色為何？猜錯的話，如果呈現為藍色，就請你的另一半去吃和牛 47，反之如果是紅色就請他 / 她吃 12mini 吧。

<div class="wagyu47 12mini">請他/她吃？<div/>

// 選項一；和牛 47 燒肉懷石料理
.wagyu47 {
	color: bule;
}

// 選項二：12 mini 快煮鍋
.12mini {
	color: red;
}

~~^{提醒你，在 CSS 中相同屬性的值會後蓋前唷！}~~

倒數三秒~~~ 下好離手！

答案是... 你可以準備打電話訂位帶你的另一半去微風南山點 $3880 外加一成服務費的和牛套餐了。
什麼！？難道 CSS 這麼勢利眼，生不生效還要看價位？別緊張，且讓我們繼續看下去，看看還有沒有機會守護你的荷包。

章節一：初探識別符

什麼是識別符？

初次看到這名詞時或許你會感到陌生，但相信我，你一定看過也使用過它。識別符（identifier）是用來命名和標識元素的字串。在 CSS 中，主要用於定義 Class、ID、自訂屬性等。而這些識別符存在的最大目的是，讓我們可以在 CSS 檔案中指向特定的 HTML 元素，並為它們套用樣式。而 <ident> 就是用來描述 CSS 中「識別符」的資料類型。

舉例來說，下方這段的 myClass 就是一個符合 <ident> 規範的字串，它能夠讓所有具有 class="myClass" 的元素變為紅色。

.myClass {
	color: red;
}

小細節：當你寫 CSS 時，所有的 Class、ID、自訂屬性名稱，實際上都是識別符 <ident> 類型的字串。

章節二：名稱到底該怎麼取

識別符的語法

前面我們提到過 <ident> 是一種資料類型，它主要是由一個或多個字元組成的字串，而這些字元可以包括以下幾種：

字母：任何大寫（A-Z）或小寫（a-z）的 ASCII 字元。
數字：任何 0 到 9 的十進位數字。
連字號與底線：連字號（-）或底線（_）。
非 ASCII 字元：任何 Unicode 代碼在 U+00A0 及以上的字元（也就是排除 ASCII 的部分）。
轉義字元：透過在字元前面加上反斜杠（\）來轉義字元。

識別符的限制

既然有允許的字元，想必就會有一些不合規的寫法或規則要遵守。

不能以數字開頭，例如剛剛題目中的 12mini。
不能以連字號開頭並緊跟著數字，例如 -12mini。
識別符本身對大小寫敏感，例如 id1、Id1、iD1 和 ID1 會被視為不同的識別符。
雖然識別符可以轉義，但 CSS 中不同的轉義方式會產生相同的識別符。例如 toto\? 和 toto\3F 是相同的識別符，因為 \? 和 \3F 都表示 ?。

小細節：大小寫視為不同的識別符，也就是會選取到不同的元素。如果你的樣式沒效果，搞了半天才發現是寫錯一個字母大小寫... 嗯，請注意別踩坑了。

轉義字元

在語法與限制部分我們一直反覆提到「轉義」這個詞，那到底是什麼意思呢？
轉義字元是指將某個字元以其他形式來表示，目的在於改變其在軟體系統中的解釋方式。在 CSS 中，轉義字元可以通過在字元前添加反斜線（\）來實現。除了十六進位數字（0-9，a-f，A-F），任何字元都可以這樣轉義。例如，& 可以轉義為 \&。

也可以通過反斜線後跟隨字元的 Unicode 代碼點（用一至六個十六進位數字表示）來轉義。例如，& 可以轉義為 \26。

這邊再舉一個極端情境，現在我們知道反斜線後可以跟隨數字來表達轉義，但假如我們的轉義字元後面就真的要接一個十六進位數字時該怎麼做呢？例如，\26 + 123 (代表字串 &123 )。這時可以用以下兩種方式來解決：

在 Unicode 代碼後加一個空格或其他空白字元。
使用完整的六位數 Unicode 代碼來表示所轉義的字元。

例如，剛剛說的字串 &123 可以轉義為 \26 123（帶空格）或 \000026123（使用完整的六位數 Unicode 代碼），這樣能確保反斜線後的 123 不會被視為轉義模式的一部分。

範例

了解上述規則後，這邊列出一些有效與無效的識別符給大家看看。

有效的識別符：

nono79：包含字母和數字的組合。
ground-level：包含字母和連字號的組合。
-test：以連字號開頭的字母組合。
--toto：類似於自訂屬性的識別符。
_internal：以底線開頭的字母組合。
\22 toto：包含轉義字元的字母組合。
\000022toto：與上一個範例相同。
bili\.bob：正確轉義的句號。
🔥123：包含非 ASCII 字元和數字的組合。

無效的識別符：

34rem：不能以數字開頭。
-12rad：不能以連字號開頭並緊跟著數字。
bili.bob：字母組合中非字母字元（如句號）必須轉義。
'bilibob'：被視為字串。
"bilibob"：被視為字串。

章節三：懂它可以當飯吃嗎？

看到這邊想必有些人會覺得，即便我不熟悉識別符，但我不也活得好好的嗎？當然，你不懂它可能不會怎樣，但也可能有天真的會怎麼樣，說穿了不過就是倖存者偏差罷了。

這裡就舉出 7 個理由讓各位小夥伴們思考思考吧。

避免語法錯誤
理解識別符的規則，讓我們可以避免在 CSS 中出現語法錯誤。例如，識別符不能以數字開頭或包含未轉義的特殊字符。避免這些錯誤可以讓 CSS 程式碼更穩定、易於測試，減少踩坑時間。
提高程式碼可讀性
當團隊成員都遵循識別符的命名規則並使用有意義的名稱時，CSS 程式碼將變得更易讀與理解。這對於團隊協作特別重要，讓其他人可以更快地理解和維護現有的樣式。
提升維護性
在大型專案中，CSS 的維護往往會變得很複雜。透過理解識別符規則，團隊成員能夠使用一致的命名方式，減少樣式名稱衝突和意外覆蓋的風險，使得後續的維護工作更加順利。
增強 CSS 的可重用性
當我們能正確地命名識別符時，這些識別符可以在專案的不同部分重複使用，這不僅減少了重複的樣式定義，還提高了程式碼的效率和一致性。
提高開發效率
掌握識別符的使用規則後，我們也可以更快地撰寫、測試和調整 CSS。這也有助於使用工具（如 CSS 預處理器和框架）更好地管理和組織樣式，進一步提升開發效率。
減少命名衝突
在大型專案或多人協作中，使用規範的識別符可以有效減少命名衝突。這是因為 CSS 的選擇器是全局的，命名衝突可能導致樣式意外覆蓋或不正確應用。
促進最佳實踐
理解識別符的概念可以促使我們遵循最佳實踐，例如使用 BEM（Block, Element, Modifier）命名法或其他命名規範。這些最佳實踐可以幫助我們撰寫程式碼，使其更具可擴展性和可維護性。