Bisakah saya menggunakan kelas CSS yang tidak ada?


260

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?


9
Saya tidak melihat ada yang salah tentang hal itu, meskipun saya akan membuatnya menjadi bagian dari stylesheet jika memungkinkan daripada menggunakan .css, gaya yang ditetapkan dengan .css sangat sulit untuk ditimpa tanpa menyebabkan masalah lain sehingga saya cenderung menghindarinya.
Kevin B

8
sebagai catatan tambahan yang mungkin ingin Anda gunakan .toggle(), ini sedikit lebih pendek dalam kode Anda.
Math chiller

4
Di Visual Studio + ReSharper, jika Anda menggunakan kelas yang tidak didefinisikan, itu akan memberi Anda peringatan, yang sangat membantu jika saya hanya memiliki kesalahan ketik, tetapi mengganggu dalam situasi seperti ini. Dalam hal ini, Anda punya pilihan untuk menambahkan gaya kosong, atau menonaktifkan peringatan (atau hanya mengabaikannya) - secara pribadi, saya hanya menambahkan gaya kosong. Saya tidak tahu apakah ada IDE lain yang berperilaku sama.
Joe Enos

8
Ini tidak hanya mungkin tetapi secara eksplisit direkomendasikan oleh beberapa orang. Karena Anda targetdigunakan untuk tujuan javascript, banyak orang menggunakan awalan js-untuk kelas-kelas tersebut, yaitu js-target. BTW: Target adalah nama yang buruk;) Untuk bacaan lebih lanjut, lihat: philipwalton.com/articles/decoupling-html-css-and-javascript
k0pernikus

1
stackoverflow.com/questions/2832117/… lebih atau kurang merupakan duplikat dari ini, tanpa kesalahpahaman.
naught101

Jawaban:


491

"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. 1

Setelah Anda memahami hal itu, menjadi jelas bahwa tidak ada efek samping dari tidak mendefinisikan .targetaturan dalam stylesheet Anda. 2 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.


1 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).

2 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.


5
Saya butuh waktu lama untuk menyadari bahwa kelas tidak ada hubungannya dengan CSS. Tetapi sekitar waktu yang sama semua orang menyadari dan Microformats datang.
Konrad Rudolph

13
+1, meskipun jawaban ini bisa dianggap menyiratkan, salah, bahwa CSS hanya bisa merujuk ke kelas yang benar-benar terjadi dalam HTML. Sebenarnya cukup umum untuk sebuah situs menggunakan CSS di seluruh halaman, meskipun beberapa kelas yang dirujuknya tidak muncul di setiap halaman. (Misalnya, situs mungkin memiliki penataan gaya untuk tautan eksternal, a.extlinkatau yang lainnya, bahkan jika beberapa halaman tidak mengandung tautan eksternal.)
ruakh

1
@ruakh: Poin luar biasa, terima kasih. Saya tidak dapat menemukan cara untuk memasukkannya ke dalam jawaban saya yang asli dan singkat tanpa menyimpang dari topik, tetapi saya melihat bagaimana penggunaan istilah dependensi mungkin telah memberikan kesan itu sehingga saya mengubahnya sedikit. Yang mengatakan saya telah menambahkan catatan kaki yang merujuk komentar Anda serta menguraikan lebih lanjut.
BoltClock

66

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.


11
+1 untuk "Jangan menganggapnya sebagai 'kelas CSS.' Pikirkan mereka sebagai 'kelas' yang kebetulan juga digunakan CSS jika perlu "
laike9m

48

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.


13
+1 untuk mengutip spesifikasi yang relevan. Saya sudah lupa melakukan itu.
BoltClock

40

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.


25

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 )


13

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.


10

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


7
Menggunakan kelas dalam HTML tidak mendefinisikannya. Saya lebih suka mengatakan, definisi tidak relevan: tidak ada penalti untuk menggunakan kelas yang tidak ditentukan.
JAL

10

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


Saya tidak mengatakan untuk menambahkan gaya-gaya itu, terserah dia jika dia mau, jika dia berencana untuk mendukung gaya-gaya itu lalu mengapa tidak? Bagaimanapun terima kasih untuk suara tidak perlu :)
Rameez

Anda mengatakan "itu ... tidak akan membahayakan", tetapi akhirnya, pada akhirnya.
Pavlo

ya itu tidak akan membahayakan. jika dia memiliki indera untuk menambahkan gaya-gaya kosong itu maka jelas akan memiliki indera untuk mengelolanya. Jelas saya tidak akan menambahkan .. baik saya menyarankan untuk menambahkan.
Rameez

8

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:

css () vs addClass ()

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.


Saran yang bagus. Jarang ada alasan bagus untuk menggunakan .css()alih-alih mengaktifkan kelas IMO.
BoltClock

6

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!


1
+1 untuk "grup dan elemen individual" dan untuk penggunaan efisien struktur dokumen
deltab

5

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.


4

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.


3

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.