นักพัฒนาเว็บ (นั่นคือคุณ) สามารถสร้างคลาส CSS และชื่อ ID และใช้ชื่อเหล่านี้เพื่อระบุ Div และองค์ประกอบและแท็กของหน้าอื่นๆ สำหรับนักพัฒนา เมื่อตั้งชื่อตัวเลือก CSS ที่กำหนดแท็ก XHTML (แท็ก) ใหม่ พวกเขาจะต้องตรวจสอบให้แน่ใจว่าตรงกับแท็กที่กำหนดไว้ล่วงหน้าอย่างถูกต้อง แต่สำหรับชื่อคลาสและตัวเลือกรหัส มันเป็นเรื่องของความคิดเห็น อย่างไรก็ตาม การตั้งชื่อคลาสและ ID เหล่านี้ตามที่คุณต้องการนั้นไม่ใช่นิสัยที่ดี
หลังจากอ่านบทความเกี่ยวกับคลาส CSS และแบบแผนการตั้งชื่อรหัสที่เขียนโดย Andy Clarke (จาก Stuff and Nonsense และ All That Malarkey) และ Eric Meyer ฉันเริ่มคิดถึงการใช้คลาสและ id ในกระบวนการออกแบบเว็บไซต์ของฉันเอง วิธีการตั้งชื่อ
การตั้งชื่อที่ใช้งานง่าย
เมื่อออกแบบหน้าเว็บและจำเป็นต้องระบุ Div แนวคิดที่เป็นธรรมชาติที่สุดคือการตั้งชื่อองค์ประกอบโดยใช้คำที่อธิบายตำแหน่งขององค์ประกอบบนหน้าเว็บ วิธีนี้ทำให้ชื่อคลาสและรหัสมีลักษณะดังนี้:
แผงด้านบน
แนวนอน-นำทาง
ด้านซ้าย
คอลัมน์กลาง
ขวา-พ
นี่เป็นวิธีที่ถูกต้องในการตั้งชื่อคลาสและรหัส CSS และ XHTML ข้อกำหนดเหล่านี้เรียบง่ายและสื่อความหมาย จึงตอบสนองความต้องการในการระบุองค์ประกอบของหน้าและสไตล์ CSS ที่เกี่ยวข้อง
ปัญหาคือชื่อดังกล่าวเชื่อมโยงกับการแสดงออกที่เฉพาะเจาะจงของเนื้อหาของหน้า ชื่อเหล่านี้อ้างอิงถึงตำแหน่งขององค์ประกอบของหน้าภายในเค้าโครงหน้าเฉพาะ ดังนั้นการใช้งานภายนอกเค้าโครงดังกล่าวจะไม่เหมาะสมหรือทำให้เกิดความสับสน ในเวลาเดียวกัน ชื่อเหล่านี้ไม่เกี่ยวข้องกับโครงสร้างของเนื้อหาเอกสาร ดังนั้น นี่เป็นวิธีที่ดีกว่าในการตั้งชื่อคลาสและรหัส CSS
การตั้งชื่อแบบมีโครงสร้าง
มาร์กอัปที่มีโครงสร้างหมายถึงการแยกข้อมูลนิพจน์/ตำแหน่งออกจากเนื้อหาโดยสมบูรณ์ ซึ่งรวมถึงชื่อคลาสและรหัสที่ปรากฏในมาร์กอัป
ข้อมูลที่เกี่ยวข้องกับแท็กใช้เพื่ออธิบายโครงสร้างของเอกสารมากกว่ารูปลักษณ์ภายนอก คุณลักษณะนี้ช่วยให้เราสามารถนำเนื้อหาและมาร์กอัปกลับมาใช้ใหม่ในรูปแบบรูปลักษณ์ที่แตกต่างกันโดยเพียงแค่เปลี่ยน CSS เมื่อคุณเข้าใจวิธีนี้ จะพบว่าการใช้ตำแหน่งหน้าเพื่อตั้งชื่อคลาสและรหัสนั้นไม่เหมาะสมอย่างยิ่งเมื่อต้องจัดการกับรูปแบบที่ปรากฏ เช่น เสียง ดังนั้น คลาสและรหัสควรได้รับการจัดโครงสร้างและตั้งชื่อตามวัตถุประสงค์ในเอกสาร แทนที่จะเป็นตำแหน่งที่ปรากฏ
ชื่อคลาสและรหัสสามารถตั้งชื่อได้ในลักษณะที่มีโครงสร้างดังแสดงด้านล่าง:
การสร้างแบรนด์
main-nav
การนำทางย่อย
เนื้อหาหลัก
แถบด้านข้าง
ชื่อเหล่านี้เข้าใจได้ง่ายเหมือนกับแบบแผนการตั้งชื่อที่ใช้งานง่าย แต่จะอธิบายบทบาทขององค์ประกอบของหน้ามากกว่าตำแหน่งขององค์ประกอบ สิ่งนี้ทำให้โค้ดสอดคล้องกับจุดประสงค์ดั้งเดิมของการใช้มาร์กอัปที่มีโครงสร้างเพียงอย่างเดียว กล่าวคือ นักพัฒนาสามารถจัดการรูปแบบการแสดงผลในสื่อต่างๆ ได้โดยไม่ต้องเปลี่ยนมาร์กอัป
แม้ว่าคุณไม่ได้วางแผนที่จะจัดรูปแบบเว็บเพจของคุณในสื่ออื่น การใช้การตั้งชื่อที่มีโครงสร้างสามารถช่วยให้คุณอัปเกรดไซต์หรือออกแบบใหม่ได้ง่ายขึ้นในอนาคต ตัวอย่างเช่น การตั้งชื่อที่มีโครงสร้างจะหลีกเลี่ยงความสับสนเมื่อ div ที่มีคอลัมน์ขวารหัสเดียวกันถูกย้ายไปทางด้านซ้ายของหน้า การตั้งชื่อแถบด้านข้าง div ด้วยวิธีนี้มีความเหมาะสมมากกว่า เนื่องจากไม่ว่าชื่อจะปรากฏที่ด้านใดของหน้าก็ตาม ชื่อนี้ยังคงใช้งานง่ายและเข้าใจง่ายสำหรับนักพัฒนา
แบบแผนการตั้งชื่อบางอย่าง
Andy Clarke วิเคราะห์ซอร์สโค้ดของเว็บไซต์ 40 แห่งที่ออกแบบโดยนักพัฒนาที่สนับสนุนแนวคิดการออกแบบเว็บที่เป็นมาตรฐาน แม้ว่าชื่อคลาสและรหัสจะไม่สอดคล้องกันมาก แต่ก็ยังพบชื่อทั่วไปบางชื่อที่ปรากฏบ่อยครั้ง รายการตัวอย่างของชื่อคลาส/id ที่ใช้บ่อยที่สุดมีอยู่ที่นี่:
ส่วนหัว
เนื้อหา
นำทาง
แถบด้านข้าง
ส่วนท้าย
ชื่อคลาสและรหัสทั่วไปเหล่านี้เป็นจุดเริ่มต้นของมาตรฐานหรือการก่อตัวของแบบแผนที่ยอมรับโดยทั่วไปหรือไม่? แม้ว่านี่คือสิ่งที่ฉันหวัง แต่ฉันไม่คิดอย่างนั้น ฉันอยากเห็นชุดมาตรฐานการตั้งชื่อสำหรับองค์ประกอบของหน้าทั่วไปที่เราเห็นทุกวัน ในเวลาเดียวกัน การใช้วิธีการตั้งชื่อที่เป็นมาตรฐานสามารถช่วยให้ค้นหาองค์ประกอบของหน้าและอัปเกรดเว็บไซต์ได้ง่ายขึ้น โดยเฉพาะอย่างยิ่งเมื่อคุณต้องการสลับการทำงานระหว่างไซต์ที่พัฒนาโดยนักพัฒนาที่แตกต่างกันในเวลาที่ต่างกัน