เขียน CSS ยังไงให้ดี และมีคุณภาพ

CSS (Cascading Stylesheet) คืออะไร

ถ้าอธิบายให้เห็นภาพง่ายๆ ให้นึกถึงบ้านหนึ่งหลัง

HTML คือ โครงสร้างบ้าน ซึ่งประกอบไปด้วยส่วนต่างๆ เช่น เสาเข็ม, ห้อง, หลังคา, สวน, ลานจอดรถ เป็นต้น

CSS คือ ส่วนต่อเติมตกแต่งบ้าน ได้แก่ สีผนัง, ลายวอลล์เปเปอร์, เฟอร์นิเจอร์ต่างๆ ฯลฯ รวมถึงการจัดวางทุกๆชิ้นส่วนในบ้านให้สวยงาม และตรงตามรูปแบบที่มัณฑนากร (ดีไซน์เนอร์) ออกแบบไว้

เขียน CSS ยังไงให้ดี

การเขียน CSS ไม่มีคำว่าถูกหรือผิด มีแต่การเขียนยังไงให้ดี คำว่า “CSS ที่ดี” ต้องตอบโจทย์ในมุมต่างๆ ดังนี้

1. เขียน CSS ให้มีระเบียบ

การเขียน CSS ให้มีระเบียบ คือ การเขียนในรูปแบบที่ดูง่าย, มีการจำแนก class และ id ออกมาเป็น module หรือ element

ถ้าพูดให้เห็นภาพ ให้นึกถึงการสร้างและตกแต่งบ้าน ใน 1 บ้านอาจจะมีห้องน้ำมากกว่า 1 ห้อง ซึ่งมีลักษณะคล้ายกันทุกห้อง คือ มีส่วนโซนเปียกและโซนแห้ง, มีชักโครก, มีอ่างล้างมือ, มีฝักบัว

การเขียน CSS ของเราสำหรับบ้านหลังนี้ เราก็จะได้ class ห้องน้ำมาเป็น 1 module ซึ่งมี css property ที่ใช้ร่วมกัน คือ มีส่วนโซนเปียกและโซนแห้ง, มีชักโครก, มีอ่างล้างมือ, มีฝักบัว ซึ่งถ้าเราอยากจะตกแต่งให้ห้องน้ำแต่ละห้องมีส่วนที่แตกต่างกัน (บ้าง) เช่น มีสีที่ต่างกัน, บางห้องมีพรมเช็ดเท้า ฯลฯ เราก็แค่เพิ่ม css เข้าไปเพื่อระบุสีที่ต่างกันเข้าไปเพิ่มเติมได้ในภายหลัง

แต่โครงสร้างหลักของห้องน้ำยังอยู่เป็น module ซึ่งเราจะผลิตห้องน้ำซ้ำกี่ครั้งก็ได้ แค่เรียกใช้ class เดิมเท่านั้น

การคิดและเขียน CSS แบบนี้จะทำให้ CSS ของเรามีระเบียบมากยิ่งขึ้น เพราะเราวิเคราะห์ก่อนลงมือเขียน ว่าอะไรที่ใช้ร่วมกันได้ และอะไรที่ควรแยกออกมา

2. เขียน CSS ให้มีมาตรฐานเพื่อใช้งานกับคนอื่นในทีม และทำคัมภีร์ CSS Framework

กรณีที่มีคนเขียน CSS มากกว่า 1 คนและต้องใช้งานร่วมกัน ควรที่จะต้องมีมาตรฐานตกลงกันทั้งในเรื่องของรูปแบบการเขียน, การตั้งชื่อ รวมถึงควรที่จะมี “CSS Framework” ของทีมที่เปรียบเสมือนเป็นคัมภีร์ อธิบายว่าทุกหน้าของเว็บไซต์ ประกอบด้วยโมดูลอะไรบ้าง และต้องใช้ CSS class ชื่ออะไรในการเรียกใช้ ในกรณีที่จะต้องมีการแก้, การเพิ่ม Module ใหม่ๆขึ้นมา ก็จะได้รู้ว่าสิ่งที่เพิ่มนั้นสามารถเรียกใช้ CSS Module เก่าๆที่เคยเขียนไว้มาใช้ร่วมกันได้ ทำให้ไม่ต้องเสียเวลาเขียนใหม่ และประหยัดโค้ดลงไปได้มาก ทำให้ขนาดไฟล์ของ CSS น้อยลง, ทำให้ไม่เกิด CSS ขยะ และทำให้ CSS เป็นระเบียบ จะมีคนมาเขียนเพิ่มอีกกี่คนในอนาคต CSS ก็จะไม่ตีกันเอง จนต้องใส่ !important ซ้อนทับกันจนมั่วไปหมดเพื่อให้ CSS ของตัวเองทำงาน

3. เขียน CSS ให้มีขนาดไฟล์เล็กที่สุด

แม้ในปัจจุบัน จะมีทั้ง JS Framework ที่สามารถลดเวลาในการ Render และจัดระเบียบในการโหลดไฟล์ให้กับหน้าเว็บได้ รวมถึง Server เองก็มีระบบ Cache ไฟล์ให้กับเว็บเราได้แล้ว

แต่ถ้าเว็บไซต์เราเป็น large scale คือมีผู้ใช้งานเยอะมากๆ การเขียน CSS ให้ไฟล์มีขนาดเล็กที่สุด (ก่อน minify) ล้วนมีผลดีกับเว็บไซต์เรามาก

บางคนอาจจะคิดว่า ไม่เห็นเป็นไรเลย ขนาดไฟล์ต่างกันแค่ไม่กี่ KB เอง

การคิดแบบนี้ ถ้าเว็บเรามีผู้ใช้งานแค่ไม่กี่คนก็ดีไป แต่ถ้าเป็นเว็บไซต์ที่มีผู้ใช้งานเยอะมากๆ จะทำให้เรามีค่าใช้จ่ายที่งอกขึ้นมาก้อนใหญ่ คือ “Bandwidth” แน่นอน

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

จากทั้งข้อ 1-3 ข้อที่กล่าวมา มีวิธีการเขียน CSS ให้ตอบโจทย์ทั้ง 3 ข้อได้ คือ การเขียน SCSS ตามบทความนี้ > จัดระเบียบ CSS ด้วย SCSS กันเถอะ

และขั้นตอนสุดท้ายสำหรับการเขียน CSS ให้ดี คือ การ minify css แล้วเรียกไฟล์นี้ในการใช้งาน