CSS Nesting

CSS Nesting支援度:Can I Use)
CSS Nesting selector(&)支援度:Can I Use)

大家應該都有寫過CSS預處理器(SCSS/SASS)，我個人喜歡是因為它的巢狀的模塊性大大提高了它的可讀性。
現在CSS也可以這樣寫啦~

CSS Nesting是什麼?

• CSS巢狀與CSS預處理器不同，是由瀏覽器編譯，而不是由CSS預處理器編譯。
• 有助於提高CSS的可讀性、模塊性及後續維護性。
• 還有可能減少CSS的大小，減少使用者下載數據量。

template

<p>Test CSS Nesting:p not in parent</p>
<section>
   <p>Test CSS Nesting:p in parent</p>
</section>
<section class="border">
   <p>Test CSS Nesting:p in parent</p>
</section>

style

p{
  font-size:20px;
  font-weight:900;
  color:blue;
}
section{
  &.border{
    border:1px solid white;
  }
  > p{
      font-size:20px;
      font-weight:900;
      color:white;
    }
}

2023/09/23 CSS & selector支援度還沒有這麼高，大家記得在用之前查看一下Can I Use

Codepen範例

IT15-Day08-CSS Nesting

參考來源

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting