เขียน CSS อย่างไรให้ Good และ Bad

เขียน CSS อย่างไรให้ Good และ Bad  การเขียน CSS นั้นไม่ได้ยากและไม่ได้ง่าย(ถ้าจะให้มันดี) ในบทความนี้ผมจะเปรียบเทียบในเบื้องต้นว่า จะเขียนโค้ด CSS ยังไง ให้ง่าย ให้ดีต่อ Performance  เขียนอย่างไรให้กระชับ และโค้ดสั้น เป็นระเบียบ เพื่อให้เว็บไซต์ทำงานได้ดี โหลดไว

เขียน CSS อย่างไรให้ Good และ Bad

  1. เขียนโค้ดให้สั้นเข้าไว้
  2. Reuse(ใช้ซ้ำ) โค้ดให้มากที่สุด
  3. รวมลิงค์ไฟล์ CSS

1.เขียนโค้ดให้สั้นเข้าไว้

/* Bad */
header nav ul li a {...}
/* Good */
.primary-link {...}

จากโค้ดด้านบน /* Bad */ /* Good*/ การอ้างอิงหลายชั้นเกินแบบนี้ มันทำให้เว็บทำงานช้าขึ้นได้เลยน่ะ ฉะนั้น วิธีแก้ปัญหานี้คือ แทนที่จะอ้างอิงแบบยาวเหยียดแบบนี้ เรามาสร้างคลาส(Class) ที่เป็นของลิงค์เลยจะดีกว่าน่ะ เช่น .primary-link เวลาเว็บถูก render จะได้ไม่ต้องอ่านหลายชั้นเกิน และคนอ่านโค้ดก็เข้าใจได้ง่ายมาก

/* Bad */
button strong span {...}
button strong span .callout {...}
/* Good */
button span {...}
button .callout {...}

จากโค้ดด้านบน /* Bad */ /* Good*/ อันนี้จะละม้ายคล้ายกันกับด้านบน มี button อยู่ 2 ตัว แล้วเราอยากเขียน CSS ให้มันทำงานบางอย่าง แทนที่เราจะมานั่งเขียนโค้ดเพื่ออ้างอิงคลาสแบบยาวๆ เรามาทำให้มันสั้นลงซะ ชีวิตจะได้ง่ายขึ้น

2.Reuse(ใช้ซ้ำ) โค้ดให้มากที่สุด

/* Bad */
.news {
background: #eee;
border-radius: 5px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.social {
background: #eee;
border-radius: 5px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

จากโค้ดแย่ๆ ด้านบน สังเกตมันมีการแยกคลาสเป็น 2 ชุด ชุดแรกคือ .news และชุดที่สองคือ .social ซึ่งทั้งสองคลาสนี้ มีคุณสมบัติเหมือนกันทุกประการ ฉะนั้นเรามาปรับกันใหม่ให้ดีขึ้น

/* Good */
.news,
.social {
background: #eee;
border-radius: 5px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

จากคลาส 2 ชุด เรามาสร้างชุดคุณสมบัติ 1 ชุด แล้วเราจะไปใช้กับคลาส .news และ .social จะเห็นได้ว่า โค้ดสั้นลง อ่านง่ายขึ้น มีการ Reuse code แน่นอนเรื่อง Performance ดีขึ้นแน่นอน

3.รวมลิงค์ไฟล์

รวมลิงค์ไฟล์ CSS
รวมลิงค์ไฟล์ CSS

จากที่เราแยกหลายๆ ไฟล์ ควรนำมารวมเป็นไฟล์เดียวซะ หรือถ้าเป็นเว็บไซต์ใหญ๋ อาจจะจำเป็นต้องแยกเป็นไฟล์ ก็ควรลดให้เหลือน้อยที่สุดเท่าที่จะเป็นได้

อ่านเพิ่มเติม

http://learn.shayhowe.com/advanced-html-css/performance-organization/

Hasan Lebaesa

เริ่มทำงานกับ Web Agency กทม. ลาออกมาทำฟรีแลนซ์เต็มตัว และลาออกจากการเป็นฟรีแลนซ์ ก่อตั้งบริษัท, ปี 2019 ตั้งเป้าไว้ว่า จะเขียนบทความดีๆ วีคละ 1 บทความ.