http://margin0auto.wordpress.com/2011/09/16/id-%E0%B8%9B%E0%B8%B0%E0%B8%97%E0%B8%B0-class-%E0%B8%88%E0%B8%B0%E0%B9%80%E0%B8%A5%E0%B8%B7%E0%B8%AD%E0%B8%81%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3%E0%B8%94%E0%B8%B5/
margin0auto
รวบรวมสาระน่ารู้เกี่ยวกับการเขียน HTML และ CSS ให้ถูกต้องตามหลัก Web Standards
ก.ย.16
ID ปะทะ Class จะเลือกใช้อะไรดี?
ปัญหาอย่างหนึ่งสำหรับผู้หัดเขียน CSS ใหม่ๆก็คือ ไม่รู้ว่าเมื่อไหร่ควรจะเลือกใช้ ID และเมื่อไหร่ถึงสมควรจะเลือกใช้ Class และไม่รู้ด้วยว่าการเลือกใช้อย่างใดอย่างหนึ่งมีข้อดีข้อเสียอย่างไรบ้าง ด้วยเหตุนี้จึงทำให้เหล่ามือใหม่หัดเขียน CSS (ซึ่งผมก็เคยเป็นหนึ่งในนั้น) ใช้ ID และ Class มั่วกันไปหมด บางคนชอบใช้ Class ก็ใช้แหลกโดยไม่คำนึงถึงความเหมาะสม หรือบางท่านชอบใช้ ID ก็ใช้กับทุกอย่างเหมือนกับไม่มี Class บนโลกนี้ ในบทความนี้ผมจึงอยากช่วยแนะนำวิธีการเลือกใช้ ID และ Class ที่ถูกต้องให้ได้ทราบกันครับ โดยก่อนอื่นเราต้องมาดูกันว่าเจ้า ID และ Class จะมีไว้เพื่ออะไร และทั้งสองตัวมีความแตกต่างกันอย่างไรบ้างกันครับ
สำหรับการเขียน CSS จุดประสงค์หลักของการสร้าง ID หรือ Class ก็คือเพื่อช่วยให้เราสามารถเขียนคำสั่งพิเศษให้สำหรับบางแท็กที่เราต้องการได้ เพื่อให้การแสดงผลมีความแตกต่างจากแท็กเดียวกันที่ไม่มี ID หรือ Class ได้ เช่น
<style type=”text/css” rel=”stylesheet”>
h3 {
font-size: 36px;
color: grey;
}
</style>
.
.
.
<h3>ผมรักแม่ที่สุดในโลก</h3>
<h3>ลูกคือแก้วตาดวงใจของแม่</h3>
h3 {
font-size: 36px;
color: grey;
}
</style>
.
.
.
<h3>ผมรักแม่ที่สุดในโลก</h3>
<h3>ลูกคือแก้วตาดวงใจของแม่</h3>
ไม่ว่าเราจะเขียนคำสั่ง CSS ให้กับแท็ก <h3> ยังไง ข้อความทั้งสองบรรทัดก็จะแสดงผลเหมือนกันทุกอย่าง คือมีตัวอักษรสีเทาขนาด 36px แต่สมมุติว่าเราต้องการให้ข้อความบรรทัดแรกมีการแสดงผลที่แตกต่างจากข้อความบรรทัดที่สอง หนทางเดียวที่จะทำได้ก็คือใส่ ID หรือ Class ให้กับแท็ก <h3> บรรทัดแรกดังนี้
<style type=”text/css” rel=”stylesheet”>
h3 {
font-size: 36px;
color: grey;
}
#section_header {
font-size: 48px;
color: red;
}
</style>
.
.
.
<h3 id=”section_header“>ผมรักแม่ที่สุดในโลก</h3>
<h3>ลูกคือแก้วตาดวงใจของแม่</h3>
h3 {
font-size: 36px;
color: grey;
}
#section_header {
font-size: 48px;
color: red;
}
</style>
.
.
.
<h3 id=”section_header“>ผมรักแม่ที่สุดในโลก</h3>
<h3>ลูกคือแก้วตาดวงใจของแม่</h3>
แค่นี้ข้อความ “ผมรักแม่ที่สุดในโลก” จะแสดงเป็นตัวอักษรสีแดงขนาด 48px แทน เป็นยังไงครับ เริ่มเห็นประโยชน์ของการใส่ ID หรือ Class แล้วใช่มั้ยครับ
ความแตกต่างระหว่าง ID และ Class
1. วิธีเขียนที่แตกต่างกัน
การเขียน ID ใน CSS จะเริ่มต้นด้วยสัญญลักษณ์ # แล้วตามด้วยชื่อ ID ที่เราต้องการตั้ง เช่น
#main_header –> เพื่อสั่งแท็ก <h3 id=”main_header”>……..</h3>
#main_menu –> เพื่อสั่งแท็ก <ul id=”main_menu”>……..</ul>
#sub_menu –> เพื่อสั่งแท็ก <ul id=”sub_menu”>……..</ul>
#footer –> เพื่อสั่งแท็ก <div id=”footer”>……..</div>
การเขียน ID ใน CSS จะเริ่มต้นด้วยสัญญลักษณ์ # แล้วตามด้วยชื่อ ID ที่เราต้องการตั้ง เช่น
#main_header –> เพื่อสั่งแท็ก <h3 id=”main_header”>……..</h3>
#main_menu –> เพื่อสั่งแท็ก <ul id=”main_menu”>……..</ul>
#sub_menu –> เพื่อสั่งแท็ก <ul id=”sub_menu”>……..</ul>
#footer –> เพื่อสั่งแท็ก <div id=”footer”>……..</div>
การเขียน Class ใน CSS จะเริ่มต้นด้วยสัญญลักษณ์ . แล้วตามด้วยชื่อ Class ที่เราต้องการตั้ง เช่น
.sub_header –> เพื่อสั่งแท็ก <h4 class=”sub_header”>……..</h4>
.main_list –> เพื่อสั่งแท็ก <ul class=”main_list”>……..</ul>
.content –> เพื่อสั่งแท็ก <div class=”content”>……..</div>
.details –> เพื่อสั่งแท็ก <p class=”details”>……..</p>
.sub_header –> เพื่อสั่งแท็ก <h4 class=”sub_header”>……..</h4>
.main_list –> เพื่อสั่งแท็ก <ul class=”main_list”>……..</ul>
.content –> เพื่อสั่งแท็ก <div class=”content”>……..</div>
.details –> เพื่อสั่งแท็ก <p class=”details”>……..</p>
โดยตัวแรกของชื่อจะต้องเป็นตัวอักษรระหว่าง A ถึง Z เท่านั้น ห้ามเริ่มต้นชื่อด้วยสัญญลักษณ์หรือตัวเลขเพราะบราวเซอร์จะไม่ตีความว่าเป็น ID หรือ Class ซึ่งจะมีผลทำให้คำสั่ง CSS ที่เราเขียนไม่มีผลใดๆทั้งสิ้น และที่ต้องจำไว้อีกอย่างคือ CSS จะไม่สนใจว่าจะเป็นตัวเล็กหรือตัวใหญ่หรือ Case Insensitive เพราะฉะนั้นการตั้งชื่อว่า SuperAgent กับ superagent จะมีค่าเท่ากันครับ
2. จำนวนครั้งที่ใช้ได้ต่อหน้าเว็บ
ID ที่คุณตั้งขึ้นมาจะอนุญาตให้ใช้ได้ครั้งเดียวในหน้า และหนึ่งแท็กจะใส่ ID ได้ตัวเดียว ส่วน Class ที่คุณตั้งขึ้นมาจะอนุญาตให้ใช้ได้หลายครั้งในหน้าเดียวกัน และหนึ่งแท็กจะใส่ Class ได้หลายตัว เช่น
<div id=”header”>
<h1>บริษัท มาตราฐานเว็บขั้นสูง จำกัด</h1>
<ul id=”main_menu”>
<li class=”menu”><a class=”menu_link link” href=”home.html” title=”Home”>Home</a></li>
<li class=”menu”><a class=”menu_link link” href=”products.html” title=”Products”>Products</a></li>
<li class=”menu”><a class=”menu_link link” href=”support.html” title=”Support”>Support</a></li>
<li class=”menu”><a class=”menu_link link” href=”contactus.html” title=”Contact Us”>Contact Us</a></li>
<li class=”menu”><a class=”menu_link link” href=”sitemap.html” title=”Site Map”>Site Map</a></li>
</ul>
</div>
ID ที่คุณตั้งขึ้นมาจะอนุญาตให้ใช้ได้ครั้งเดียวในหน้า และหนึ่งแท็กจะใส่ ID ได้ตัวเดียว ส่วน Class ที่คุณตั้งขึ้นมาจะอนุญาตให้ใช้ได้หลายครั้งในหน้าเดียวกัน และหนึ่งแท็กจะใส่ Class ได้หลายตัว เช่น
<div id=”header”>
<h1>บริษัท มาตราฐานเว็บขั้นสูง จำกัด</h1>
<ul id=”main_menu”>
<li class=”menu”><a class=”menu_link link” href=”home.html” title=”Home”>Home</a></li>
<li class=”menu”><a class=”menu_link link” href=”products.html” title=”Products”>Products</a></li>
<li class=”menu”><a class=”menu_link link” href=”support.html” title=”Support”>Support</a></li>
<li class=”menu”><a class=”menu_link link” href=”contactus.html” title=”Contact Us”>Contact Us</a></li>
<li class=”menu”><a class=”menu_link link” href=”sitemap.html” title=”Site Map”>Site Map</a></li>
</ul>
</div>
จากในตัวอย่างโค๊ตจะเห็นได้ว่าแท็ก <div> และ <ul> ต่างมี ID ของตัวเองคือ header และ main_menu ตามลำดับ และจะถูกเรียกใช้เพียงแค่ครั้งเดียวในหน้า แต่สำหรับ Class ชื่อ menu ในแท็ก <li> จะได้เรียกใช้ซ้ำได้ไม่มีปัญหาอะไร ส่วนในแท็ก <a> จะเห็นตัวอย่างการใส่ชื่อ Class ได้มากกว่าหนึ่งในแท็กเดียวกัน โดยในแท็ก <a> นี้จะมีชื่อ Class อยู่ 2 ชื่อด้วยกันคือ menu_link และ link นอกจากนี้เรายังสามารถใส่ทั้ง ID และ Class ให้กับแท็กๆเดียวกันได้ด้วย เช่น
<li id=”menu_selected” class=”menu”><a class=”menu_link link active” href=”home.html” title=”Home”>Home</a></li>
3. ระดับ Specificity
ID มีความเฉพาะเจาะจงหรือ Specificity ที่สูงกว่า Class ในกรณีที่มีปัญหาคำสั่ง CSS ไปทับซ้อนกันในแท็กเดียวกัน ก็จะทำให้คำสั่งที่เขียนสั่งผ่าน ID และชนะคำสั่งที่เขียนผ่าน Class เช่น
.menu {
background: grey;
}
#menu_selected {
background: white;
}
ID มีความเฉพาะเจาะจงหรือ Specificity ที่สูงกว่า Class ในกรณีที่มีปัญหาคำสั่ง CSS ไปทับซ้อนกันในแท็กเดียวกัน ก็จะทำให้คำสั่งที่เขียนสั่งผ่าน ID และชนะคำสั่งที่เขียนผ่าน Class เช่น
.menu {
background: grey;
}
#menu_selected {
background: white;
}
<li id=”menu_selected” class=”menu”><a class=”menu_link link active” href=”home.html” title=”Home”>Home</a></li>
ในกรณีนี้มีปัญหาคำสั่งซ้ำซ้อนกันในแท็ก <li> แต่เนื่องจาก ID มีระดับ Specificity ที่สูงกว่า Class จึงทำให้เว็บบราวเซอร์เลือกที่จะแสดงสีพื้นหลังของแท็ก <li> เป็นสีขาวที่สั่งผ่าน #menu_selected แทนที่จะเป็นสีเทาที่สั่งผ่าน .menu สำหรับท่านใดที่งงๆว่า Specificity คืออะไร ให้ลองเข้าไปอ่านบทความเรื่องนี้ที่ผมเขียนไว้ก่อนหน้านี้ได้เลยครับ
เราควรเลือกใช้ ID หรือ Class ในกรณีใดบ้าง
เราควรเลือกใช้ ID เมื่อเราต้องการระบุถึงส่วนสำคัญของหน้าที่ในหน้าหนึ่งๆจะมีแค่หนึ่งเดียวเท่านั้น เช่น ส่วนหัวด้านบนของหน้า, ส่วนเมนูหลักของหน้า, ส่วนเนื้อหาของหน้า หรือส่วนท้ายสุดที่ประกอบในหน้า หรือเลือกใช้ ID ในส่วนที่เราต้องการใส่ JavaScript หรือ jQuery เพื่อเพิ่มลูกเล่นและความสวยงามให้กับหน้า
เราควรเลือกใช้ Class เมื่อเราต้องการใส่สไตล์การแสดงผลที่เป็นรายละเอียดปลีกย่อยที่เราอยากใช้ร่วมกันได้กับหลายๆแท็กในหน้าเดียวกัน เช่น สีตัวอักษรของพาดหัวหลักพาดหัวรอง, ลักษณะของลิ้งก์เพื่อไปอ่านต่อหน้าใน
ผมเชื่อว่าคงมีหลายๆท่านรวมทั้งตัวผมเองด้วยที่เคยเผลอใช้ ID กับหลายๆแท็กในหน้าเว็บเดียวกัน แต่กลับไม่รู้สึกอะไรเพราะบราวเซอร์ก็ยังแสดงผลบนหน้าจอได้ตามปกติ แต่หารู้ไม่ว่ามันเป็นการผิดหลักการเขียนแบบ Web Standards แบบเต็มๆ นอกจากนี้การใช้ ID หลายๆครั้งในหน้าเดียวกันอาจจะทำให้มีปัญหากับสคลิปพิเศษอย่าง JavaScript หรือ jQuery ที่สั่งงานโดยอ้างอิงถึง ID ที่เราตั้งอีกด้วย เพราะฉะนั้นเราจึงควรระวังเรื่องนี้ให้มากๆ
แถมให้อีกนิดนึงเกี่ยวกับการตั้งชื่อ ID และ Class ที่ดีและเหมาะสม ผมแนะนำให้ตั้งชื่อให้สื่อความหมายของ ID และ Class นั้นๆจริงๆและยืดหยุ่นพอที่จะให้คุณสามารถเปลี่ยนแปลงคำสั่งได้ในอนาคตได้ โดยพยายามหลีกเลี่ยงอย่างเด็ดขาดที่จะตั้งชื่อตามลักษณะการแสดงผลบนหน้าจอ เช่นตั้งชื่อตามสีอย่าง red, black, pink, white หรือตั้งชื่อตามตำแหน่งหรือลักษณะการวางอย่าง left, right, center, bottom ที่แนะนำอย่างนี้เพราะว่าคุณไม่มีทางรู้หรอกว่าในอนาคตคุณอาจจะต้องเปลี่ยนลักษณะการแสดงผลนั้นๆเป็นอย่างอื่นที่ตรงกันข้ามอย่างสิ้นเชิงเลยก็ได้
ตัวอย่างเช่น ถ้าคุณตั้งชื่อ class ว่า white เพราะตอนนี้ลูกค้าของคุณอยากให้ข้อความที่อยู่ใน Class นี้เป็นสีขาว แต่ในอีกหลายเดือนต่อมาลูกค้าคนเดิมของคุณอาจจะอยากเปลี่ยนสีข้อความใน Class นี้เป็นสีดำก็ได้ คราวนี้คุณจะมี Class ที่สื่อความหมายตรงข้ามกันไปเลย ซึ่งจะมีผลทำให้การดูแลโค๊ตต่อไปยากลำบากมากขึ้นเพราะชื่อที่คุณตั้งมันไม่สื่อความหมายอย่างที่ควรจะเป็นอีกต่อไป และจะยิ่งมีปัญหามากขึ้นไปอีกเมื่อคนอื่นต้องมาดูแลโค๊ตนี้แทนคุณ เพราะเขาจะงงว่าข้อความก็เป็นสีดำแท้ๆแต่ทำไม Class มันถึงชื่อว่า white ได้ไง(ว่ะ) เพราะฉะนั้นเราจึงควรตั้งชื่อ ID และ Class ที่สื่อความหมายจริงๆโดยไม่อิงกับลักษณะการแสดงผลใดๆเลย ดังนั้นแทนที่คุณจะตั้งชื่อ Class ว่า white ให้ตั้งว่า hilight แทน เพราะชื่อนี้นอกจากจะสื่อความหมายโดยตัวมันเองแล้วว่าทำหน้าที่อะไร มันยังยืดหยุ่นพอให้คุณปรับเปลื่ยนสีตัวอักษรเป็นสีอะไรก็ได้ที่คุณต้องการในอนาคต
ภาพสรุปได้ชัดเจนครับ
รอตอนต่อไปอยู่นะครับ
ผมเองใช้ ID กับ Element ที่มีแค่ 1
ถ้านอกจากนี้ใช้ Class หมด
รอบทต่อไปนะครับ
ขอบคุณค่ะ
ถ้าเปิดสอน พวก workshop เมลบอกด้วยละกัน