Bolehkah CSS Nesting Membantu Menulis Gaya Lebih Ringkas dan Cekap?

CSS Nesting: Frontier Baharu dalam Penggayaan

Bolehkah anda menyusun kelas CSS, membolehkan anda menulis gaya yang lebih ringkas dan cekap? Jawapannya ialah ya, terima kasih kepada Modul Nesting CSS dalam spesifikasi CSS.

Modul Nesting CSS menawarkan sintaks yang membolehkan anda menyusun pemilih dalam satu sama lain, memberikan pendekatan yang lebih tersusun dan logik untuk penggayaan.

Modul ini disokong oleh semua pelayar utama, membolehkan anda menulis kod seperti ini:

table.colortable {
  & td {
    text-align: center;
    &:first-child, &:first-child + td {
      border: 1px solid black
    }
  }
  & th {
    text-align: center;
    background: black;
    color: white;
  }
}

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}

Sintaks bersarang ini membolehkan anda mencipta gaya yang kompleks dengan mudah, dengan menggunakan semula dan menggabungkan pemilih secara hierarki. Ia bukan sahaja memperkemas kod anda tetapi juga meningkatkan kebolehbacaan dan kebolehselenggaraan.

Atas ialah kandungan terperinci Bolehkah CSS Nesting Membantu Menulis Gaya Lebih Ringkas dan Cekap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!