เหตุใดสถาปัตยกรรม CSS จึงสำคัญ

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

สัญญาณเตือนว่า CSS ของคุณต้องมีสถาปัตยกรรม:

• กลัวลบกฎเพราะไม่ทราบว่ากฎเหล่านั้นมีผลกระทบต่อสิ่งใด
• ใช้ !important บ่อยครั้งเพื่อเขียนทับสไตล์ที่เสียหาย
• หน้าเว็บต่าง ๆ โหลดสไตล์ชีตที่ไม่เกี่ยวข้องทั้งหมด
• สไตล์ทำงานได้เพียงเพราะโครงสร้าง HTML มีรูปแบบเฉพาะ

สถาปัตยกรรม CSS ช่วยให้คุณได้รับสิ่งต่อไปนี้:

• ความคาดเดาได้ — คุณทราบว่ากฎทำอะไรโดยไม่ต้องอ่านการพึ่งพาทั้งหมด
• การนำกลับมาใช้ใหม่ — สามารถนำคอมโพเนนต์ไปวางที่ใดก็ได้
• ความง่ายในการบำรุงรักษา — การเปลี่ยนคอมโพเนนต์หนึ่งจะไม่ทำให้คอมโพเนนต์อื่นเสียหาย
• ความสามารถในการขยาย — นักพัฒนาคนใหม่สามารถเพิ่มสไตล์ได้อย่างปลอดภัย

CSS ที่ดีจะแยกสิ่งต่อไปนี้ออกจากกัน:

• การจัดวาง — สิ่งต่าง ๆ อยู่ที่ใด
• รูปแบบตัวอักษร — ข้อความมีลักษณะอย่างไร
• สี — สีต่าง ๆ มีความหมายอย่างไรในบริบทนั้น
• สถานะ — รูปแบบที่เปลี่ยนไปตามการโต้ตอบและการเปลี่ยนแปลง

ควรรักษาความจำเพาะของตัวเลือกให้ต่ำที่สุดเท่าที่จะทำได้ ควรเลือกใช้ตัวเลือกที่มีคลาสเดียว ความจำเพาะที่สูงจะบังคับให้คุณใช้การเขียนทับที่มีความจำเพาะสูงยิ่งขึ้น หรือใช้ !important ซึ่งก่อให้เกิดปัญหาต่อเนื่องเป็นทอด ๆ

คอมโพเนนต์ CSS ควร เปิดให้ขยาย (เพิ่มคลาสตัวปรับแต่งได้) แต่ ปิดไม่ให้แก้ไข (อย่าแก้ไข CSS ของคอมโพเนนต์พื้นฐานเพื่อรองรับรูปแบบย่อย)

แนวทาง CSS ที่ใช้กันทั่วไป:

• BEM — แบบแผนการตั้งชื่อเพื่อแยกคอมโพเนนต์ออกจากกัน
• ITCSS — ชั้นของไฟล์ที่เรียงตามความจำเพาะ
• CSS แบบอะตอมิก/ยูทิลิตีเป็นอันดับแรก — คลาสขนาดเล็กที่มีหน้าที่เดียว (เทลวินด์)
• OOCSS — การแยกโครงสร้างกับรูปลักษณ์
• SMACSS — การจัดหมวดหมู่กฎ CSS

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

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

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

เว็บไซต์ส่วนตัวไม่จำเป็นต้องใช้ BEM แต่ระบบการออกแบบที่มี 10 ทีมใช้งานจำเป็นต้องใช้ ควรปรับขนาดสถาปัตยกรรมให้เหมาะกับขนาดโครงการ แต่ควรกำหนดแนวปฏิบัติตั้งแต่เนิ่น ๆ แทนที่จะนำมาใส่ภายหลัง

สถาปัตยกรรม CSS มอบโครงสร้างที่ทำให้สไตล์ชีตขนาดใหญ่คาดเดาได้ นำกลับมาใช้ใหม่ได้ และบำรุงรักษาได้ง่าย ความจำเพาะต่ำ การแยกหน้าที่รับผิดชอบ และแนวปฏิบัติที่สอดคล้องกันคือรากฐาน แนวทางที่ได้รับความนิยม ได้แก่ BEM, ITCSS และแบบยูทิลิตีเป็นอันดับแรก สถาปัตยกรรมที่เหมาะสมขึ้นอยู่กับขนาดทีมและขนาดโครงการ