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

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);
}

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

/* 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 ดีขึ้นอย่างแน่นอน

 

 

ที่มา : teeneeweb