往 css 優先級中存在的問題

如果我們的頁面上存在非常多的樣式，譬如有我們開發頁面的時候的自定義樣式，也有引入的組件庫樣式。這時候樣式將會非常混亂難以管理。

當我們想覆蓋一些本身非我們書寫的樣式時候，往往不得不通過使用優先級權重更高的樣式名，去覆蓋那些樣式。

同時，當樣式優先級感到難以控制時，開發者習慣濫用 !important 去解決，這又循環導致了后續更混亂的樣式結構。

基于讓 CSS 得到更好的控制和管理的背景，CSS @layer 應運而生。

何為 CSS @layer？

CSS Cascade Layers，也叫做CSS級聯層，是Cascading and Inheritance Level5 規范中新增了一個新的 CSS 特性。

@layer聲明了一個 級聯層， 同一層內的規則將級聯在一起， 這給予了開發者對層疊機制的更多控制。語法也非常簡單，看這樣一個例子：

@layer utilities {

  /* 創建一個名為 utilities 的級聯層 */

}

這樣，我們就創建一個名為 utilities 的 @layer 級聯層。

@layer語法

@layer規則可以通過三種方式其一來創建級聯層。第一種方法如上方代碼所示，它創建了一個塊級的@規則，其中包含作用于該層內部的CSS規則。

@layer utilities {

  .padding-sm {

    padding: .5rem;

  }




  .padding-lg {

    padding: .8rem;

  }

}

一個級聯層同樣可以通過 @import 來創建，規則存在于被引入的樣式表內：

@import(utilities.css) layer(utilities);

你也可以創建帶命名的級聯層，但不指定任何樣式。例如，單一的命名層：

@layer utilities

或者，多個命名層也可以被同時定義。例如：

@layer theme, layout, utilities

這一做法很有用，因為層最初被指定的順序決定了它是否有父級層。對于聲明而言，如果同一聲明在多個級聯層中被指定，最后一層中的將優先于其他層。

因此，在上面的例子中，如果 theme 層和 utilities 層中存在沖突的規則，那么 utilities 層中的將優先被應用。

即使 utilities 層中規則的 優先級低于 theme 層中的，該規則仍會被應用。一旦級聯層順序建立之后，優先級和出現順序都會被忽略。

這將使創建CSS選擇器變得更加簡單，因為你不需要確保每一個選擇器都有足夠高的優先級來覆蓋其他沖突的規則，你只需要確保它們出現在一個順序更靠后的級聯層中。

注：在已經聲明級聯層的名字后，它們的順序隨即被確立，你可以重復聲明某級聯層的名字來向其添加CSS規則。這些樣式將被附加到該層的末尾，且級聯層之間的順序不會改變。

其他不屬于任何一級聯層的樣式將被集中到同一匿名層，并置于所有層的前部，這意味著任何級聯層內定義的規則都將覆蓋外部聲明的規則。

嵌套層

級聯層允許嵌套，例如：

@layer framework {

  @layer layout {




  }

}

向 layout 層內部的 framework 層附加規則，只需用 . 連接這兩層。

@layer framework.layout {

  p {

    margin-block: 1rem;

  }

}

匿名層

如果創建了一個級聯層但并未指定名字，例如：

@layer {

  p {

    margin-block: 1rem;

  }

}

那么則稱為創建了一個匿名層。除創建后無法向其添加規則外，該層和其他命名層功能一致。

標準語法

@layer [ <layer-name># | <layer-name>?  {

  <stylesheet>

} ]

@layer如何使用

創建級聯層

級聯層可以通過多種方式聲明：

1、使用@layer 塊規則，并立即為其分配樣式：

@layer reset {

  * { /* Poor Man's Reset */

    margin: 0;

    padding: 0;

  }

}

2、使用規則@layer 語句，沒有指定任何樣式：

@layer reset;

3、將@import 與layer關鍵字或layer()函數一起使用

@import(reset.css) layer(reset);

以上每一個都創建了一個名為 的級聯層reset。

管理級聯層

級聯層會按它們聲明的順序排序。

在下面的例子中，我們建立四個級聯層：reset，base，theme，和utilities。

@layer reset { /* 創建級聯層 “reset” */

  * {

    margin: 0;

    padding: 0;

  }

}




@layer base { /* 創建級聯層 “base” */

  …

}




@layer theme { /* 創建級聯層 “theme” */

  …

}




@layer utilities { /* 創建級聯層 “utilities” */

  …

}

按照它們的聲明順序，層順序變為：

reset
base
theme
utilities

重復使用級聯層名稱時，樣式將附加到現有級聯層。級聯層的順序保持不變，因為只有第一次的出現已經確定順序：

@layer reset { /* 創建第一個級聯層 “reset” */

  …

}




@layer base { /* 創建第二個級聯層 “base” */

  …

}




@layer theme { /* 創建第三個級聯層 “theme” */

  …

}




@layer utilities { /* 創建第四個級聯層 “utilities” */

  …

}




@layer base { /* 會將樣式添加至級聯層“base” */

  …

}

重新使用級聯層名稱時層順序保持不變的使@layer 語法變得更加方便和嚴謹。使用它，可以預先建立圖層順序，然后將所有 CSS 附加到它：

@layer reset;     /* 創建第一個級聯層 “reset” */

@layer base;      /* 創建第二個級聯層 “base” */

@layer theme;     /* 創建第三個級聯層“theme” */

@layer utilities; /* 創建第四個級聯層 “utilities” */




@layer reset { /* 添加樣式至級聯層 “reset” */

  …

}




@layer theme { /* 添加樣式至級聯層  “theme” */

  …

}




@layer base { /* 添加樣式至級聯層  “base” */

  …

}




@layer theme { /* 添加樣式至級聯層  “theme” */

  …

}

當然你可以用更短的語法來聲明級聯層，

@layer reset, base, theme, utilities;

從上面可以看出，多個級聯層被聲明時，最后一個級聯層的聲明會獲勝。像這樣，

@import(reset.css) layer(reset); /* 第一個級聯層 */




@layer base { /* 第二個級聯層 */

  form input {

    font-size: inherit; 

  }

}




@layer theme { /*第三個級聯層 */

  input {

    font-size: 2rem;

  }

}

按以往CSS級聯來進行分析的話，form input（多層級）的優先級會大于input,但是由于級聯層所起的作用，@layer theme的input會取勝。

級聯層嵌套

級聯層支持嵌套使用，如下：

@layer base { /* 第一個級聯層*/

  p { max-width: 70ch; }

}




@layer framework { /* 第二個級聯層 */

  @layer base { /* 第二級聯層的嵌套子級聯層1 */

    p { margin-block: 0.75em; }

  }




  @layer theme { /* 第二級聯層的嵌套子級聯層2 */

    p { color: #222; }

  }

}

在這個例子中有兩個級聯外層：

base
framework

該framework層本身也包含兩層：
base
theme

如果要將樣式附加到嵌套級聯層，需要使用以下全名來引用它，

@layer framework {

  @layer default {

     p { margin-block: 0.75em; }

  }




  @layer theme {

    p { color: #222; }

  }

}




@layer framework.theme {

  /* 這些樣式會被添加到@layer framework層里面的theme層 */

  blockquote { color: rebeccapurple; }

}

@media與@layer

@media (min-width: 30em) {

  @layer layout {

    .title { font-size: x-large; }

  }

}




@media (prefers-color-scheme: dark) {

  @layer theme {

    .title { color: white; }

  }

}

如果第一個@media (min-width: 30em)匹配（基于視口尺寸），則layout級聯層層將在圖層順序中排在第一位。如果只有@media (prefers-color-scheme: dark)匹配，theme則將是第一層。

如果兩者匹配，則圖層順序將為layout, theme。如果沒有匹配，則不定義層。

紹

@layer又名級聯層，是 css2022 推出的新特性，目的是用來解決樣式被覆蓋，使用混亂的場景。
同一層內的規則將級聯在一起， 這給予了開發者對層疊機制的更多控制，讓 CSS 樣式按照我們定義好的級聯順序展示，起到控制不同樣式間的優先級的作用。

語法

@layer a {
    div {
        background-color: red;
    }
}
創建了一個名字為a的級聯層

我們也可以先定義級聯層，之后再補充規則

@layer a,b,c;
@layer a {
	div {
		background-color: red;
	}
}

@layer b {
	#box {
		background-color: blue;
	}
}

@layer c {
	div {
		background-color: green;
	}
}

級聯層的執行順序將會按照定義的時候的先后順序執行，所以，最終會執行 c 的級聯層，得到一個藍色的 div，即使級聯層 b 是一個 id 選擇器，仍然是最后一個級聯層會生效

此時的級聯層的順序是@layer c > @layer b > @layer a

由此，我們可以大致得出一個結論：可以利用級聯層將 css 進行模塊的劃分，按照先后順序，更好的控制樣式。

怎么引用

引用的方式分為三種

• 內部引入

直接創建一個 @layer 規則，其中包含作用于該層內部的 CSS 規則：

• @import 引入

@import(index.css) layer(a);


- 命名方式

創建帶命名的級聯層，但不指定任何樣式。樣式隨后可在 CSS 內任意位置添加

@layer a;

@layer a {
    div {
        color: red;
    }
}

非 @layer 包裹層與 @layer 層內樣式優先級

沒有被 @layer 包裹的樣式和被 @layer 包裹的樣式相比，那個優先級更高呢。

@layer A {
	div {
		background: red;
	}
}
@layer B {
	div {
		background: orange;
	}
}
@layer C {
	div {
		background: yellow;
	}
}
div {
	background: green;
}

最終為綠色，這里會有一個非常重要的結論，非 @layer 包裹的樣式，擁有比 @layer 包裹樣式更高的優先級，因此，上述規則的排序是：未被 @layer 包裹的樣式 > @layer C > @layer B > @layer A

級聯層的規則

級聯層可以像上面的案例一樣，簡單命名，也可以設置匿名使用方式和嵌套使用方式 ### 匿名 允許創建一個不帶名字的 @layer：

@layer {
    p {
        margin: 1rem;
    }
}

這里，創建了一個匿名層。匿名層的兩個重要特性：

• 創建后無法向其再添加規則
• 該層和其他命名層功能一致，優先級也遵循后定義的匿名層，比其他已定義的 @layer 層，優先級更高

@layer a,b,c;
@layer {
    div {
        background: orange;
    }
}
@layer a {
    div {
        background-color: red;
    }
}

@layer b {
    #box {
        background-color: green;
    }
}
@layer c {
    div {
        background-color: blue;
    }
}

最終展示匿名層的樣式，此時的優先級的順序為 匿名層@layer > @layer c > @layer b > @layer a > @layer a

嵌套層

嵌套層的意思就是在 @layer 內部，我們可以再嵌套使用 @layer 級聯層

@layer A {
    @layer B {
        ...;
    }
}

上述代碼等價于

@layer A.B {
    ...;
}

那么這里的樣式誰優先呢

@layer A {
    div {
        background: blue;
    }
?
    @layer B {
        div {
            background: red;
        }
    }
}

最終為藍色, 對于單個 @layer 內的嵌套關系，樣式優先級為 @layer A > @layer A.B

!important 對 CSS @layer 的影響

div {
    background: black;
}
@layer A {
    div {
        background: blue !important;
    }
}
@layer C {
    div {
        background: green;
    }
}

最終會展示!important的樣式，也就是說!important的規則更加優先。

那么，接下來這個場景呢?

div {
    background: black !important;
}
@layer A {
    div {
        background: blue !important;
    }
}
@layer C {
    div {
        background: green;
    }
}

在上述代碼中，非級聯層和級聯層 A 中各添加了一個!important, 結果為藍色。

這是一個非常重要的特性，在比較正常（非 !important）規則時，越是級聯（排序較后的 @layer 規則），優先級越低；反之，在比較 !important 規則時，越是級聯靠后的（排序較后的 @layer 規則），優先級越高。

!important在比較的時候遵循下面的規則

• !important 樣式高于非 !important 樣式
• 在比較 !important 規則時，優先級順序與正常規則相反，在正常狀態下優先級越低的，在 !important 下優先級越高。