Konvensi penamaan dan alternatif untuk abstraksi berat – Beragampengetahuan

Saat kita mempelajari prinsip dasar CSS, kita akan mempelajari cara menulis gaya yang modular, dapat digunakan kembali, dan deskriptif untuk memastikan pemeliharaan. Namun, ketika pengembang mengerjakan aplikasi nyata, seringkali terasa mustahil untuk menambahkan fungsionalitas UI tanpa membocorkan gaya ke area yang tidak diinginkan.

Masalah ini sering kali berkembang menjadi siklus yang terwujud dengan sendirinya. Gaya yang secara teoritis terbatas pada satu elemen atau kelas mulai muncul di tempat yang bukan tempatnya. Hal ini memaksa pengembang untuk membuat penyeleksi yang lebih spesifik untuk mengganti gaya yang bocor, yang kemudian secara tidak sengaja menimpa gaya global, dll.

Konvensi nama kelas yang ketat (seperti BEM) adalah cara teoritis untuk memecahkan masalah ini. ini Metode BEM (Blok, Elemen, Pengubah). Merupakan cara sistematis untuk memberi nama kelas CSS untuk memastikan penggunaan kembali dan struktur dalam file CSS. Konvensi penamaan seperti ini dapat mengurangi beban kognitif dengan memanfaatkan bahasa domain untuk mendeskripsikan elemen dan statusnya, dan jika diterapkan dengan benar, dapat membuat gaya aplikasi besar lebih mudah dipertahankan.

Namun, di dunia nyata, hal ini tidak selalu terjadi. Prioritas dapat berubah, dan seiring dengan perubahan tersebut, implementasinya mungkin menjadi tidak konsisten. Perubahan kecil pada struktur HTML mungkin memerlukan modifikasi banyak nama kelas CSS. Untuk aplikasi front-end yang sangat interaktif, nama kelas yang mengikuti pola BEM bisa menjadi panjang dan berat (misalnya, app-user-overview__status--is-authenticating), dan tidak sepenuhnya mematuhi konvensi penamaan dapat merusak struktur sistem, sehingga menghilangkan manfaatnya.

Mengingat tantangan-tantangan ini, tidak mengherankan jika pengembang beralih ke kerangka kerja, dengan Tailwind menjadi kerangka kerja CSS paling populer. Daripada mencoba melawan perang kekhususan antar gaya yang tampaknya tidak dapat dimenangkan, lebih mudah untuk meninggalkan CSS Cascade dan menggunakan alat yang menjamin isolasi total.

Pengembang lebih mengandalkan utilitas

Bagaimana kita tahu bahwa beberapa pengembang ingin menghindari gaya berjenjang? Ini adalah kebangkitan alat front-end “modern” (seperti kerangka CSS-in-JS) yang dirancang khusus untuk tujuan ini. Menggunakan gaya independen yang sangat terbatas pada komponen tertentu sepertinya merupakan angin segar. Ini menghilangkan kebutuhan untuk memberi nama – yang masih menjadi salah satu tugas front-end yang paling menjengkelkan dan memakan waktu – dan memungkinkan pengembang menjadi lebih produktif tanpa sepenuhnya memahami atau memanfaatkan manfaat warisan CSS.

Namun mengabaikan CSS Cascade memiliki masalah tersendiri. Misalnya, gaya penulisan dalam JavaScript memerlukan banyak konfigurasi build dan sering kali mengakibatkan gaya tercampur secara aneh dengan markup komponen atau HTML. Kami mengizinkan alat pembangunan untuk secara otomatis menghasilkan penyeleksi dan pengidentifikasi untuk kami alih-alih mempertimbangkan konvensi penamaan dengan cermat (mis. .jsx-3130221066), mengharuskan pengembang untuk mengikuti bahasa semu lainnya. (Seolah-olah memahami beban kognitif seluruh komponen useEffectBelum cukup banyak hal yang telah dilakukan! )

Mengabstraksi lebih lanjut pekerjaan penamaan kelas ke dalam alat berarti bahwa proses debug dasar sering kali terbatas pada versi aplikasi tertentu yang dikompilasi untuk pengembangan, daripada memanfaatkan fitur browser asli yang mendukung proses debug waktu nyata, seperti alat pengembang.

Sepertinya kita memerlukan alat pengembangan untuk men-debug alat yang kita gunakan untuk mengabstraksi apa yang sudah ditawarkan web – semuanya untuk menghilangkan “kesulitan” dalam menulis CSS standar.

Untungnya, fitur CSS modern tidak hanya membuat penulisan CSS standar menjadi lebih fleksibel, namun juga memberi pengembang seperti kami lebih banyak kemampuan untuk mengelola kaskade dan membuatnya berfungsi untuk kami. CSS Cascade Layers adalah contoh yang bagus, namun ada fitur lain yang secara mengejutkan kurang mendapat perhatian – meskipun hal itu berubah, dan baru-baru ini menjadi lebih menarik. Kompatibel dengan dasar.

CSS @scope aturan

Menurut saya CSS @scope aturan Menjadi obat potensial untuk jenis kecemasan yang disebabkan oleh kebocoran gaya yang telah kita diskusikan, hal ini tidak memaksa kami mengorbankan keunggulan web asli untuk abstraksi dan alat pembangunan tambahan.

“ini @scope Aturan CSS memungkinkan Anda memilih elemen dalam subpohon DOM tertentu, memposisikan elemen secara tepat tanpa harus menulis penyeleksi yang terlalu spesifik sehingga sulit untuk diganti, dan tanpa memasangkan penyeleksi terlalu erat ke struktur DOM. “

——MDN

Dengan kata lain, kita dapat menggunakan gaya independen pada kejadian tertentu Tanpa mengorbankan warisan, aliran, atau bahkan pemisahan kepentingan yang mendasar Ini adalah prinsip panduan lama dalam pengembangan front-end.

Selain itu, ia memiliki jangkauan browser yang luar biasa. Faktanya, Firefox 146 menambahkan dukungan untuk @scope Pada bulan Desember, ini dibuat kompatibel dengan Baseline untuk pertama kalinya. Berikut perbandingan sederhana antara tombol yang menggunakan mode BEM dan tombol yang menggunakan mode BEM @scope aturan:

<!-- BEM --> 
<button class="button button--primary">
  <span class="button__text">Click me</span>
  <span class="button__icon">→</span>
</button>

<style>
  .button .button__text { /* button text styles */ }
  .button .button__icon { /* button icon styles */ }
  .button--primary { primary button styles */ }
</style>

<!-- @scope --> 
<button class="primary-button">
  <span>Click me</span>
  <span>→</span>
</button>

<style>
  @scope (.primary-button) {
    span:first-child { /* button text styles */ }
    span:last-child { /* button icon styles */ }
  }
</style>

ini @scope aturan mengizinkan Kurang akurat dan kurang rumit. Pengembang tidak perlu lagi membuat batasan menggunakan nama kelas, yang pada gilirannya memungkinkan mereka menulis pemilih berdasarkan elemen HTML asli, sehingga menghilangkan kebutuhan untuk menentukan pola nama kelas CSS. Dengan hanya menghilangkan kebutuhan akan manajemen nama kelas, @scope Dapat meredakan ketakutan terkait CSS dalam proyek besar.

Penggunaan dasar

Pertama, tambahkan @scope Aturan ke dalam CSS Anda dan masukkan pemilih root dan gaya akan tercakup di dalamnya:

@scope (<selector>) {
  /* Styles scoped to the <selector> */
}

Jadi, misalnya, jika kita ingin membatasi cakupan gaya menjadi <nav> elemen, mungkin terlihat seperti ini:

@scope (nav) {
  a { /* Link styles within nav scope */ }

  a:active { /* Active link styles */ }

  a:active::before { /* Active link with pseudo-element for extra styling */ }

  @media (max-width: 768px) {
    a { /* Responsive adjustments */ }
  }
}

Dengan sendirinya, ini bukanlah fitur yang inovatif. Namun, parameter kedua dapat ditambahkan ke cakupan yang akan dibuat batas bawahsecara efektif menentukan titik awal dan akhir rentang.

/* Any a element inside ul will not have the styles applied */
@scope (nav) to (ul) {
  a {
    font-size: 14px;
  }
}

Praktek ini disebut pelingkupan donatdan dapat digunakan dalam berbagai cara, termasuk serangkaian penyeleksi serupa dan sangat spesifik yang digabungkan erat dengan struktur DOM, :not Pseudo-selector, atau menetapkan nama kelas tertentu <a> elemen di dalamnya <nav> untuk menangani CSS yang berbeda.

Terlepas dari metode lain, @scope Caranya lebih sederhana. Lebih penting lagi, ini mencegah risiko kerusakan gaya ketika nama kelas diubah atau disalahgunakan, atau ketika struktur HTML diubah. sekarang itu @scope Kompatibel dengan baseline, kita tidak lagi memerlukan solusi!

Kita selanjutnya dapat mengambil beberapa batasan akhir untuk menciptakan “gaya angka delapan”:

/* Any <a> or <p> element inside <aside> or <nav> will not have the styles applied */
@scope (main) to (aside, nav) {
  a {
    font-size: 14px;
  }
  p {
    line-height: 16px;
    color: darkgrey;
  }
}

Bandingkan dengan versi tanpa pemrosesan @scope Aturannya, pengembang harus “mengatur ulang” gaya ke nilai defaultnya:

main a {
  font-size: 14px;
}

main p {
  line-height: 16px;
  color: darkgrey;
}

main aside a,
main nav a {
  font-size: inherit; /* or whatever the default should be */
}

main aside p,
main nav p {
  line-height: inherit; /* or whatever the default should be */
  color: inherit; /* or a specific color */
}

Lihat contoh di bawah ini. Pernahkah Anda memperhatikan betapa mudahnya menargetkan penyeleksi tertentu dan mengabaikan penyeleksi lainnya?

Lihat contoh Pena @scope [forked] Pengarang: Blake Lundquist.

Pertimbangkan skenario di mana Anda perlu menerapkan gaya unik pada konten yang ditempatkan di komponen web. Saat Anda menempatkan konten ke dalam Komponen Web, konten tersebut menjadi bagian dari Shadow DOM namun tetap mewarisi gaya dokumen induk. Pengembang mungkin ingin menerapkan gaya berbeda berdasarkan komponen web tempat konten berada:

<!-- Same <user-card> content, different contexts -->
<product-showcase>
  <user-card slot="reviewer">
    <img src=" slot="avatar">
    <span slot="name">Jane Doe</span>
  </user-card>
</product-showcase>

<team-roster>
  <user-card slot="member">
    <img src=" slot="avatar">
    <span slot="name">Jane Doe</span>
  </user-card>
</team-roster>

Dalam contoh ini, pengembang mungkin menginginkannya <user-card> Hanya memiliki gaya berbeda saat merender secara internal <team-roster>:

@scope (team-roster) {
  user-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  user-card img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
  }
}

Lebih banyak manfaat

Ada cara lain untuk melakukan ini @scope Anda dapat menghilangkan kebutuhan akan manajemen kelas tanpa menggunakan nama kelas yang dihasilkan utilitas atau JavaScript. Misalnya, @scope Membuka kemungkinan implementasi yang mudah keturunan target dari pemilih mana punbukan hanya nama kelas:

/* Only div elements with a direct child button are included in the root scope */
@scope (div:has(> button)) {
  p {
    font-size: 14px;
  }
}

Dan mereka Dapat disarangkanbuat rentang dalam rentang:

@scope (main) {
  p {
    font-size: 16px;
    color: black;
  }
  @scope (section) {
    p {
      font-size: 14px;
      color: blue;
    }
    @scope (.highlight) {
      p {
        background-color: yellow;
        font-weight: bold;
      }
    }
  }
}

Alternatifnya, cakupan root bisa berada di dalam @scope aturan:

/* Applies to elements inside direct child section elements of main, but stops at any direct aside that is a direct chiled of those sections */
@scope (main > section) to (:scope > aside) {
  p {
    background-color: lightblue;
    color: blue;
  }
  /* Applies to ul elements that are immediate siblings of root scope  */
  :scope + ul {
    list-style: none;
  }
}

ini @scope at-rule juga memperkenalkan yang baru Kedekatan Dimensi khusus resolusi CSS. Dalam CSS tradisional, ketika dua penyeleksi cocok dengan elemen yang sama, pemilih dengan spesifisitas lebih tinggi akan menang. Dan @scopeketika dua elemen memiliki spesifisitas yang sama, elemen yang akar jangkauannya lebih dekat ke elemen yang cocok akan menang. Hal ini menghilangkan kebutuhan untuk mengganti gaya induk dengan menambahkan kekhususan elemen secara manual, karena komponen dalam secara alami akan menggantikan gaya elemen luar.

<style>
  @scope (.container) {
    .title { color: green; } 
  }
  <!-- The <h2> is closer to .container than to .beragampengetahuan so "color: green" wins. -->
  @scope (.beragampengetahuan) {
    .title { color: red; }
  }
</style>

<div class="beragampengetahuan">
  <div class="container">
    <h2 class="title">Hello</h2>
  </div>
</div>

sebagai kesimpulan

Kerangka kerja CSS yang mengutamakan utilitas seperti Tailwind sangat bagus untuk pembuatan prototipe dan proyek kecil. Namun, manfaatnya dengan cepat berkurang bila digunakan dalam proyek besar yang melibatkan banyak pengembang.

Pengembangan front-end menjadi semakin kompleks dalam beberapa tahun terakhir, tidak terkecuali CSS. Meskipun @scope Aturan bukanlah obat mujarab dan dapat mengurangi kebutuhan akan alat yang rumit. Ketika digunakan sebagai pengganti atau bersamaan dengan penamaan kelas strategi, @scope Membuat penulisan CSS yang dapat dipelihara menjadi lebih mudah dan menyenangkan.

bacaan lebih lanjut

Hasilkan $200 seminggu
Dikutip dari artikel di Smashing Magazine — Untuk Desainer dan Pengembang Web