Hari -hari awal untuk scoping CSS

Scoping CSS mendapat daya tarikan, dengan spesifikasi draf kerja semasa yang mewakili kemajuan yang ketara. Cadangan ini, yang diterajui oleh Miriam Suzanne, menangani batasan percubaan sebelumnya.

Pusat konsep teras sekitar mewujudkan gaya yang secara eksplisit disasarkan pada komponen HTML tertentu. Peraturan @scope memudahkan ini:

<code><div>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="Hari -hari awal untuk scoping CSS"><div>
    <p>…</p>
  </div>
</div></code>

Gaya "Komponen" ini menjadi sangat fokus:

 <code>@scope (.media) { :scope { display: grid; grid-template-columns: 50px 1fr; } img { filter: grayscale(100%); border-radius: 50%; } .content { ... } }</code>

Kelebihan utama termasuk:

1. Gaya komponen yang jelas, memudahkan penyelenggaraan.
2. Mengelakkan konflik penamaan; Gaya terkandung dalam komponen.

Walaupun prepending kelas induk menawarkan scoping yang sama ( .media , .media img , .media .content ), CSS Nesting menyediakan alternatif yang lebih ringkas:

 <code>.media { & img { } & .content { } }</code>

Walau bagaimanapun, @scope menawarkan keupayaan unik. "Donut Scoping" membolehkan kawalan tepat ke atas sempadan skop:

 <code>@scope (.media) to (.content) { p { } }</code>

Ini menghalang kebocoran gaya di luar kawasan yang dikehendaki:

<code><div>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="Hari -hari awal untuk scoping CSS"><p>Ini adalah gaya dalam skop.</p>
  <div>
    <p>Ini tidak bergaya dalam skop.</p>
  </div>
</div></code>

Spesifikasi ini juga mengendalikan senario "nenek moyang terdekat", peningkatan yang signifikan terhadap kaedah yang sedia ada. Blog Miriam memberikan penjelasan terperinci tentang kerumitan ini dan lain -lain, termasuk skop bertindih dan interaksi dengan bersarang. Penjelajahan lanjut kerja beliau sangat disyorkan.

Atas ialah kandungan terperinci Hari -hari awal untuk scoping CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!