透過繼承性重新認識 CSS

2024/09/26 更新2024/04/29 發佈閱讀 6 分鐘

前言

<div class="parent">
  我是父層
  <p class="child">我是子層</p>
</div>

上面這段程式碼中，當我在父層給予 color: red; 時，你認為子層的字體顏色應該為何？
答案是紅色。

那麼我繼續在父層給予一個 text-align: center;，子層文字會置左，置中還是置右？
答案是置中。

最後我又在父層設定 z-index: 1;，此時子層的 z-index 值為何？

答案絕對不會是 1，而是 auto。
現在就讓我們透過繼承性重新認識一下你既熟悉又陌生的 CSS 吧。

繼承性

什麼是繼承性？

在 CSS 中，繼承性指的是當一個元素沒有指定某個屬性時，它會從其父元素中繼承該屬性計算後的值。換句話說，如果父元素設置了某些樣式，子元素將會繼承這些樣式，除非另有規定。

子元素繼承自父元素的樣式。

我們常見的字型、字體大小、顏色、行高、斷行等文字相關的屬性通常具有繼承性，這意味著子元素會繼承父元素的字體與文本樣式。另外一些列表相關的屬性如 list-style ，或是 cursor 也都具有繼承性。

總有個初始值

假如有一具備繼承性的樣式屬性並沒有設定值，而它的父層們，乃至於它的最大父層 <html> 我們也沒有設定任何值的話，那會發生什麼事呢？
這時它會使用 html 超文本的初始預設樣式。現在打開任一網頁，開啟開發工具後透過計算屬性面板我們可以看到完整的樣式設定來源。如果該屬性都沒有額外介入設定的話，在計算屬性面板中該屬性將呈現其初始值。

透過開發工具查看樣式的初始值。

凡事皆有特例

然而，並非所有的 CSS 屬性都具有繼承性，以下列出常見且無繼承性的屬性；

定位相關屬性： 包括 position、top、bottom、left、right，這些屬性控制元素的位置，通常不會被子元素繼承。
盒模型相關屬性： 例如 width、height、margin、padding、border，這些屬性通常不會被子元素繼承，因為它們與元素的大小和佈局有關。
顯示屬性（display）： 控制元素的顯示方式，如 display: block、display: inline，這些屬性通常不會被子元素繼承，因為它們影響元素的排列方式。
清除浮動（clear）： 用於處理浮動元素的佈局問題，通常不會被子元素繼承。
層級相關屬性： 包括 z-index，用於控制元素的堆疊順序，通常不會被子元素繼承。

我特例你的特例

既然我們已經知道有些 CSS 屬性天生不帶繼承性，但如果我們就是想搞怪，希望它們繼承父元素的值呢？答案是可以的。在撰寫 CSS 時你是否曾在 IDE 為你呈現的可選清單中注意過 inherit 這個選項？

text-aligh 的可選清單包含 inherit。

如下方範例，假設我們想讓子元素的邊框與父元素中的邊框設定相同。正常來說，邊框屬性不具備繼承性，但我們可以使用 inherit 關鍵字來實現這一目標。

<div class="parent">
  我是父層
  <div class="child">我是子層</div>
</div>

.parent {
  width: 300px;
  height: 500px;
  border: 1px solid red;
}

.child {
  border: inherit; /* 子元素邊框繼承父元素的邊框 */
}

這邊我們統整幾個與繼承性相關的關鍵字。

inherit（繼承）： 使用 inherit 關鍵字將屬性的值設置為其父元素的值。這意味著當你將屬性設置為 inherit 時，它將從父元素中繼承其值。這在需要子元素繼承父元素特定屬性值時非常好用。
initial（初始值）： 使用 initial 關鍵字將屬性的值設置為其初始值。每個 CSS 屬性都有一個預設的初始值，使用 initial 關鍵字將屬性重置為這個初始值。這在需要將屬性值還原到初始狀態時很有用。
unset（取消設置）： 使用 unset 關鍵字將屬性的值設置為其繼承值（父元素有設定的話），如果沒有可供繼承的值，則設置為其初始值。
換句話說，unset 關鍵字會根據元素的具體情況來設置屬性的值，如果該屬性可以繼承，則繼承父元素的值（效果同 inherit），否則會將其設置為初始值（效果同 initial）。這使得 unset 關鍵字非常靈活，可以根據元素的上下文動態設置屬性值。

為什麼要有繼承性

回過頭來試想一下，如果 CSS 屬性沒有繼承性的概念，那就意味著工程師得為所有的元素個別設定，例如替所有元素設定 color。
先不說這樣一來樣式檔會變得無比肥大，光是替每一個元素不斷重新設定樣式（即使設計師根本沒要求），如此反人類的操作想必沒人會想幹這行了吧⋯⋯。身為一名工程師，切記別把時間浪費在瑣碎且無意義的事情上。

我才不想全部一個一個設定。

總結

CSS 的繼承性為我們帶來了多方面的好處，最後就讓我們總結一下它的優點及該注意的事項吧。

優點

程式碼簡潔和可讀性提升： 通過使用繼承性，可以將樣式應用到整個文檔結構中，從而減少重複的程式碼。這樣不僅使得 CSS 更加簡潔，還提高了程式碼的可讀性，使得樣式設計更容易理解和維護。
一致性和可重用性增強： 繼承性確保了相同類型元素之間的一致性，從而使整個網頁或應用程序的外觀和風格保持一致。這也使得樣式更具可重用性，可以在不同的元素上共用相同的樣式，從而節省開發時間並降低程式碼數量。
易於維護和修改： 當需要修改樣式時，只需更改相關的父元素的樣式即可，所有繼承該樣式的子元素都會自動更新。這使得程式碼的維護變得更加輕鬆，並且能夠快速地進行樣式調整和更新。
開發效率提高： 使用繼承性可以提高開發效率，因為你不需要為每個元素都單獨指定樣式，只需在父元素上設置一次即可。這樣可以節省大量的時間和精力，使得開發過程更加高效。