2024年新的原生嵌套CSS特性：絕對改變游戲規(guī)則

作者：dev 2024-07-19 08:13:00

你通常會感到壓力，浪費大量時間重復外部元素名稱。難怪SASS和LESS變得如此受歡迎。

新的原生嵌套CSS特性徹底改變了前端開發(fā)。

? 之前：

你會如何為這些嵌套的HTML元素添加樣式？

<section>
  你好！
  <div>
    <p>
      <span>codingbeautydev.com</span> -- 以編碼為激情
    </p>
    <p>
      編碼幫助你實現(xiàn)目的感和成長。
    </p>
  </div>
</section>

你通常會感到壓力，浪費大量時間重復外部元素名稱。

section {
  font-family: Arial;
}

section div {
  font-size: 1.5em;
}

section div p {
  color: blue;
}

section div p span {
  font-weight: bold;
}

難怪SASS和LESS變得如此受歡迎。

? 但現(xiàn)在：使用原生CSS：

變得更加清晰和簡單。所有樣式現(xiàn)在都被封裝在一起，而不是散落各處。

section {
  font-family: Arial;
  div {
    font-size: 1.2em;
    p {
      color: blue;
      span {
        font-weight: bold;
      }
    }
  }
}

就像面向?qū)ο缶幊讨械姆庋b一樣直觀：

// ? redundancy
// ? 冗余
const personName = 'Tari Ibaba';
const personSite = 'codingbeautydev.com';
const personColor = '??blue';

// ? encapsulate field
// ? 封裝字段
class Person {
  name = 'Tari Ibaba';
  site = 'codingbeautydev.com';
  color = '??blue';
}

在某些瀏覽器中，你可能需要使用&：

section {
  font-family: Arial;
  & div {
    font-size: 1.2em;
    & p {
      color: blue;
      & span {
        font-weight: bold;
      }
    }
  }
}

那么類和ID呢？

如果你想通過class或id屬性來為嵌套元素添加樣式怎么辦？

<section class="class1">
  你好！
  <div id="id1">
    <p class="class2">
      <span id="url">codingbeautydev.com</span> -- 以編碼為激情
    </p>
    <p>
      編碼具有認知挑戰(zhàn)性和精神刺激性。
    </p>
  </div>
</section>

嵌套CSS將非常相似：

.class {
  font-family: Arial;
  #id1 {
    font-size: 1.2em;
    .class2 {
      color: purple;
      #url {
        font-weight: bold;
      }
    }
  }
}

它也適用于兄弟選擇器：

div {
  section {
    + p {
      color: blue;
    }
    ~ p {
      color: red;
    }
  }
}

偽類和偽元素

是的：

button {
  background-color: blue;
  :hover {
    background-color: yellow;
  }
}

媒體查詢

嵌套CSS的另一個巨大賣點：

? 之前：

創(chuàng)建媒體查詢很混亂，查詢樣式和元素的主要樣式是分開的：

.hamburger {
  display: none;
}

.header {
  font-size: 40px;
}

@media (orientation: landscape) {
  .header {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
  .hamburger {
    display: block;
  }
  .header {
    font-size: 24px;
  }
}

? 現(xiàn)在：

讓元素樣式包含查詢樣式比讓查詢樣式包含元素樣式的小片段更直觀。

嵌套CSS讓你可以輕松做到這一點：

.hamburger {
  display: none;

  @media(max-width: 480px) {
    display: block;
  }
}

.header {
  font-size: 40px;

  @media(orientation: landscape) {
    font-size: 32px;
  }

  @media(max-width: 480px) {
    font-size: 24px;
  }
}

使用原生嵌套CSS，你可以更直觀地創(chuàng)建樣式。

SASS現(xiàn)在基本上沒用了 — 特別是現(xiàn)在我們在CSS中也有了原生變量：

$base-font-size: 16px;
$gutter-width: 10px;

.container {
  padding: calc($gutter-width * 2);
  font-size: $base-font-size;
}

.heading {
  font-size: calc($base-font-size * 1.5);
}

責任編輯：武曉燕來源：大遷世界

CSS 特性 SASS