เจาะลึกสถาปัตยกรรม CSS เมื่อสถานะแอปแอบซ่อนใน Token
เรียนรู้ปัญหาการซ่อนตัวของ application state ใน layer โทเค็นจากไฟล์ quell-base.css และผลกระทบต่อสถาปัตยกรรม CSS
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- ไฟล์ quell-base.css ใช้ layer ghost_tokens เพื่อสำรองค่าโทเค็นก่อน render
- การใส่ค่าสถานะเช่น --is-modal-open ปะปนกับโทเค็นทั่วไปสร้างความสับสนทางสถาปัตยกรรม
- เบราว์เซอร์ไม่สามารถแยกแยะระหว่างค่าการออกแบบและสถานะแอปได้เนื่องจากใช้ไวยากรณ์เดียวกัน
- สถาปัตยกรรม CSS ที่ดีต้องกำหนดขอบเขตให้ชัดเจนว่าส่วนใดไม่ควรเก็บสถานะแอปพลิเคชัน
บทความจาก Dev.to โดย Ortiz Franklin ได้เจาะลึกถึงปัญหาการออกแบบสถาปัตยกรรม CSS เมื่อแนวคิดเรื่องสถานะแอปพลิเคชันถูกนำไปซ่อนไว้ในที่ที่มันไม่ควรอยู่ โดยต่อยอดจากบทความก่อนหน้าที่ชี้ว่าระบบที่ไม่มีการประกาศขอบเขตที่ชัดเจนจะถูกขอให้ทำทุกอย่างในที่สุด
ตัวอย่างรูปธรรมที่ชัดเจนอยู่ในไฟล์ quell-base.css ซึ่งมีการประกาศ layer ที่เรียกว่า ghost_tokens โดยมีเป้าหมายหลักคือการจัดเตรียมค่าสำรองที่ได้รับการประมวลผลแล้วสำหรับทุกโทเค็นก่อนที่หน้าเว็บจะทำการ paint เพื่อป้องกันปัญหา Flash of Unstyled Content หรือ FOUC และทำให้มั่นใจว่าตัวเรียกใช้ var() จะไม่ว่างเปล่าแม้ว่าชีทธีมจะยังโหลดไม่เสร็จก็ตาม
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
ปัญหาคือโครงสร้างนี้อาศัยคำศัพท์มาตรฐานที่กำหนดไว้ เช่น font, color, space, size, radius, border, shadow และ motion ซึ่งตัวแปรอย่าง --color-accent ถือว่าอยู่ในคำศัพท์เหล่านี้ และเนื่องจากเบราว์เซอร์ไม่สามารถบังคับความแตกต่างนี้ได้ สถาปัตยกรรมจึงต้องเป็นผู้รับผิดชอบ
การใช้งานโทเค็นในลักษณะนี้สะท้อนให้เห็นถึงปัญหาคลาสสิกในระบบสไตล์ชีทขนาดใหญ่ เมื่อนักพัฒนาพยายามใช้กลไกการสืบทอดค่าของ CSS มาแก้ปัญหาทุกอย่างโดยไม่คำนึงถึงขอบเขตหน้าที่ที่แท้จริง การผสมผสานระหว่างค่าคงที่ทางดีไซน์และตัวแปรสถานะรันไทม์ไว้ด้วยกันทำให้การบำรุงรักษาในระยะยาวทำได้ยากขึ้นและเกิดพฤติกรรมที่ไม่คาดคิด
อย่างไรก็ตาม เมื่อตัวแปรอย่าง --is-modal-open เข้ามาอยู่ใน layer เดียวกัน มันไม่ได้ทำหน้าที่เป็นเพียงค่าสำรองอีกต่อไป แต่เป็นการยืนยันสถานะล่วงหน้าก่อนที่แอปพลิเคชันจะกำหนดสถานะจริงๆ เสียอีก โดยผู้ใช้งานสามารถควบคุมระบบผ่าน 3 วิธีตามลำดับขั้นพลัง ได้แก่ การประกาศค่า custom property ใหม่บน :root ที่ไม่มี layer, การต่อท้าย layer เดิม, หรือการเขียนกฎแบบไม่มี layer ตรงๆ
"--color-accent : #0057cc ; /* a value */ --is-modal-open : 0 ; /* application state */ Entrer fullscreen mode Exit fullscreen mode At parse time, the browser cannot tell these apart."
Ortiz Franklin
ในเวลาที่เบราว์เซอร์ทำการ parse ข้อมูล ตัวแปรทั้งสองประเภทนี้จะมีหน้าตาทางไวยากรณ์ที่เหมือนกันทุกประการ ทั้งคู่เป็น custom property และทั้งคู่เป็นการประกาศที่ถูกต้องตามหลักการ ทำให้เลเยอร์ ghost_tokens ทำงานตามที่ถูกออกแบบไว้ทุกประการ แต่ข้อผิดพลาดอยู่ที่ระดับสถาปัตยกรรม
บทเรียนสำคัญจากกรณีนี้ไม่ใช่การห้ามไม่ให้ CSS ตอบสนองต่อสถานะแอปพลิเคชัน เพราะระบบเช่น quell เองก็มีการจัดการสถานะฟอร์มที่ดีอยู่แล้วในส่วนอื่น แต่ปัญหาคือ layer ของโทเค็นพื้นฐานไม่ควรถูกเปลี่ยนให้กลายเป็นที่เก็บสถานะแอปเพียงเพราะมันใช้ไวยากรณ์รูปแบบเดียวกัน
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น