原生CSS嵌套使用，你學明白了嗎？

作者：南城 2023-12-06 08:01:03

開發前端

CSS嵌套是一個重要的功能，它將增強我們編寫CSS的能力。目前使用嵌套是可行的，但需要注意受眾情況，因為目前對支持程度仍然較新。

本文翻譯自 CSS Nesting，作者：Ahmad Shadeed，略有刪改。

如果你是一個前端開發人員，那么你應該使用過CSS預處理器以及預處理器中的嵌套特性。它一直是一個受歡迎的功能，我一直都在使用CSS預處理器。

今年所有的主流瀏覽器都支持原生CSS嵌套：Chrome、Firefox和Safari。這是一個重要的CSS功能，這將使編寫CSS更加容易。在本文中我將記錄到目前為止我所學到的關于CSS嵌套的知識，并與您分享我的發現，包括使用案例和示例。

介紹

CSS嵌套是許多開發人員期待已久的功能之一。我們曾經依賴于CSS預處理器，如Sass或Less。讓我們來回顧一下以前的做法：

請看下面的例子。我們有一個圖標嵌套在選擇器.nav__item中。

.nav__item {
  .icon {
    display: flex;
    padding: 1rem;
  }
}

以上是一個Sass語法的代碼。編譯后，它在瀏覽器中看起來像下面這樣：

.nav__item .icon {
  display: flex;
  padding: 1rem;
}

使用原生CSS嵌套，相同的CSS將按原樣工作。這里有一個圖，顯示了原生CSS嵌套和瀏覽器DevTools之間的比較。

圖片

請注意瀏覽器顯示CSS的方式與CSS代碼中的顯示方式幾乎一致。

如果這個CSS是用Sass編譯的，瀏覽器會顯示如下：

圖片

CSS嵌套的好處

在我看來，嵌套 CSS 有一些很合理的理由，使其變得有用：

更容易閱讀CSS
風格一致
確定特定樣式的作用域
對沒有類或ID的HTML元素添加樣式

CSS嵌套規則

為了讓你了解CSS嵌套，我將嘗試提供不同CSS問題的案例，以及嵌套如何幫助解決這些問題。

首先你需要學習 &符號，有多數情況下，這個符號是必要的。

嵌套沒有類或ID的元素

圖片

在這個例子中，<a>元素是通過.nav__item設置樣式。要使CSS有效，使用&符號是可選的。

nav__item {
  & a {
    display: block;
    padding: 1.5rem 1rem;
  }
}

/* 等同于 */
.nav__item a {
}

您也可以選擇不使用&符號：

.nav__item {
  a {
    display: block;
    padding: 1.5rem 1rem;
  }
}

/* 等同于 */
.nav__item a {
}

請注意這是一個最近的更新，被稱為寬松的CSS嵌套。它適用于最新的Chrome Canary和Safari技術預覽版。

使用類嵌套元素

圖片

以前面的例子為例，但假設<a>元素有一個HTML類。

.nav__item {
  .link {
    display: block;
    padding: 1.5rem 1rem;
  }
}

/* 等同于 */
.nav__item .link {
}

這里不需要使用&，只有類名稱也正常生效。

嵌套CSS組合器

CSS原生嵌套的一個好處是可以使用組合器。讓我們來看一些例子。

在下面的例子中，我想選擇.nav__item的每個元素，它前面有另一個具有相同類的元素。因此我使用了相鄰兄弟選擇器。

圖片

在原生CSS嵌套中，我們可以使用&符號來模擬這種效果。請注意我重復使用了它兩次。

.nav__item {
  & + & {
    border-left: 2px solid;
  }
}

魔術發生在第二次重復的&。在這里瀏覽器將理解我想使用相鄰的兄弟選擇器。讓我給你看一個圖表來說明這一點：

圖片

另一個例子是嵌套子組合器。它可以選擇元素的直接子元素。

.nav__item {
  > a {
    padding: 1rem;
  }
}

嵌套示例：Active, Focus, Hover

:active、:focus和:hover是通過用戶操作激活的CSS偽類。

圖片

使用CSS嵌套，可以一次嵌套它們以避免代碼重復。讓我們以:hover為例：

button {
  &:hover {
    background-color: var(--bg-color);
  }

  &:focus {
    outline: solid 2px;
  }
}

使用預處理器進行嵌套時的區別在于瀏覽器將像這樣渲染它：

button:hover {
  background-color: var(--bg-color);
}

button:focus {
  outline: solid 2px;
}

讓我們來看看原生CSS嵌套在Chrome、Safari和Firefox中是如何呈現的。

圖片

嵌套示例：Post Content

第一個嘗試CSS嵌套的例子之一是對帖子的正文內容設置樣式。想象一下，一篇文章有正文標題、文本、圖像、引用等等。

圖片

標題

我們傾向于像下面這樣設計標題：

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
  /* styles here */
}

使用CSS嵌套，它更簡單：

.post-content {
  h1,
  h2,
  h3,
  h4 {
    color: var(--heading-color);
    font-weight: var(--heading-font-bold);
    margin-bottom: var(--size-2);
  }
}

我們也可以使用:is()選擇器來做同樣的事情。

.post-content {
  :is(h1, h2, h3, h4) {
    color: var(--heading-color);
    font-weight: var(--heading-font-bold);
    margin-bottom: var(--size-2);
  }
}

段落元素

一個常見的情況是設置段落內部的鏈接樣式。在這種情況下，CSS的嵌套功能非常好用。

.post-content {
  & p {
    color: var(--color-black);

    & a {
      font-weight: bold;
      text-decoration: underline;
    }
  }
}

鏈接可能也需要懸停或焦點效果。

.post-content {
  & p {
    color: var(--color-black);

    & a {
      font-weight: bold;
      text-decoration: underline;

      &:hover {
        /* hover styles */
      }
    }
  }
}

我們還可以用在嵌套媒體查詢。

.post-content {
  & p {
    /* base styles */

    @media (min-width: 400px) {
      /* do something */
    }
  }
}

帖子圖片

帖子圖包含一個圖像和一個可選的<figcaption>來顯示圖像的描述。

圖片

在我的示例中，如果<figure>有標題，我需要對它進行不同的樣式設置。可以通過嵌套CSS :has() 實現。

.post-content {
  & figure {
    & img {
      /* the figure's image styles */
    }

    /* changes to the <figure> container, if it has a figcaption element */
    &:has(figcaption) {
      display: flex;
      align-items: start;
    }

    & figcaption {
      /* caption styling */
    }
  }
}

文章列表

圖片

我需要為所有列表項添加邊框，除了最后一個。為此，我使用了:not()選擇器。

.post-content {
  li {
    &:not(:last-child) {
      border-bottom: 1px solid;
    }
  }
}

要使用:not()，我們需要在它前面附加一個&符號。

自定義標題間距

如果<h3>和<h4>之后是代碼片段，我需要減少它們下方的間距。

圖片

.post-content {
  & h3 + [class*="language-"],
  & h4 + [class*="language-"] {
    margin-top: 0.5rem;
  }
}

嵌套示例：卡片組件

我將演示一個簡單的卡片組件，它使用CSS嵌套來實現所需的樣式。

圖片

假設有一個默認或基本樣式的.card元素，我將繼續演示CSS嵌套的使用。

.card {
  /* default card styles */
}

如果容器寬度大于400px，我希望卡片成為一個Flex容器。

.card {
  /* default card styles */

  /* if the container width is 400px or bigger */
  @container card (min-width: 400px) {
    display: flex;
  }
}

嵌套示例：表單輸入

一種常見的情況是對輸入的占位符進行樣式設置。問題是每個瀏覽器都有自己的前綴。

圖片

由于前綴樣式需要一個雙冒號，我們需要使用與號&，否則樣式將中斷。

input {
  --placeholder-color: #969696;
  /* other styles */

  &::-webkit-input-placeholder {
    color: var(--placeholder-color);
  }

  &::-moz-placeholder {
    color: var(--placeholder-color);
    opacity: 1;
  }

  &:-moz-placeholder {
    color: var(--placeholder-color);
  }
}

我在探索CSS嵌套時發現的錯誤

使用不帶&號的通用選擇器

假設我們有一張卡片，我們想選擇其中的所有元素。使用CSS原生嵌套，這應該可以工作：

.card {
  * {
    /* styles here */
  }
}

我發現這在Chrome穩定版中不起作用，但在Chrome Canary 121、Safari 17.1和Firefox 119中工作正常。

.card {
  & * {
    /* styles here */
  }
}

使用不帶&號的自定義屬性

在這個問題中，選擇一個不帶&號的自定義屬性將不會呈現預期的結果。

.card {
  [data-type="featured"] {
    /* styles here */
  }
}

我發現這在Chrome穩定版中不起作用，但在Chrome Canary 121、Safari 17.1和Firefox 119中工作正常。

為了解決這個問題，我們需要附加一個&符號：

.card {
  &[data-type="featured"] {
    /* styles here */
  }
}

這兩個bug都在Chrome Canary中的寬松CSS嵌套版本中得到了修復。

檢測CSS嵌套支持

可以使用@supports來檢查CSS嵌套支持。在我們的例子中，我們想檢查瀏覽器是否識別&可以使用以下代碼。

@supports selector(&) {
  .post-content {
    & h2 {
      /* styles here. */
    }
  }
}

對我來說，現在還在使用PostCSS嵌套插件，它將原生CSS嵌套編譯為普通CSS。一旦它可以安全使用后，就可以不再使用插件了。

結論

CSS嵌套是一個重要的功能，它將增強我們編寫CSS的能力。目前使用嵌套是可行的，但需要注意受眾情況，因為目前對支持程度仍然較新。

責任編輯：武曉燕來源：南城大前端

CSS PostCSS