2024年新的原生嵌套CSS特性：絕對改變游戲規則
作者：dev
你通常會感到壓力，浪費大量時間重復外部元素名稱。難怪SASS和LESS變得如此受歡迎。
新的原生嵌套CSS特性徹底改變了前端開發。
? 之前：
你會如何為這些嵌套的HTML元素添加樣式？
<section>
你好！
<div>
<p>
<span>codingbeautydev.com</span> -- 以編碼為激情
</p>
<p>
編碼幫助你實現目的感和成長。
</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變得如此受歡迎。
? 但現在：使用原生CSS：
變得更加清晰和簡單。所有樣式現在都被封裝在一起，而不是散落各處。
section {
font-family: Arial;
div {
font-size: 1.2em;
p {
color: blue;
span {
font-weight: bold;
}
}
}
}就像面向對象編程中的封裝一樣直觀：
// ? 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>
編碼具有認知挑戰性和精神刺激性。
</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的另一個巨大賣點：
? 之前：
創建媒體查詢很混亂，查詢樣式和元素的主要樣式是分開的：
.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;
}
}? 現在：
讓元素樣式包含查詢樣式比讓查詢樣式包含元素樣式的小片段更直觀。
嵌套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，你可以更直觀地創建樣式。
SASS現在基本上沒用了 — 特別是現在我們在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);
}責任編輯：武曉燕
來源：
大遷世界
