CSS層疊技術：優化CSS重置，打造獨特樣式
這篇文章介紹了一種名為CSS層疊的技術，用于優化CSS重置過程。它解釋了CSS重置的概念，即通過刪除瀏覽器默認樣式來確保在不同瀏覽器上呈現一致的外觀。然后，它引入了CSS層疊技術，以更好地控制樣式的層次結構和優先級。
文章詳細討論了CSS層疊技術的使用方法和優勢。它介紹了幾個關鍵概念，包括層疊順序、z軸定位和層疊上下文等。它還提供了實際的示例和代碼片段，以幫助讀者理解如何使用CSS層疊來實現更好的樣式控制和管理。
該文章還提到了使用CSS層疊技術時可能遇到的一些挑戰和注意事項。它建議在使用CSS層疊時要小心處理層疊順序和優先級，以避免樣式沖突和不一致的呈現。
下面是正文~~
我一直是傾向于使用更為積極的CSS重置方法的人。這些方法會清除瀏覽器中大部分默認的樣式，例如，它會移除從<h1>到<h6>元素默認的標題樣式，這些樣式通常具有較大的字體大小和字體粗細。
然而，我也喜歡 Normalize CSS 如何處理陰影 DOM 元素，這是我們在任何 CSS 重置方法中都沒有的。
然而，我也喜歡Normalize CSS處理影子DOM元素的方式，這是我們在任何CSS重置方法中都沒有的。 因此，我總是在尋找方法將它們兩者結合起來。即便如此，我仍然遇到了一些CSS優先級問題，需要找到一種解決方法。
快進到今天，所有的瀏覽器現在都支持CSS層。因此，在開發Appwrite的開源設計系統Pink Design時，我們開始重新思考如何更好地處理這個問題。
在我們開始之前，讓我們先談談一些關于CSS重置方法的內容。
CSS重置方法
多年來，一直存在著一種“爭論”，即哪種CSS重置方法更好。
在這次比賽中，我們采用了兩種熟悉的方法：
- **Normalize CSS ** — 一種溫和的方法，可以修復瀏覽器之間的差異，同時保留HTML元素的本地樣式，例如 <h1> ， <h2> 等標題元素。
如之前提到的，Normalize CSS也負責處理在不同瀏覽器中可能會有差異展現的Shadow DOM元素。
Normalize CSS 中處理 Shadow DOM 元素的演示：
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}- CSS Reset —— 相較而言，CSS重置是一種更為激進的方法，常常會廢除瀏覽器“用戶代理樣式表”的默認樣式。
CSS重置演示：
此代碼將撤銷 <h1> 的特殊 font-size 、 font-weight 和 margin ，將其轉換為 <h6> 元素：
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-size: inherit;
font-weight: inherit;
}方法的結合
通過結合 Normalize CSS 和 CSS Reset 兩種方法，你可以從兩種方法中獲益。
這樣可以確保處理內部 shadow DOM元素，并忽略從“用戶代理樣式表”繼承的無用樣式。實現這一點最簡單的方法是同時加載兩者。以下是如何在Sass預處理器中實現的演示：
/* CSS Resets */
@use 'normalize';
@use 'reset';你可能會認為，如果我們首先加載Normalize CSS，然后再加載CSS Reset，這會使我們的CSS Reset具有更強的特異性，對嗎？不完全是這樣的；讓我們談談這方面的一些問題。
合并方法的問題
在Appwrite Pink中，我們使用Normalize CSS，同時與“新的CSS重置方法”結合使用。“新的CSS重置方法”是一種新的重置CSS的方式，利用了新的原生CSS重置功能。
對于“Normalize CSS”和“The New CSS Reset”這兩個項目，我們都是原封不動地使用它們（來自NPM），甚至包括來自Normalize CSS的不必要部分，比如修復<h1>元素的不同樣式，這將會在CSS重置中被移除。
“Normalize CSS”中的 Header <h1> 樣式：
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}在“The New CSS Reset”中，通用移除樣式（包括元素）：
/*
Remove all the styles of the "User-Agent-Stylesheet",
except for the 'display' property.
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}但是這里開始出現了問題。為了理解這些問題，讓我們先談談基本的CSS，它定義了我們的樣式：
順序很重要
CSS選擇器的順序很重要。這是因為通常情況下，后面的樣式比前面的樣式更強。在我們的情況下，CSS重置文件的順序是正確的。
首先，我們想要加載“Normalize CSS”，它將規范化不同瀏覽器之間的差異，然后我們想要使用CSS重置來刪除我們不需要的內容，在我們的情況下，這是使用“The New CSS Reset”完成的。
Scss 導入的示例：
/* CSS Resets files order */
@use 'normalize'; /* 1 */
@use 'reset'; /* 2 */
/* In general, last code is stronger in CSS */CSS 優先級
我們根據CSS選擇器的強度（元素、類名和ID名）來定義我們選擇器的優先級。從最弱到最強的選擇器依次為元素選擇器、類選擇器和ID選擇器。
在這個例子中，ID選擇器將贏得“CSS特異性戰爭”，因為ID選擇器比類名選擇器或元素選擇器更強。
這意味著 <h1> 元素的顏色將會是粉色。
<h1 class="title" id="mainTitle">some content</h1>#mainTitle { color:pink; } /* 1 (ID), 0 (Classes), 0(element) */
.title { color:yellow; } /* 0 (ID), 1 (Classes), 0(element) */
h1 { color:red; } /* 0 (ID), 0 (Classes), 1(element) */我們的CSS特異性沖突
如果我們看一下<h1> 元素的Normalize CSS選擇器，它具有一個元素的能力：
/* 0 (ID), 0 (Classes), 1 (element) */
h1 {...}這是一個相對較低強度的選擇器。
讓我們來看一下來自“The New CSS Reset”的主要CSS重置選擇器：
/* 0 (ID), 0 (Classes), 0 (element) */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {...}為了盡可能地降低特異性，使用 :where() 偽選擇器。 :where() 偽選擇器的主要思想之一是消除選擇器創建的任何CSS特異性。
但這里產生了沖突，<h1>的樣式比CSS重置的樣式更為強大，這對我們來說是個問題。
解決這個沖突的一種方法是移除 Normalize CSS 中不必要的部分，也就是移除所有非 Shadow DOM 部分的樣式。但是，如果我們從 NPM 包中自動加載項目，這可能會成為一個問題，因為這樣很難維護。
CSS Layers 來拯救
CSS層是為了解決這樣的問題而發明的，即我們希望告訴瀏覽器，特定的層比其他層更重要，并忽略其他層的CSS優先級。
為了做到這一點，我們有@layer規則，這規則定義了一個層。它將部分樣式包裹起來，定義層的部分，并在層自身內部實行CSS優先級。
這個做法本身就能解決我們的問題。
為了更精確地定義層的順序，我們可以添加一個 @layer，這將決定你希望代碼按何種順序出現。
@layer normalize {
/* CSS Normalize Here */
}
@layer the-new-css-reset {
/* CSS Reset here */
}這本身就會解決我們的問題。為了更精確地定義層的順序，我們可以添加“layer statement”，以確定你希望代碼出現的順序。
示例：
/* layer statement - define the order,
even if the order of the code will not be in the same way */
@layer normalize, the-new-css-reset;
@layer normalize {
/* CSS Normalize Here */
}
@layer the-new-css-reset {
/* CSS Reset here */
}Sass 預處理器支持
@use 'sass:meta';
@layer normalize, the-new-css-reset;
@layer normalize {
@include meta.load-css('normalize');
}
@layer the-new-css-reset {
@include meta.load-css('the-new-css-reset');
}這樣，我們可以將CSS層分別保存在不同的文件中，并確保在保持代碼整潔的同時，最后一層能在“樣式優先級之爭”中勝出。
瀏覽器支持
CSS layers 已經在所有主流瀏覽器中實現了相當長的時間
圖片
總結
本文主要探討了我們如何解決CSS優先級問題，尤其是關于CSS重置層面的問題。
隨著我們接近2023年底，隨著用戶升級他們的瀏覽器，這種使用CSS層來解決CSS沖突的方法將越來越常見。
在構建Pink Design的過程中，我們有幸為開發者這種類型的用戶提供服務，他們通常會定期更新瀏覽器。因此，我們選擇了采用這種新的、利用CSS層進行開發的方法。
