Kamu bisa menggunakan ._camelCase untuk penamaan class elemen HTML yang akan kamu akses dengan JavaScript. Ini alternatif yang bagus daripada menggunakan ID.

Penamaan ini membantu memisahkan class yang digunakan untuk styling dan class untuk mengakses elemen di JavaScript, supaya ketika ada keperluan mengubah class untuk styling, itu tidak akan mempengaruhi proses kerja aplikasi.

Contoh :

<div class="widget-FeaturedPost _wgFeaturedPost">
  <!-- content goes here -->
</div>

<style>
  .widget-FeaturedPost {
    background: lightblue;
  }
</style>

<script>
  // replace ._wgFeaturedPost text to "Foo bar"
  let el = document.querySelector('._wgFeaturedPost');
  el?.replaceChildren('Foo bar');
</script>

Keunggulan:

• Tidak digunakan untuk styling.
• Mudah dibedakan dengan nama class yang menggunakan dash (-), misalnya: .bg-red, .m-auto, dll.
• Mudah dicari di codebase.

Kekurangan:

• Secara tidak langsung mengekspos objek JavaScript yang mudah ditebak, tapi ini memang bukan hal yang jarang terjadi ketika membuat aplikasi dengan plain JavaScript.

Tips

._camelCase sebaiknya disimpan di akhir semua class. Dengan begini kamu bisa copy dengan mudah dengan double-click nama class di element inspector.

Double-clicking nama class untuk copy.