การทำเว็บไซต์ ที่ดี ให้ถูกหลัก ถูกต้องเหมือนมืออาชีพ นั้นเราคง ปฏิเสธไม่ได้ว่า สิ่งที่ยากที่สุดสิ่งหนึ่งในการเขียน HTML และ CSS คือ การตั้งชื่อ Class และ ID ถึงแม้ว่า ในตอนนี้จะหมดยุคของการตั้งชื่อ Class เพื่อเขียน CSS แล้วก็ตาม เราสามารถเขียน Combinator selectors หรือ Simple selectors แบบ Type Selector ผสมกับ Child Selector กันไปได้ใน CSS2.1 ถึงกระนั้น เราก็ยังจำเป็นต้องสร้าง Class เพราะว่า การตั้งชื่อ Class และ ID ไม่ได้เกี่ยวอะไรโดยตรงกับ CSS

Class และ ID เป็นสิ่งจำเป็นอย่างยิ่ง ในยุคของ Web 4.0 (อย่างช้า ก็ 5.0) เป็นต้นไป เพราะ หน้าเว็บนั้นๆ หรือเอกสารนั้นๆ จะถือตนเป็นฐานข้อมูล HTML ด้วยตัวของมันเอง กฎของเว็บยุคใหม่ สามารถอนุญาตให้เข้าถึง และ Share ข้อมูลกันได้จากหน้าเว็บโดยตรง เช่น นาย ก ไก่ ทำเว็บเกี่ยวกับ "การปลูกผักสวนครัว" นาย ข ไข่ ทำเว็บเกี่ยวกับการเลี้ยงปลา นาย ค "ทำเว็บเกี่ยวกับการ ทำอาหาร" ทั้งสามคนนี้ สามารถที่จะ เขียนชุดภาษาคอมพิวเตอร์ใดๆ เพื่อที่จะไป เก็บข้อมูลจากหน้าเว็บ ตามที่เว็บนั้นๆ "ได้ Markup เอาไว้อย่างถูกวิธี และแยก Class และ ID ของข้อมูลอย่างเป็นระเบียบ" ทั้งนี้ สามคนข้างต้น ต้องมีการตกลงเรื่องการเสนอข้อมูลทางกฎหมายต่อไป ว่าจะเอาไปแสดงยังไง อ้างอิงยังไง แต่เรื่องความปลอดภัยในการเข้าถึงข้อมูลก็เป็นอีกเรื่องหนึ่ง ซึ่งเมื่อไม่นานมานี้ "เซอร์ ทิม เบอร์นเนอส ลี" ก็ได้กล่าวเอาไว้ว่า เรื่องความเสี่ยงของการเข้าไปนำข้อมูลจากหน้าเว็บของคนอื่น แล้วเอาออกมาใช้นั้น จะทำอย่างไร หรือมีมาตรการใด เพื่อเป็นรับรองได้ว่า ไม่ได้เป็นการทำเพื่อการโกง แฮ๊ก ล่วงเกินข้อมูลของผู้อื่น

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

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

(ผมคิดว่า บางคน คิดเขียนโปรแกรม ให้คนปั่นจักรยาน เอาผัก กับปลาไปส่งร้านรับทำกับข้าว ตามสูตรอาหารที่เราต้องการ แล้วนะเนี่ย แทนที่เราจะทำอาหารเอง ถ้าขยันเขียนโปรแกรมเพิ่มอีกนิดหน่อย เราจะได้รับประทานอาหารทันที โดยไม่ต้องล้างกระทะ ล้างหม้อ)

เอาหละ นั่นมันคงเป็นยุค เว็บ 5.0 ตอนนี้ ยุค 2.1 ที่ยังไม่มี 3G แต่เรามี 3Gs แล้ว กลับมาก่อน กลับมาก่อน

เรื่องที่ผมสมมติมานั้น แทบจะเป็นไปไม่ได้เลย ถ้าหากเราเขียน HTML มั่วๆ อย่างที่เคยเป็นมา เช่น ตั้งชื่อ Class โดยเอาชื่อแม่ตัวเองขึ้นก่อน ใส่ชื่อ ID เป็นชื่อพ่อ งานไหนเกลียดลูกค้าเข้าใส้ ก็ใส่ชื่อลูกค้าเข้าไปแล้วตามด้วยคำว่า ฟัคยู ซะงั้น เอาน่า มันผ่านมาแล้ว ถือซะว่าเป็นช่วงวัยรุ่น คึกคะนองลอง CSS ตอนนี้ เราต้องรุดหน้าพา "ไทยเข้มแข็ง" ต้องตั้งใจกันหน่อย

การที่เราจะตั้งชื่อ Class หรือ ID ให้เข้ากันกับ Web ที่เรากำลังทำอยู่ได้นั้น เราจำเป็นอย่างยิ่งที่ต้องรู้ว่า เนื้อหาหลักๆ และหรือเนื้อหาทั้งหมดนั้น กล่าวถึงอะไร ไม่เช่นนั้น เราจะไม่สามารถสร้าง Class หรือ ID ที่เข้ากันได้เลย

เพราะว่า แต่ละ Class แต่ละ ID ที่ระบุลงไปนั้น จะเป็นการบอกว่า เนื้อหาที่อยู่ในนั้นคืออะไร อย่างไร ไม่มี sidebar_left ไม่มี box_1 หรือ div_1 ให้วุ่นวายขายปลาแดกอีกต่อไป หรือถ้าเราไม่จำเป็นต้องประกาศ Class หรือ ID เพื่อที่จะไปใช้ข้อมูลร่วมกับอย่างอื่น ก็ไม่จำเป็นต้องใส่ เขียนมัน HTML ดุ้นๆ นี่แหละ

มาถึงตรงนี้แล้ว คนที่เคยเขียนแค่ CSS1 หรือ CSS2 จะงง งง แนะนำให้หาทางจูนคลื่นให้เข้าที่ ก่อน ก่อนที่จะเดินหน้าอ่านต่อไป เพราะทางข้างหน้า จะมึนเป็นสองเท่า

ถ้าสมมุติว่า เราต้องการสร้างหน้าเว็บที่มีลักษณะแบบนี้

ในส่วนสีเขียวเข้ม (article) ที่เราต้องการใส่เนื้อหา จะเป็น element เดี๋ยวเท่านั้นที่จะถูกระบุ Class เข้าไป เพราะว่าส่วนอื่นๆ ในหน้านั่นไม่มีความจำเป็นใดๆ ในตอนนี้

สำหรับคนที่ยังมองไม่ออกว่า ถ้าไม่ใส่ Class หรือ ID แล้วจะเขียน Layout ได้ยังไง ผมจะขอยกตัวอย่างคร่าวๆ เพื่อสร้างความเข้าใจเพิ่มเติมดังต่อไปนี้

จาก แนวคิดพื้นฐาน ตามที่สายตาเรามองเห็น หน้าเว็บหน้านี้ ถ้าจัดแบ่ง division เราจะใช้ div ในการแบ่งเนื้อหาออกเป็น 4 ส่วน

การจัด layout ด้วย CSS ใช้ CSS2.1 (แต่โดยทั่วไปแล้ว ทุกๆ ครั้งที่ผมอธิบายตามหลักทฤษฎี ผมจะใช้หลักการของ CSS3 ในการอธิบาย แต่เขียนแบบ CSS2.1 อ่านเรื่องเกี่ยวกับ Attribute Selectors ได้ในบทความ "ทำความเข้าใจ Attribute Selector ของ CSS")

การเขียน CSS ในบทความนี้ใช้ Selectors 2 หมวด มี Simple selectors และ หมวด Combinators ซึ่งในสองหมวดนี้ จะแยกย่อยเป็นหมู่เล็กๆ ลงไปอีก

การขึ้นโครงหน้าเว็บใช้ Combinators Selectors ผสมกับ Simple selectors โดยเลือกใช้ Pseudo-classes บางตัว ก็สามารถที่จะจัดการหน้าเว็บตามตัวอย่างได้แล้ว

HTML:

จากโค้ด HTML เรามี div ทั้งหมด 4 ตัวซึ่งเอาไว้จัดแบ่งข้อมูลออกเป็น 4 ช่อง การเขียน CSS ใช้ Simple Selectors โดยเลือกใช้ Pseudo-classes ในหมวดของ :first-child ผสมกับ Combinator Selectors โดยเลือกใช้ Child และ Sibling

จาก HTML ยังไม่ต้อง งง นะครับ ว่าทำไม Aside มันมาก่อน Article เรามาดู CSS กันต่อครับ

CSS:

body {
 width: 980px;
 margin: 10px auto;
 font: 12px/16px Tahoma, Geneva,  sans-serif;
 background: #CCE1D7;
}
body>div:first-child,  body>div:first-child+div+div+div {
 min-height: 50px;
 padding: 10px;
 margin-bottom: 10px;
 background: #99C3AF;
}
body>div:first-child+div {
 width: 300px;
 padding: 10px;
 float: right;
 background: #99C3AF;
}
body>div:first-child+div+div {
 margin-right: 330px;
}
body>div:first-child+div+div {
 background: #517765;
 padding: 10px;
}
body>div:first-child+div+div+div {
 clear: both;
 margin-top: 10px;
}

จาก CSS หลายคนอาจจะบ่นว่า การเขียนอย่างนี้ เปลืองเครื่องหมายบวกเป็นอย่างมาก ใช่ครับ ได้อย่าง ก็ต้องเสียอย่าง แต่มันทำให้เราไม่ต้องไปพะวงกับการตั้งชื่อ class เพื่อเขียน CSS ซึ่งขอย้ำอีกทีว่า Class มันไม่เกี่ยวกับการเขียน CSS ในทางตรง จะเริ่มใส่ class ก็ต่อเมืื่อ นำ เนื้อหาเข้ามาใส่เท่านั้น กลับไปเรื่อง ปลา ของเรา ถ้าผมเลือกนำเสนอข้อมูลปลาชนิดหนึ่ง ผมจะตั้งชื่อ class ยังไง ถ้าหากหน้าเว็บนั้น นำเสนอเนื้อหาเกี่ยวกับ ปลานิลแดง div ตัวที่ 3 ซึ่งเป็น div ที่นำเสนอข้อมูลที่เป็นเนื้อหาของเอกสารอยู่จะถูกตั้ง class ให้เข้ากับเนื้อหา กลายเป็น