8 Praktik Terbaik untuk Memberi Nama Kelas dan ID CSS dalam Proyek JavaScript

Konvensi penamaan untuk kelas dan ID CSS memiliki peran penting dalam memahami dan memelihara kode dalam proyek JavaScript. Nama yang digunakan dapat meningkatkan kejelasan, kegunaan kembali, dan fleksibilitas basis kode. Mengikuti praktik terbaik penting saat memberi nama kelas dan ID CSS dalam proyek JavaScript.

1. Gunakan Nama Semantik

Memilih nama yang secara tepat menjelaskan fungsi atau tujuan elemen sangatlah penting. Nama semantik memberikan konteks yang bermakna dan membuat kode lebih mudah dipahami.

Misalnya, alih-alih menggunakan nama tradisional seperti kotak atau pemegang, coba gunakan nama seperti tajuk atau sidebar yang mencerminkan peran spesifik komponen.

/* Contoh nama semantik */
.header {}
.sidebar {}

2. Gunakan Konvensi Penamaan yang Konsisten

Konsistensi adalah kunci saat memberi nama kelas dan ID CSS. Menggunakan standar penamaan yang sama di seluruh papan membuatnya lebih mudah untuk mempertahankan struktur basis kode.

Konvensi penamaan BEM (Block Element Modifier) ​​dan OOCSS (Object-Oriented CSS) adalah konvensi penamaan yang paling disukai.

Anda dapat menggunakan konvensi penamaan OOCSS untuk menulis kode CSS yang modular, dapat dikelola, dan dapat diskalakan. Berikut adalah ilustrasi bagaimana Anda bisa membuat menu navigasi menggunakan OOCSS:

/* Struktur */
.nav {
menampilkan: melenturkan;
daftar-gaya: tidak ada;
}
.nav__item {
margin-kanan: 1rem;
}
.nav__link {
dekorasi teks: tidak ada;
warna: #333;
}
/* Penampilan */
.nav__link:arahkan {
dekorasi teks: menggarisbawahi;
}

Anda memiliki dua bagian kode yang berbeda untuk menu navigasi dalam contoh ini, satu untuk struktur dan satu lagi untuk tampilan. Bagian tampilan menjelaskan warna dan gaya lain yang memberikan tampilan menarik, sedangkan bagian struktur menjelaskan bagaimana dan di mana item menu akan diposisikan.

3. Hindari Ruang Nama

Di CSS, ruang nama adalah struktur semantik yang memungkinkan Anda memberikan awalan ruang nama untuk pilihan mereka. Untuk membedakan antara modul, pustaka, atau bagian lain dari basis kode yang mungkin memiliki nama kelas yang bertentangan, awalan namespace digunakan.

Fitur ini berguna, namun dapat menyebabkan masalah spesifisitas dan pemeliharaan.

Salah satu kelemahan terbesar dari ruang nama adalah kesulitan dalam menangani kekhususan pemilih. Awalan namespace dapat membuat pilihan menjadi lebih khusus, membuatnya lebih sulit untuk mengganti gaya di masa mendatang.

Hal ini menyebabkan pembengkakan kode CSS, yang membingungkan dan menantang untuk dipertahankan dari waktu ke waktu.

Ambil, misalnya:

/* Dengan namespace */
.my-module.isi {
warna latar belakang: biru;
}
/* Tanpa namespace */
.module-header {
warna latar belakang: merah;
}
.modul-konten {
warna latar belakang: kuning;
}

Awalan namespace .my-module Dan .isi keduanya digunakan dalam blok kode utama. Hasilnya pemilihan menjadi lebih tepat, membuat gaya masa depan lebih menantang.

Di bagian kedua, namespace diganti dengan nama kelas deskriptif .module-header Dan .modul-konten. Selain membuat kode lebih mudah dipahami, ini juga membuatnya lebih mudah untuk dipelihara.

Menggunakan ruang nama menambah kerumitan yang tidak perlu pada program Anda, terutama ketika banyak orang mengerjakan bagian yang berbeda dari proyek yang sama. Anda mungkin kesulitan untuk memahami dan mengubah kode satu sama lain karena tim yang berbeda mungkin menggunakan prefiks ruang nama yang berbeda.

Gunakan nama kelas yang deskriptif misalnya:

.header {
warna latar belakang: merah;
}
.isi {
warna latar belakang: kuning;
}

Dengan menggunakan nama kelas deskriptif, Anda dapat menghilangkan persyaratan untuk ruang nama, dan Anda dapat membuat basis kode Anda terstruktur dengan baik dan mudah dipahami.

4. Hindari Nama Global

Dalam proyek JavaScript, menghindari nama global untuk kelas dan ID CSS sangatlah penting. Nama global memperumit pemeliharaan kode dan meningkatkan kemungkinan risiko penamaan. Untuk memastikan basis kode yang lebih tahan lama dan dapat diskalakan, ada baiknya Anda menggunakan nama yang lebih tepat dalam cakupan komponen atau modul.

Perhatikan contoh di bawah ini:

 Penggunaan nama global yang salah 
<divkelas="wadah">
<divkelas="bilah samping">
 Konten di sini 
div>
div>

Nama kelas generik sidebar Dan wadah dalam contoh di atas rentan bentrok dengan style sheet lain atau kode JavaScript di dalam proyek. Misalnya, jika dua lembar gaya menentukan hal yang sama .sidebar kelas, satu dengan latar belakang biru dan yang lainnya dengan latar belakang merah, warna sidebar akan bergantung pada style sheet mana yang terakhir dimuat. Hasil yang tidak terduga dan tidak dapat diprediksi dapat terjadi dari ini.

Lebih baik menggunakan nama yang lebih tepat yang mencakup komponen atau modul yang relevan untuk meminimalkan masalah ini.

Lihatlah versi yang disempurnakan.

 Ditingkatkan dengan nama tertentu 
<divkelas="header__container">
<divkelas="sidebar__konten">
 Konten di sini 
div>
div>

Dalam versi yang diubah, nama kelas header__container Dan sidebar__content memperjelas untuk apa setiap elemen dan apa fungsinya.

Menggunakan nama tertentu mengurangi risiko konflik penamaan dan memastikan bahwa gaya hanya memengaruhi komponen yang diantisipasi di dalam komponen atau modulnya masing-masing.

5. Gunakan Konvensi Penamaan BEM

Konvensi penamaan BEM (Block Element Modifier) ​​populer untuk penamaan kelas CSS dan ID dalam proyek JavaScript. BEM menyediakan cara penamaan elemen yang terstruktur dan modular, mendorong penggunaan kembali, dan membuat pemeliharaan basis kode menjadi lebih mudah.

Konvensi BEM terdiri dari blok, elemen, dan pengubah. Elemen tingkat tinggi atau komponen yang berdiri sendiri disebut blok. Elemen adalah bagian komponen dari sebuah blok yang bergantung pada konteks blok. Pengubah dapat mengubah tampilan atau perilaku blok atau elemen.

Berikut adalah contoh menggunakan konvensi penamaan BEM:

/* Contoh Konvensi Penamaan BEM */
/* Memblokir */
.header {} 
/* Elemen blok */
.header__logo {} 
.header__menu {}
/* Pengubah elemen */
.header__menu--aktif {} 

Ilustrasi di atas menampilkan a tajuk blok dengan a logo dan a menu elemen. Itu menu item menerima aktif ubah untuk menunjukkan bahwa itu telah menjadi aktif.

Anda dapat dengan cepat mengidentifikasi komponen fundamental dan koneksi antara berbagai bagian, membuat struktur dan hierarki basis kode menjadi lebih jelas.

6. Gunakan Prefiks atau Sufiks

Anda dapat menambahkan pengaturan tambahan ke kelas CSS dan nama ID dengan memberi awalan atau akhiran, terutama dalam proyek yang lebih besar. Anda dapat menggunakan awalan seperti js- untuk menunjukkan bahwa kelas atau ID menawarkan kemampuan JavaScript. Konvensi penamaan JavaScript ditambah dengan konvensi penamaan CSS ini dapat menghemat waktu dan tenaga Anda dalam jangka panjang.

 HTML dengan awalan JavaScript 
<tombolkelas="js-beralih">Beralihtombol>
<divpengenal="js-modal">Modaldiv>

7. Gunakan Nama Deskriptif

Anda dapat lebih memahami tujuan, fungsi, atau konten elemen melalui nama deskriptif.

Perhatikan contoh di bawah ini:

/* Nama tidak deskriptif */
.kotak biru {
/* Gaya di sini */
}
A {
/* Gaya di sini */
}

Nama-nama kelas kotak biru Dan A dalam contoh di atas tidak mengirimkan informasi yang relevan tentang komponen yang mereka rujuk. Ketiadaan penamaan deskriptif dapat menyulitkan Anda untuk segera memahami tujuan atau peran komponen tertentu di dalam program.

Gunakan nama deskriptif yang secara akurat menjelaskan peran elemen tersebut meningkatkan keterbacaan dan pemeliharaan kode.

Pertimbangkan contoh yang ditingkatkan di bawah ini:

/* Nama deskriptif */
.produk-kartu {
/* Gaya di sini */
}
.navigasi-tautan {
/* Gaya di sini */
}

Nama-nama kelas produk-kartu Dan tautan navigasi dalam versi yang diperbarui membuatnya jelas tujuan apa yang dilayani setiap elemen. Anda akan lebih mudah menjelajahi dan mengedit kode dengan nama deskriptif ini.

Menggunakan nama deskriptif menguntungkan pengembang saat ini dan calon pengembang yang bekerja di basis kode. Saat meninjau kembali kode setelah beberapa waktu, Anda dapat dengan mudah memahami struktur dan pengoperasian potongan-potongan tersebut.

8. Gunakan Nama Pendek dan Ringkas

Meskipun nama yang khas itu penting, menjaganya tetap ringkas juga penting. Nama kelas dan ID yang panjang mungkin membuat kode lebih sulit dibaca dan dipelihara. Cobalah untuk mencapai keseimbangan antara singkat dan detail. Selain itu, pertimbangkan untuk menggunakan akronim atau singkatan terkenal dalam konteks proyek.

Pertimbangkan kasus di mana Anda ingin menggunakan CSS untuk menyesuaikan menu navigasi di situs web Anda. Anda dapat menggunakan nama yang lebih pendek dan lebih spesifik seperti nav-item atau nav-link bukannya yang panjang seperti nav-interface atau link-navigasi-utama.

.nav-item {
/* Gaya untuk item menu navigasi */
}
.nav-link {
/* Gaya untuk link navigasi */
}

Menggunakan akronim atau singkatan populer dalam konteks proyek, seperti nav untuk navigasi, mungkin membuat kode lebih mudah dipahami oleh pemrogram lain.

Praktik Terbaik untuk Memberi Nama Kelas dan ID CSS

Dalam proyek JavaScript, sangat penting untuk memberi nama kelas dan ID CSS dengan tepat untuk keterbacaan kode, pemeliharaan, dan skalabilitas.

Anda dapat membuat style sheet lebih sederhana dan meningkatkan kualitas kode. Meluangkan waktu untuk menetapkan konvensi penamaan yang baik akan terbayar dalam jangka panjang dengan memudahkan Anda dan orang lain untuk memahami dan memelihara basis kode.