Menggunakan kelas CSS sebagai dekorator - pola yang bagus?

Saya telah membangun aplikasi web dengan GUI yang cukup kompleks - banyak elemen kecil di samping satu sama lain dan dalam elemen lain yang memerlukan berbagai perilaku (menyeret, mengklik, tetapi peka konteks).

Kode saya cenderung berfungsi seperti ini:

kontrol dimulai sebagai tag html

<li>

kemudian saya menambahkan kelas ke tag

<li class = 'static passive included'>

beberapa kelas mungkin untuk styling css untuk mempengaruhi penampilan

.static {background: blue; float: left;}

sementara yang lain ditindaklanjuti oleh jQuery untuk memberikan perilaku untuk peristiwa DOM terkait

$("#container").delegate(".passive", function {onclick : //do-stuff})

dan yang lainnya mungkin diambil oleh javascript normal saat memindai dokumen, mis. mengumpulkan nilai teks semua node dengan kelas 'termasuk'. Jadi elemen DOM tertentu adalah objek GUI yang mengimplementasikan kelas definted melalui kombinasi css dan jQuery.

Pertanyaan saya adalah, apakah ini cara yang baik untuk bekerja? Dan juga apakah ini benar-benar 'dekorator' - mereka tentu saja 'menambah tanggung jawab tambahan pada suatu objek secara dinamis' tetapi saya tidak yakin tentang istilah itu. Akhirnya, apakah Anda menggunakan pola ini di situs Anda sendiri?

Saya pikir apa yang Anda lakukan sudah mati. Manfaat menggunakan kelas, bukan membuat nama atribut, adalah Anda masih dapat memvalidasi halaman. Tidak ada browser modern yang akan kecewa tentang kelas CSS yang tidak ditentukan, dan mereka sepele untuk digunakan dengan jQuery, et al.

Kelasnya oke, tapi saya akan pertimbangkan atribut data HTML juga. Seringkali, nama kelas tidak menyampaikan informasi yang cukup untuk mengaktifkan kait javascript yang sesuai (tanpa nama elemen pengodean-hard-coding). Atribut data HTML menyediakan cara lain untuk mengklasifikasikan dan memilih elemen dan melampirkan data pada mereka untuk tujuan tambahan, seperti perangkat tambahan berbasis JavaScript.

Dengan jQuery, atribut data HTML sama mudahnya dengan kelas CSS.

Hmmm ... ya dan tidak. Tidak apa-apa untuk melakukan hal-hal seperti itu, tetapi kelas benar-benar harus dinamai untuk menunjukkan apa yang umum tentang data di dalamnya. Jika tidak ada yang umum di antara dua tag maka ada kemungkinan bahwa persyaratan kelas akan berbeda di kemudian hari.

Persyaratan contoh:

• semua item navigasi akan berwarna putih dengan warna biru, helvetica dengan margin 1px
• semua deskripsi komentar akan berwarna putih pada biru, arial dengan margin 4px dan padding 2px

Apakah lebih baik memberi mereka berdua kelas whiteonblue di mana

.whiteonblue {
  font-color: white;
  background-color: blue;
}

atau memiliki kode berulang

.navitems {
  font-color: white;
  background-color: blue;
// more css
}

.commentdesc {
  font-color: white;
  background-color: blue;
// more css
}

Saya berpendapat yang terakhir. Tidak ada hubungan antara navitem dan commentdescs dan dengan demikian kemungkinannya adalah bahwa ketika satu berubah, yang lain tidak akan. Apakah Anda benar-benar ingin harus menelusuri html untuk kelas yang tepat, menghapus kelas, menambahkan yang baru (whiteonred) sebelum pergi ke CSS pada saat itu? Bukan saya.

Demikian juga Javascript. Mungkin Anda menginginkan hal yang sama klik pada desain awal tetapi kemungkinannya adalah bahwa jika satu berubah, yang lain tidak. Cukup mudah untuk dikatakan

$(".navitems, .commentdesc")

Jika Anda tetap pada kebijakan ini, saya kira Anda akan menemukan bahwa pertanyaan Anda hilang dengan cepat, tetapi di mana tidak maka apa yang Anda lakukan baik-baik saja.