Pengembang web (yaitu, Anda) dapat membuat kelas CSS dan nama id dan menggunakan nama ini untuk mengidentifikasi Div serta elemen dan tag halaman lainnya. Bagi pengembang, ketika memberi nama pemilih css yang mendefinisikan ulang tag (tag) XHTML, mereka harus memastikan bahwa mereka secara akurat cocok dengan tag yang telah ditentukan sebelumnya, tetapi untuk nama pemilih kelas dan id, ini adalah masalah pendapat. Namun, bukanlah kebiasaan yang baik untuk memberi nama kelas dan ID ini sesuai keinginan.
Setelah membaca serangkaian artikel tentang kelas CSS dan konvensi penamaan id yang ditulis oleh Andy Clarke (dari Stuff and Nonsense dan All That Malarkey) dan Eric Meyer, saya mulai berpikir tentang penggunaan kelas dan id dalam proses desain situs Web saya sendiri. Metode penamaan.
Penamaan intuitif
Saat mendesain halaman web dan perlu mengidentifikasi Div, ide paling wajar adalah memberi nama elemen menggunakan kata-kata yang menggambarkan lokasinya di halaman. Pendekatan ini membuat nama kelas dan id terlihat seperti ini:
panel atas
navigasi horizontal
sisi kiri
kolom tengah
kol kanan
Ini adalah cara yang valid untuk memberi nama kelas dan id CSS dan XHTML. Istilah-istilah ini sederhana dan deskriptif, sehingga memenuhi kebutuhan untuk mengidentifikasi elemen halaman dan gaya CSS terkait.
Masalahnya adalah nama tersebut dikaitkan dengan ekspresi spesifik dari konten halaman. Nama-nama ini mengacu pada posisi elemen halaman dalam tata letak halaman tertentu, sehingga penggunaannya di luar tata letak tersebut tidak tepat atau bahkan membingungkan. Pada saat yang sama, nama-nama ini tidak melibatkan struktur isi dokumen. Oleh karena itu, berikut adalah cara yang lebih baik untuk memberi nama kelas dan ID CSS.
Penamaan terstruktur
Markup terstruktur berarti pemisahan lengkap informasi ekspresi/lokasi dari konten - ini termasuk nama kelas dan id yang muncul di markup.
Informasi terkait yang diberi tag digunakan untuk mendeskripsikan struktur dokumen, bukan tampilannya. Fitur ini memungkinkan kita untuk menggunakan kembali konten dan markup dalam format tampilan berbeda hanya dengan mengubah CSS. Ketika Anda memahami metode ini, mudah untuk menemukan bahwa menggunakan posisi halaman untuk memberi nama kelas dan id sangat tidak tepat ketika berhadapan dengan format tampilan seperti audio. Oleh karena itu, kelas dan id harus disusun dan diberi nama berdasarkan tujuannya dalam dokumen, bukan berdasarkan lokasi kemunculannya.
Nama kelas dan id dapat diberi nama dengan cara terstruktur seperti yang ditunjukkan di bawah ini:
merek
navigasi utama
subnav
konten utama
bilah sisi
Nama-nama ini mudah dipahami seperti konvensi penamaan intuitif, namun nama-nama ini menggambarkan peran elemen halaman, bukan lokasinya. Hal ini membuat kode lebih konsisten dengan maksud awal menggunakan markup struktural murni, yaitu pengembang dapat menangani format tampilan di berbagai media tanpa mengubah markup.
Bahkan jika Anda tidak berencana memformat halaman Web Anda di media lain, menggunakan penamaan terstruktur dapat membantu Anda mempermudah peningkatan atau desain ulang situs di masa mendatang. Misalnya, penamaan terstruktur menghindari kebingungan ketika div dengan id yang sama di kolom kanan dipindahkan ke sisi kiri halaman. Memberi nama div sidebar dengan cara ini lebih tepat karena di sisi mana pun halaman itu muncul, namanya tetap intuitif dan mudah dipahami oleh pengembang.
beberapa konvensi penamaan
Andy Clarke menganalisis kode sumber dari 40 situs Web yang dirancang oleh pengembang yang menganjurkan konsep desain Web standar. Meskipun nama kelas dan id sangat tidak konsisten, namun beberapa nama umum yang sering muncul masih ditemukan. Contoh daftar nama kelas/id yang paling umum digunakan diberikan di sini:
tajuk
isi
navigasi
bilah sisi
catatan kaki
Apakah nama kelas dan ID yang umum ini menandai lahirnya standar atau pembentukan konvensi yang diterima secara umum? Meski ini yang kuharapkan, tapi menurutku tidak. Saya sangat ingin melihat serangkaian standar penamaan untuk elemen halaman umum yang kita lihat setiap hari. Pada saat yang sama, menggunakan metode penamaan standar dapat mempermudah menemukan elemen halaman dan memperbarui situs Web, terutama ketika Anda perlu berpindah pekerjaan antar situs yang dikembangkan oleh pengembang berbeda pada waktu berbeda.