ฉันสามารถใช้คลาส CSS ที่ไม่มีอยู่ได้หรือไม่?

ฉันมีตารางที่ฉันแสดง / ซ่อนคอลัมน์แบบเต็มโดย jQuery ผ่านคลาส CSS ที่ไม่มีอยู่:

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

ด้วย DOM นี้ฉันสามารถทำได้ในหนึ่งบรรทัดผ่าน jQuery: $('.target').css('display','none');

สิ่งนี้ทำงานได้อย่างสมบูรณ์ แต่สามารถใช้คลาส CSS ที่ไม่ได้กำหนดได้หรือไม่ ฉันควรสร้างคลาสที่ว่างสำหรับมันหรือไม่?

<style>.target{}</style>

มีผลข้างเคียงหรือมีวิธีที่ดีกว่าในการทำเช่นนี้?

"CSS class" เป็นชื่อเรียกผิด classเป็นคุณสมบัติ (หรือคุณสมบัติในแง่ของการเขียนสคริปต์) ที่คุณกำหนดให้กับองค์ประกอบ HTML ในคำอื่น ๆ คุณประกาศเรียนใน HTML, CSS ไม่ได้ดังนั้นในกรณีของคุณ "เป้าหมาย" ชั้นไม่ในความเป็นจริงมีอยู่ในองค์ประกอบเฉพาะเหล่านั้นและมาร์กอัปของคุณถูกต้องสมบูรณ์ตามที่มันเป็น

นี่ไม่ได้หมายความว่าคุณจะต้องมีคลาสที่ประกาศใน HTML ก่อนที่คุณจะสามารถใช้ใน CSS ได้เช่นกัน ดูความคิดเห็นของ ruakh ไม่ว่าตัวเลือกจะใช้ได้หรือไม่นั้นขึ้นอยู่กับไวยากรณ์ของตัวเลือกและ CSS มีชุดของกฎสำหรับจัดการข้อผิดพลาดในการแยกวิเคราะห์ซึ่งไม่มีส่วนเกี่ยวข้องกับมาร์กอัปเลย โดยพื้นฐานแล้วสิ่งนี้หมายความว่า HTML และ CSS มีความเป็นอิสระจากกันในด้านความถูกต้อง ¹

เมื่อคุณเข้าใจแล้วจะเห็นได้ชัดว่าไม่มีผลข้างเคียงของการไม่กำหนด.targetกฎในสไตล์ชีทของคุณ ²เมื่อคุณกำหนดคลาสให้กับองค์ประกอบของคุณคุณสามารถอ้างอิงองค์ประกอบเหล่านั้นโดยชั้นเรียนเหล่านั้นในสไตล์ชีทหรือสคริปต์หรือทั้งสองอย่าง ไม่มีการพึ่งพาซึ่งกันและกัน แต่พวกเขาทั้งคู่อ้างถึงมาร์กอัป (หรืออย่างแม่นยำยิ่งขึ้นคือการเป็นตัวแทน DOM) หลักการนี้ใช้แม้ว่าคุณจะใช้ JavaScript เพื่อใช้สไตล์เช่นเดียวกับที่คุณทำใน jQuery one-liner

เมื่อคุณเขียนกฎ CSS ด้วยตัวเลือกคลาสสิ่งที่คุณพูดคือ "ฉันต้องการใช้สไตล์กับองค์ประกอบที่เป็นของคลาสนี้" ในทำนองเดียวกันเมื่อคุณเขียนสคริปต์เพื่อดึงองค์ประกอบด้วยชื่อคลาสที่แน่นอนคุณกำลังพูดว่า "ฉันต้องการทำสิ่งต่าง ๆ ด้วยองค์ประกอบที่เป็นของคลาสนี้" ไม่ว่าจะมีองค์ประกอบที่เป็นของชั้นเรียนที่เป็นปัญหาหรือไม่ก็เป็นประเด็นที่แยกจากกันโดยสิ้นเชิง

¹ _{นี่คือเหตุผลว่าทำไมตัวเลือก CSS ID จับคู่องค์ประกอบทั้งหมดกับ ID ที่กำหนดโดยไม่คำนึงว่า ID นั้นจะปรากฏขึ้นเพียงครั้งเดียวหรือหลายครั้ง (ทำให้เอกสาร HTML ไม่สอดคล้องกัน)}

² _{สถานการณ์เดียวที่ฉันรู้ว่ากฎ CSS ที่ว่างเปล่าเช่นนี้เป็นสิ่งจำเป็นเมื่อเบราว์เซอร์บางตัวปฏิเสธที่จะใช้กฎอื่น ๆ อย่างเหมาะสมเนื่องจากข้อผิดพลาด การสร้างกฎว่างเปล่าจะทำให้กฎอื่น ๆ เหล่านั้นถูกนำไปใช้ด้วยเหตุผลบางประการ ดูคำตอบนี้สำหรับตัวอย่างของข้อบกพร่องดังกล่าว อย่างไรก็ตามนี่คือด้าน CSS และดังนั้นจึงไม่ควรเกี่ยวข้องกับมาร์กอัป}

ไม่มีเอฟเฟกต์ที่ผิดพลาดในการใช้คลาสที่ไม่มีสไตล์ แน่นอนว่านั่นเป็นส่วนหนึ่งของประโยชน์ของ CSS คือมันไม่ได้ถูกผนวกเข้ากับมาร์กอัปและสามารถจัดสไตล์หรือไม่ใช้สไตล์อิลิเมนต์ / คลาส / ฯลฯ ตามความจำเป็น.

อย่าคิดว่าเป็น "คลาส CSS" คิดว่าพวกเขาเป็น "คลาส" ซึ่ง CSS เกิดขึ้นเพื่อใช้ถ้ามันต้องการ

ตามข้อกำหนด HTML5 :

แอ็ตทริบิวต์คลาสต้องมีค่าที่เป็นชุดของโทเค็นที่คั่นด้วยช่องว่างแทนคลาสต่างๆที่อิลิเมนต์เป็นเจ้าของ ... ไม่มีข้อ จำกัด เพิ่มเติมเกี่ยวกับผู้เขียนโทเค็นที่สามารถใช้ในแอตทริบิวต์ class ได้ แต่ผู้เขียนควรใช้ค่าที่อธิบายลักษณะของเนื้อหามากกว่าค่าที่อธิบายถึงการนำเสนอเนื้อหาที่ต้องการ

นอกจากนี้ในเวอร์ชัน 4 :

แอตทริบิวต์ class มีหลายบทบาทใน HTML:

• เป็นตัวเลือกสไตล์ชีท (เมื่อผู้เขียนต้องการกำหนดข้อมูลสไตล์ให้กับชุดขององค์ประกอบ)
• สำหรับวัตถุประสงค์ทั่วไปในการประมวลผลโดยตัวแทนผู้ใช้

กรณีการใช้งานของคุณอยู่ภายใต้สถานการณ์ที่สองซึ่งทำให้เป็นตัวอย่างที่ถูกต้องของการใช้แอตทริบิวต์ class

คุณสามารถใช้คลาสที่ไม่มีสไตล์นี่เป็น HTML ที่ถูกต้องทั้งหมด

คลาสที่อ้างถึงในไฟล์ CSS ไม่ใช่คำจำกัดความของคลาส แต่จะใช้เป็นกฎตัวเลือกสำหรับวัตถุประสงค์ในการใส่สไตล์

เมื่อคุณใช้ classname ใน JavaScript จะไม่ดู CSS เพื่อค้นหาคลาสนั้น มันดูโดยตรงในรหัส HTML

สิ่งที่จำเป็นต้องมีคือชื่อคลาสนั้นอยู่ในรูปแบบ HTML มันไม่จำเป็นต้องอยู่ใน CSS

ในความเป็นจริงหลายคนคิดว่าจริง ๆ แล้วเป็นความคิดที่ดีที่จะใช้คลาส CSS และ Javascript แยกต่างหากเพราะจะช่วยให้นักออกแบบและตัวแปลงสัญญาณของคุณทำงานอย่างอิสระโดยไม่ต้องเข้าหากันโดยใช้คลาสของกันและกัน

(หมายเหตุย่อหน้าข้างต้นมีความเหมาะสมมากกว่าสำหรับโครงการขนาดใหญ่ดังนั้นอย่ารู้สึกว่าคุณต้องทำสุดโต่งถ้าคุณทำงานด้วยตัวเองฉันพูดถึงเรื่องนี้เพื่อให้ประเด็นที่ทั้งสองสามารถแยกออกจากกันโดยสิ้นเชิง )

คุณสามารถใช้คลาสCSSโดยไม่ต้องใช้ แต่ฉันแนะนำว่าถ้าคุณเพิ่มคลาส CSS สำหรับโค้ด JavaScript / jQuery ให้ใส่คำเสริมหน้าjs-YourClassNameเพื่อให้นักพัฒนาส่วนหน้าไม่เคยใช้คลาสเหล่านี้เพื่อจัดองค์ประกอบของสไตล์ พวกเขาควรเข้าใจว่าคลาสเหล่านี้สามารถลบได้ตลอดเวลา

ทันทีที่คุณเพิ่มคลาสใน HTML คลาสจะถูกกำหนดดังนั้นโซลูชันของคุณจึงสมบูรณ์

ไม่จำเป็นต้องกำหนดคลาสCSSในสไตล์ชีทของคุณ มันควรจะทำงานได้ดี อย่างไรก็ตามการเพิ่มมันจะไม่เป็นอันตราย

สิ่งหนึ่งที่ไม่มีใครพูดถึงในที่นี้คือ JavaScript (ช่วยเหลือโดย jQuery ในกรณีนี้) ไม่สามารถปรับเปลี่ยนสไตล์ชีทของเอกสารได้โดยตรง css()วิธีการของ jQuery เพียงแค่เปลี่ยนชุดstyleคุณสมบัติขององค์ประกอบที่ตรงกัน CSS และ JavaScript ไม่เกี่ยวข้องอย่างสมบูรณ์ในด้านนี้

$('.target').css('display','none');ไม่เปลี่ยนการ.target { }ประกาศ CSS ของคุณเลย สิ่งที่เกิดขึ้นที่นี่แทนคือตอนนี้องค์ประกอบใด ๆ ที่มีclass"เป้าหมาย" มีลักษณะดังนี้:

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

มีผลข้างเคียงที่เกิดจากการไม่กำหนดกฎสไตล์ CSS ไว้ล่วงหน้าหรือไม่? ไม่มี แต่อย่างใด.

มีวิธีที่ดีกว่าในการทำเช่นนี้? ประสิทธิภาพฉลาดใช่มี!

จะปรับปรุงประสิทธิภาพได้อย่างไร

แทนที่จะแก้ไขโดยตรงstyleของแต่ละองค์ประกอบแทนคุณสามารถกำหนดคลาสใหม่ล่วงหน้าและเพิ่มไปยังองค์ประกอบที่ตรงกันของคุณโดยใช้addClass() (วิธี jQuery อื่น)

จากJSPerf ที่มีอยู่แล้วซึ่งเปรียบเทียบcss()กับaddClass()เราจะเห็นว่าaddClass()จริงเร็วกว่ามาก:

เราจะใช้สิ่งนี้ด้วยตนเองได้อย่างไร

ประการแรกเราสามารถเพิ่มในการประกาศ CSS ใหม่ของเรา:

.hidden {
    display: none;
}

HTML ของคุณจะยังคงเหมือนเดิมคลาสที่กำหนดไว้ล่วงหน้านี้มีไว้เพื่อใช้ในภายหลัง

ตอนนี้เราสามารถแก้ไข JavaScript เพื่อใช้addClass()แทน:

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

เมื่อเรียกใช้รหัสนี้แทนที่จะแก้ไขstyleคุณสมบัติขององค์ประกอบ "เป้าหมาย" แต่ละรายการที่ตรงกันของคุณโดยตรงคลาสใหม่นี้จะถูกเพิ่ม:

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

ด้วยคลาส "ซ่อน" ใหม่องค์ประกอบนี้จะสืบทอดสไตล์ที่ประกาศใน CSS ของคุณและองค์ประกอบของคุณจะถูกตั้งค่าเป็นไม่แสดงอีกต่อไป

ดังที่ได้กล่าวไว้โดยคนอื่น ๆ มากมายใช่ว่าการใช้คลาสที่ไม่มี CSS ที่กำหนดนั้นใช้ได้อย่างสมบูรณ์และแทนที่จะคิดว่ามันเป็น 'คลาส CSS' คุณควรจดจำความหมายของคลาสและ ID เป็นกลุ่มและองค์ประกอบตามลำดับ

ฉันต้องการที่จะชิปในขณะที่ฉันรู้สึกว่าเป็นจุดสำคัญไม่ได้ยกตัวอย่าง หากคุณจำเป็นต้องทำการปรับเปลี่ยนภาพให้มีความยาวผันแปรขององค์ประกอบ (ในกรณีนี้คุณกำลังใช้แถวของตาราง) ดังนั้นคุณควรตระหนักว่าค่าใช้จ่ายในการทำเช่นนี้ผ่าน Javascript อาจมีราคาแพงมาก (เช่นถ้าคุณมี หลายพันแถว)

ในสถานการณ์นี้สมมติว่าเรารู้ว่าคอลัมน์ 2 มีศักยภาพที่จะซ่อนอยู่เสมอ (เป็นฟังก์ชันที่ใส่ใจในตารางของคุณ) จากนั้นจึงเหมาะสมที่จะออกแบบสไตล์ CSS เพื่อจัดการกับกรณีการใช้งานนี้

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

จากนั้นแทนที่จะใช้ JS เพื่อสำรวจองค์ประกอบ DOM ในการค้นหา N เราเพียงแค่ต้องสลับชั้นในหนึ่งเดียว (ตารางของเรา)

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

โดยการกำหนดตาราง ID นี้จะเร็วกว่าและคุณสามารถอ้างอิงคอลัมน์ได้โดยใช้:nth-childตัวเลือกซึ่งจะลดมาร์คอัปของคุณต่อไป แต่ฉันไม่สามารถแสดงความคิดเห็นเกี่ยวกับประสิทธิภาพ อีกเหตุผลในการทำเช่นนี้คือฉันเกลียดการใส่สไตล์อินไลน์และจะพยายามกำจัดมันให้ได้มากที่สุด!

จะไม่มีผลหากคุณใช้คลาสกับองค์ประกอบ HTML และคลาสนั้นไม่ได้กำหนดไว้ใน CSS มันเป็นวิธีปฏิบัติทั่วไปและเช่นเดียวกับ Aamir afridi กล่าวว่าถ้าคุณใช้คลาสเพื่อจุดประสงค์เดียวของ js มันเป็นแนวปฏิบัติที่ดีที่จะนำหน้าพวกเขาด้วย js-

มันไม่เพียง แต่ถูกต้องสำหรับ calsses แต่ยังสำหรับแอตทริบิวต์ id ขององค์ประกอบ html

ไม่มีปัญหาในการใช้คลาสเพื่อค้นหาอิลิเมนต์ ฉันเคยให้sys-คำนำหน้าชื่อชั้นนั้น(ตัวอย่างเช่นฉันจะตั้งชื่อชั้นเรียนของคุณsys-target) เพื่อแยกความแตกต่างจากคลาสที่ใช้สำหรับการใส่สไตล์ นี่เป็นข้อตกลงที่นักพัฒนาไมโครซอฟท์ใช้ในอดีต ฉันยังสังเกตเห็นการเพิ่มขึ้นของการใช้js-คำนำหน้าเพื่อจุดประสงค์นี้

หากคุณไม่สะดวกกับการใช้ชั้นเรียนสำหรับวัตถุประสงค์อื่นนอกเหนือจากการจัดแต่งทรงผมแนะนำให้ใช้Role.js jQuery ปลั๊กอินที่ช่วยให้คุณเพื่อให้บรรลุวัตถุประสงค์เดียวกันโดยใช้roleแอตทริบิวต์ดังนั้นคุณอาจเขียนมาร์กอัปของคุณเป็นและแบบสอบถามสำหรับมันโดยใช้<td role="target"> $("@target")หน้าโครงการมีคำอธิบายและตัวอย่างที่ดี ฉันใช้ปลั๊กอินนี้สำหรับโครงการขนาดใหญ่เพราะฉันชอบที่จะเก็บคลาสไว้เพื่อวัตถุประสงค์ในการออกแบบเท่านั้น

อ้างถึงเอ็นจิ้นตรวจสอบjQuery แม้ในนั้นเรายังใช้คลาสที่ไม่มีอยู่เพื่อเพิ่มกฎการตรวจสอบในแอตทริบิวต์HTML ดังนั้นจึงไม่มีอะไรผิดปกติในการใช้คลาสที่ไม่ได้ประกาศจริงในสไตล์ชีท