พูดจากประสบการณ์! ตีความความเข้าใจผิดของการผลิตหน้าเว็บ Div+CSS

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

เราเห็นเค้าโครง div ที่มีการซ้อน 6 หรือ 7 ชั้น ตารางที่ไม่มีตาราง หน้าที่ประกอบด้วย div+a ล้วนๆ และคลาสเลเยอร์การนำเสนอหลายร้อยชั้น... ปัจจุบันมีหนังสือเกี่ยวกับมาตรฐานเพิ่มมากขึ้น ยกเว้นหนังสือบางเล่มที่โฆษณา "เทคนิคขั้นสูง" มีเพียงไม่กี่คนที่จะไม่เน้นประโยคดังกล่าวในสองสามบทแรกของหนังสือ - "การแยกโครงสร้างและการแสดงออก" อย่างไรก็ตาม มีผู้อ่านหนังสือเหล่านี้กี่คนที่อ่านสองสามบทแรกอย่างจริงจัง? หรือคุณอยากจะข้ามคำอธิบายโครงสร้างที่น่าเบื่อแล้วดำดิ่งลงสู่เทคนิคเลย์เอาต์และ Hacks ที่ดูเหมือนขั้นสูง

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

ด้านล่างนี้ฉันจะพูดถึงวิธีคิดตามมาตรฐานโดยอิงจากประสบการณ์ส่วนตัวของฉัน หลายๆ วิธีเป็นเพียงทางอ้อม ฉันหวังว่ามันจะเป็นประโยชน์กับ XDJM ที่เพิ่งเข้ามาสัมผัสกับมาตรฐาน:

1. “การบันทึกรหัส” เป็นเครื่องมือทางการตลาด ไม่ใช่วัตถุประสงค์

"การใช้เค้าโครง div สามารถบันทึกโค้ดได้มากกว่าเค้าโครงตาราง" ฉันได้เห็นประโยคนี้ในหนังสือและเว็บไซต์หลายแห่ง ประโยคนี้ถูกต้อง "การบันทึกโค้ด" ถือเป็นข้อดีประการหนึ่งของการทำให้หน้าเว็บเป็นมาตรฐาน อย่างไรก็ตาม โปรดจำไว้ว่านี่เป็นเพียง "ผลประโยชน์ประการหนึ่ง" ไม่ใช่ "ผลประโยชน์เพียงอย่างเดียว" และไม่ใช่จุดประสงค์ “บันทึกโค้ด” มักเป็นวิธีการทางการตลาดที่เราใช้เพื่อโน้มน้าวหัวหน้าที่ดื้อรั้น จุดประสงค์เดียวของการทำให้หน้าเว็บเป็นมาตรฐานคือ "การแยกโครงสร้างและประสิทธิภาพ" และไม่เคยเกี่ยวกับการบันทึกโค้ดเพื่อประโยชน์ในการบันทึกโค้ด ครั้งหนึ่งฉันเคยใช้คลาสแบบรวมเนื่องจากแถบด้านข้างและแม้แต่เนื้อหาหลักของเว็บไซต์ก็มีแบบฟอร์มการนำเสนอเหมือนกัน (ยังมีหนังสือบางเล่มที่สอนเรื่องนี้) นี่เป็นการประหยัดโค้ดมากกว่าการตั้งชื่อ ID แยกกัน สิ่งนี้ก็คือโค้ดสูญเสียโครงสร้างคุณภาพดีไป ผลที่ตามมาของการสูญเสียโครงสร้างที่ดีคือ: 1. ไม่สามารถอ่านซอร์สโค้ดได้อีกต่อไป 2. เว็บไซต์เพิ่มค่าบำรุงรักษาที่ไม่ทราบ ลองนึกภาพว่าเมื่อเนื้อหาบางส่วนเปลี่ยนการนำเสนอตามความต้องการ เช่น สีของลิงก์ ฯลฯ เราจะต้องแก้ไขไฟล์ต้นฉบับของหน้าและเพิ่มคลาสเพิ่มเติม ปริมาณงานมีมากกว่าแค่การปรับรหัส การจัดกลุ่ม และหากเป็นเช่นนี้ต่อไป โครงสร้างก็จะแย่ลงเรื่อยๆ กลายเป็นวงจรอุบาทว์ที่ยากจะย้อนกลับ

มีอีกสถานการณ์หนึ่งที่เกิดขึ้นในการตั้งชื่อรหัส ซึ่งเป็นข้อผิดพลาดที่ฉันทำเช่นกัน ในเวลานั้นเพื่อ "บันทึกรหัส" เมนูหลักชื่อ "mm" เมนูรองชื่อ "m2" และเมนูระดับที่สามชื่อ "m3" ส่งผลให้สามารถอ่านได้ หน้าเว็บถูกลดขนาดลงอย่างมาก ทำให้เพื่อนร่วมงานคนอื่น ๆ เข้ามารับช่วงต่อได้ยาก พยายามกอบกู้ปัญหาแต่กลับทำให้ตัวเองเหนื่อยหน่าย ในทำนองเดียวกัน ไม่แนะนำให้ตั้งชื่อไฟล์และโฟลเดอร์ให้ง่ายเกินไป ตัวอย่างเช่น "การสร้างเว็บไซต์ใหม่" แนะนำให้จัดเก็บรูปภาพทั้งหมดในไดเร็กทอรี "i" โดยส่วนตัวแล้วฉันคิดว่าไม่แนะนำให้เลือกเว้นแต่คุณจะสามารถเขียนได้ โครงสร้างไดเร็กทอรีที่มีคำย่อสูง อธิบายโดยละเอียดและรับรองว่าทุกคนที่เกี่ยวข้อง รวมถึงพนักงานฝ่ายผลิต นักพัฒนา และแม้แต่หัวหน้าที่มีความรู้... สามารถเข้าใจและนำไปปฏิบัติได้ ไม่เช่นนั้นก็จะมีแต่จะเพิ่มปัญหาที่ไม่จำเป็นให้กับตัวคุณเองเท่านั้น

2. ID คือปืนไรเฟิล คลาสคือดาบสองคม

หากคุณต้องการมีโครงสร้างหน้าเว็บที่ดีทั้ง ID และคลาสจะต้องเชี่ยวชาญ สิ่งที่เรียกว่า "การจับมือทั้งสองมือต้องแข็งแกร่ง" ID ก็เหมือนกับปืนไรเฟิลซุ่มยิงซึ่งสามารถช่วยให้เราค้นหาองค์ประกอบที่เราต้องการโหลดรูปแบบได้อย่างแม่นยำ และคลาสก็คือดาบของอัศวิน ซึ่งเบากว่าและยืดหยุ่นมากกว่าเพียงปลายนิ้วสัมผัส การผสมผสานของทั้งสองอย่างเข้าด้วยกันจะทำให้ได้หน้าที่มีโครงสร้างที่ดี และประสิทธิภาพที่หลากหลาย อย่างไรก็ตาม มีมุมมองที่ผิดในขณะนี้ว่าสามารถแทนที่ id ด้วยคลาสได้อย่างสมบูรณ์ ที่จริงแล้วสิ่งนี้เป็นจริงสำหรับซอร์สโค้ดของหน้าเว็บจำนวนมาก เมื่อคุณเปิดทั้งชั้นเรียน คุณจะไม่พบ id มีสาเหตุหลายประการสำหรับปรากฏการณ์นี้ แต่แนวคิดที่หยั่งรากลึกของ "class=CSS" ที่สืบทอดมาจากยุคของตารางคือสาเหตุที่แท้จริง เป็นความจริงที่ว่าคลาสมีความหลากหลายและยืดหยุ่นมากกว่า id แต่ต้องตระหนักด้วยว่าคลาสนั้นมีประสิทธิภาพน้อยกว่า id มากในการสร้างโครงสร้างหน้าเว็บที่ดี เอกลักษณ์บังคับของ id ทำให้ง่ายต่อการดึงโมดูลใด ๆ ที่เราต้องการผ่าน id ในขณะที่คลาสไม่มีข้อได้เปรียบนี้ แม้ว่าเราจะสามารถกำหนดชื่อคลาสที่ไม่ซ้ำกันสำหรับโมดูลได้ แต่หลักฐานก็คือมีเพียงผู้ผลิตเท่านั้นที่สามารถเปลี่ยนสไตล์ของหน้าเว็บได้ ไม่งั้นก็หาคนขี้เกียจสักหน่อย เมื่อเห็นว่าสไตล์เหมือนกัน เขาก็จะประยุกต์คลาสก่อนหน้าโดยตรง ผลก็คือ เราพบว่ามีโมดูลมากกว่าหนึ่งโหลในหน้าเว็บที่เรียกว่า "gonggao" หรือ "xinwen" " จึงแยกแยะได้ยาก หากไม่มีการเพิ่มความคิดเห็น html จำนวนมาก ผลลัพธ์นี้จึงไม่ใช่สิ่งที่เราต้องการอย่างชัดเจน นอกจากนี้ ตามที่กล่าวไว้ข้างต้น รหัสที่บันทึกผ่านคลาสสากลจะต้องถูกใช้อย่างสิ้นเปลืองในแต่ละคลาสที่กำหนดแยกกัน

ID คือปืนไรเฟิลซุ่มยิง และคลาสก็คือดาบสองคม เราทั้งคู่ต่างได้รับประโยชน์ และต่างจากเราทั้งคู่ที่พ่ายแพ้

3. เนื้อหาบางส่วนไม่จำเป็นต้องมี div เป็น "คอนเทนเนอร์"

ฉันควรใช้