Bisakah saya menggunakan kelas CSS yang tidak ada?

Saya memiliki tabel tempat saya menampilkan / menyembunyikan kolom penuh oleh jQuery melalui kelas CSS yang tidak ada:

<table>
   <thead>
      <tr>
         <th></th>
         <th class="target"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
   </tbody>
</table>

Dengan DOM ini saya bisa melakukan ini dalam satu baris melalui jQuery: $('.target').css('display','none');

Ini berfungsi dengan baik, tetapi apakah valid untuk menggunakan kelas CSS yang tidak didefinisikan? Haruskah saya membuat kelas kosong untuk itu?

<style>.target{}</style>

Apakah ada efek samping atau ada cara yang lebih baik untuk melakukan ini?

"Kelas CSS" adalah istilah yang salah; classadalah atribut (atau properti, dalam hal skrip) yang Anda tetapkan untuk elemen HTML. Dengan kata lain, Anda mendeklarasikan kelas dalam HTML, bukan CSS, jadi dalam kasus Anda, kelas "target" benar -benar ada pada elemen-elemen spesifik itu, dan markup Anda benar-benar valid.

Ini tidak berarti bahwa Anda harus memiliki kelas yang dideklarasikan dalam HTML sebelum Anda dapat menggunakannya dalam CSS. Lihat komentar ruakh. Apakah pemilih sah atau tidak sepenuhnya tergantung pada sintaks pemilih , dan CSS memiliki seperangkat aturan sendiri untuk menangani kesalahan penguraian , tidak ada yang menyangkut markup sama sekali. Pada dasarnya, ini berarti HTML dan CSS sepenuhnya independen satu sama lain dalam aspek validitas. ¹

Setelah Anda memahami hal itu, menjadi jelas bahwa tidak ada efek samping dari tidak mendefinisikan .targetaturan dalam stylesheet Anda. ² Saat Anda menetapkan kelas ke elemen Anda, Anda bisa mereferensikan elemen-elemen itu dengan kelas-kelas itu baik dalam lembar gaya, atau skrip, atau keduanya. Keduanya tidak memiliki ketergantungan pada yang lain. Sebaliknya, keduanya merujuk pada markup (atau, lebih tepatnya, representasi DOM-nya). Prinsip ini berlaku bahkan jika Anda menggunakan JavaScript untuk menerapkan gaya, seperti yang Anda lakukan di jQuery one-liner Anda.

Saat Anda menulis aturan CSS dengan pemilih kelas, semua yang Anda katakan adalah "Saya ingin menerapkan gaya ke elemen yang dimiliki kelas ini." Demikian pula, ketika Anda menulis skrip untuk mengambil elemen dengan nama kelas tertentu, Anda mengatakan "Saya ingin melakukan hal-hal dengan elemen yang termasuk dalam kelas ini." Apakah atau tidak ada yang elemen yang milik kelas yang dimaksud adalah masalah yang terpisah sama sekali.

¹ _{Ini juga mengapa pemilih ID CSS cocok dengan semua elemen dengan ID yang diberikan terlepas dari apakah ID muncul tepat sekali, atau beberapa kali (menghasilkan dokumen HTML yang tidak sesuai).}

² _{Satu-satunya situasi yang saya tahu di mana aturan CSS kosong seperti itu diperlukan adalah ketika beberapa browser menolak untuk menerapkan aturan tertentu lainnya dengan benar sebagai hasil dari bug; membuat aturan kosong akan menyebabkan aturan lain diterapkan karena beberapa alasan. Lihat jawaban ini untuk contoh bug semacam itu. Namun ini ada di sisi CSS dan karenanya tidak ada hubungannya dengan markup.}

Tidak ada efek buruk untuk menggunakan kelas yang tidak memiliki gaya. Memang, itu bagian dari kegunaan CSS adalah bahwa ia tidak digabungkan dari markup dan dapat gaya atau tidak elemen gaya / kelas / dll. sesuai kebutuhan.

Jangan menganggapnya sebagai "kelas CSS." Anggap mereka sebagai "kelas" yang juga digunakan CSS jika perlu.

Menurut spesifikasi HTML5 :

Atribut class harus memiliki nilai yang merupakan set token yang dipisahkan ruang yang mewakili berbagai kelas yang dimiliki elemen tersebut. ... Tidak ada batasan tambahan pada token yang dapat digunakan penulis dalam atribut kelas, tetapi penulis didorong untuk menggunakan nilai yang menggambarkan sifat konten, alih-alih nilai yang menggambarkan presentasi konten yang diinginkan.

Juga, dalam versi 4 :

Atribut kelas memiliki beberapa peran dalam HTML:

• Sebagai pemilih lembar gaya (ketika seorang penulis ingin memberikan informasi gaya ke sekumpulan elemen).
• Untuk pemrosesan tujuan umum oleh agen pengguna.

Kasus penggunaan Anda termasuk dalam skenario kedua, yang menjadikannya contoh yang sah untuk menggunakan atribut kelas.

Anda dapat menggunakan kelas yang tidak memiliki gaya, ini sepenuhnya HTML yang valid.

Kelas yang direferensikan dalam file CSS bukan definisi kelas, itu digunakan sebagai aturan pemilih untuk keperluan styling.

Ketika Anda menggunakan nama kelas dalam JavaScript, itu tidak melihat CSS untuk menemukan kelas itu. Itu terlihat langsung dalam kode HTML.

Yang diperlukan hanyalah bahwa nama kelas ada di HTML. Tidak perlu di CSS.

Bahkan, banyak orang berpikir itu sebenarnya ide yang baik untuk menjaga penggunaan kelas terpisah dengan CSS dan Javascript , karena memungkinkan desainer dan coders Anda untuk bekerja secara independen tanpa menghalangi satu sama lain dengan menggunakan kelas masing-masing.

(perhatikan, paragraf di atas jelas lebih berlaku untuk proyek yang lebih besar, jadi jangan merasa bahwa Anda harus pergi ke ekstrem ini jika Anda bekerja sendiri; Saya sebutkan itu untuk membuat titik bahwa keduanya dapat sepenuhnya terpisah )

Anda dapat menggunakan kelas CSS tanpa menggunakannya, tapi saya sarankan jika Anda menambahkan kelas CSS hanya untuk kode JavaScript / jQuery, awali dengan itu js-YourClassNamesehingga pengembang front-end tidak pernah menggunakan kelas ini untuk mendesain elemen. Mereka harus memahami bahwa kelas-kelas ini dapat dihapus kapan saja.

Saat Anda menambahkan Kelas di HTML, Kelas akan ditentukan, sehingga solusi Anda benar-benar baik

Tidak perlu mendefinisikan kelas CSS di stylesheet Anda. Seharusnya itu berjalan baik baik saja. Namun, menambahkannya tidak akan membahayakan.

Satu hal yang tidak sepenuhnya disebutkan oleh siapa pun di sini adalah bahwa JavaScript (dibantu oleh jQuery dalam kasus ini) tidak dapat secara langsung mengubah lembar gaya kaskade dokumen. css()Metode jQuery hanya mengubah set styleproperti elemen yang cocok . CSS dan JavaScript sama sekali tidak terkait dalam aspek ini.

$('.target').css('display','none');sama sekali tidak mengubah .target { }deklarasi CSS Anda . Yang terjadi di sini adalah bahwa setiap elemen dengan class"target" sekarang terlihat seperti ini:

<element class="target" style="display:none;"></element>

Apakah ada efek samping yang disebabkan oleh tidak mendefinisikan aturan gaya CSS? Tidak ada sama sekali.

Apakah ada cara yang lebih baik untuk melakukan ini? Dari segi kinerja, ya ada!

Bagaimana cara meningkatkan kinerja?

Daripada secara langsung memodifikasi stylesetiap elemen, Anda bisa menentukan kelas baru dan menambahkannya ke elemen yang cocok menggunakanaddClass() (metode jQuery lain).

Berdasarkan JSPerf yang sudah ada ini yang dibandingkan css()dengan addClass(), kita dapat melihat bahwa addClass()sebenarnya jauh lebih cepat:

Bagaimana kita bisa menerapkannya sendiri?

Pertama, kita dapat menambahkan dalam deklarasi CSS baru kami:

.hidden {
    display: none;
}

HTML Anda akan tetap sama, kelas yang telah ditentukan ini tersedia untuk digunakan nanti.

Kami sekarang dapat memodifikasi JavaScript untuk digunakan addClass()sebagai gantinya:

$('.target').addClass('hidden');

Saat menjalankan kode ini, alih-alih langsung memodifikasi styleproperti dari setiap elemen "target" yang cocok, kelas baru ini sekarang akan ditambahkan:

<element class="target hidden"></element>

Dengan kelas "tersembunyi" yang baru, elemen ini akan mewarisi gaya yang dideklarasikan di CSS Anda dan elemen Anda tidak akan lagi ditampilkan.

Seperti yang disebutkan oleh banyak orang lain, ya, menggunakan kelas tanpa CSS yang ditugaskan benar-benar valid dan alih-alih menganggapnya sebagai 'kelas CSS', Anda cukup mengenali semantik kelas dan ID sebagai kelompok dan elemen individual.

Saya ingin ikut campur karena saya merasa poin penting belum dikemukakan mengingat contohnya. Jika Anda perlu melakukan manipulasi visual untuk panjang elemen yang bervariasi (dalam hal ini Anda menggunakan baris tabel) maka selalu masuk akal untuk mengetahui bahwa biaya melakukannya melalui Javascript berpotensi menjadi sangat mahal (misalnya jika Anda memiliki ribuan baris).

Dalam situasi ini, katakanlah kita tahu bahwa kolom 2 selalu memiliki potensi untuk disembunyikan (ini adalah fungsi sadar dari tabel Anda) maka masuk akal untuk merancang gaya CSS untuk menangani kasus penggunaan ini.

table.target-hidden .target { display: none; }

Kemudian daripada menggunakan JS untuk menelusuri elemen DOM temuan N kita hanya perlu beralih kelas pada satu (tabel kami).

$("table").addClass("target-hidden")

Dengan menetapkan tabel ID, ini akan lebih cepat dan Anda bahkan bisa merujuk ke kolom dengan menggunakan :nth-childpemilih yang akan mengurangi markup Anda lebih jauh, tetapi saya tidak bisa mengomentari efisiensi. Alasan lain untuk melakukan ini adalah bahwa saya benci styling inline, dan akan berusaha keras untuk memberantasnya!

Ini tidak akan berpengaruh jika Anda menerapkan kelas pada elemen HTML, dan kelas itu tidak didefinisikan dalam CSS. Ini adalah praktik umum dan seperti kata Aamir afridi jika Anda menggunakan kelas hanya untuk tujuan js, itu adalah praktik yang baik untuk mengawali mereka dengan js-.

Ini tidak hanya berlaku untuk calsses, tetapi juga untuk atribut id elemen html.

Tidak ada masalah sama sekali dalam menggunakan kelas untuk hanya query elemen. Saya biasa memberi sys-awalan nama kelas tersebut (misalnya, saya akan memberi nama kelas Anda sys-target) untuk membedakannya dari kelas yang digunakan untuk penataan gaya. Ini adalah konvensi yang digunakan oleh beberapa pengembang microsoft di masa lalu. Saya juga memperhatikan peningkatan praktik menggunakanjs- awalan untuk tujuan ini.

Jika Anda tidak nyaman menggunakan kelas untuk tujuan selain penataan, saya sarankan menggunakan plugin jolei Role.js yang memungkinkan Anda mencapai tujuan yang sama menggunakan roleatribut, jadi, Anda dapat menulis markup <td role="target">dan meminta untuk menggunakannya $("@target"). Halaman proyek memiliki deskripsi dan contoh yang baik. Saya menggunakan plugin ini untuk proyek-proyek besar karena saya sangat suka menjaga kelas untuk keperluan styling saja.

Lihat mesin validasi jQuery . Bahkan di sana kami juga menggunakan kelas yang tidak ada untuk menambahkan aturan validasi pada atribut HTML . Jadi tidak ada yang salah dalam menggunakan kelas yang sebenarnya tidak dideklarasikan dalam stylesheet.