อย่า! Inline CSS ใน Component เลยนะ ขอร้อง
หลายท่านคงจะรู้จัก CSS ที่ใช้กับการทำ Web กันมาบ้าง หรือ ท่านที่เข้ามาอ่าน อาจจะมีทั้ง Expert หรือ บางท่านอาจจะปวดหัวทุกครั้งที่ต้องเจอมัน… วันนี้ผมอยากจะมานำเสนอว่า ทำไมเราไม่ควรที่จะ Inline CSS ภายใน Component หรือ บน HTML กัน
CSS
CSS เป็นภาษาที่ใช้ในการอธิบายรูปแบบ ลักษณะของ HTML ว่าจะให้มีรูปแบบอย่างไร (Stylesheet) เว็บสวยไม่สวย องค์ประกอบดีไม่ดีก็ CSS นี่แหละ… เนื่องจากบทความนี้ไม่ใช่การสอนเขียน CSS ผมจะไม่อธิบายอะไรเพิ่มเติมไปมากกว่านี้
Three way to insert CSS
เราสามารถยัด CSS ไว้ในเอกสารของเราได้ 3 วิธีด้วยกัน
- External CSS
- Internal CSS
- Inline CSS
External CSS
External CSS เป็นการจัดการเอกสารของคุณผ่านไฟล์ ทำให้เวลาคุณแก้ที่ไฟล์ CSS ไฟล์เดียว จะทำให้แก้ไขเอกสารของคุณทั้งหมด
// yourstyle.css
h1 {
font-size: 18px;
color: #ffffff;
}p {
padding: 5px 5px 5px 5px;
}
จากตัวอย่างข้างบน จะเป็นการบอก tag h1 ให้มี font-size:18px กับ color:#ffffff และ tag p ให้มี padding-top: 5px, padding-right: 5px, padding-bottom: 5px, padding-left: 5px;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="yourstyle.css">
</head>
<body>
<h1>External CSS</h1>
<p>iamgique</p>
</body>
</html>จากตัวอย่างนี้ เมื่อมีการใช้ tag h1 กับ p ก็จะมีค่าตาม Stylesheet ที่ได้ระบุไว้ด้านบน ถ้าเราแก้ที่ yourstyle.css แล้วมีการใช้ h1 ที่ไหน มันก็จะตามไปแก้ให้เราหมดเลย
Internal CSS
Internal CSS เป็นการยัด CSS เอาไว้ในไฟล์งานของเราเลย การทำแบบนี้จะเป็นการกำหนด Style แบบจัดการเฉพาะในไฟล์นี้เท่านั้น จะไม่ถูกนำไปใช้ในไฟล์อื่น
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 18px;
color: #ffffff;
} p {
padding: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<h1>External CSS</h1>
<p>iamgique</p>
</body>
</html>
Inline CSS
Inline CSS เป็นการยัด Style ที่ต้องการลงไปใน Element นั้น ๆ เลย ส่วนนี้ทำครั้งนึงก็ใช้ครั้งนึง ภายใต้ Element นั้น ๆ เท่านั้นในไฟล์เอกสารของคุณ
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="font-size: 18px; color: #ffffff;">External CSS</h1>
<p style="padding: 5px 5px 5px 5px;">iamgique</p>
</body>
</html>Why we shouldn’t use Inline CSS
Inline CSS เป็นวิธีที่ผมได้เอ่ยไปตั้งแต่ Topic ของบทความนี้เลย ว่า “อย่าทำ” ส่วนเหตุผลก็คือ ในชีวิตของเรา การทำ Website ขึ้นมาซักชิ้นนึงนั้น ก็จะต้องมีการทำหน้าเพจหลายหน้า ซึ่งบางหน้าก็อาจจะจำเป็นต้องใช้ body, button, a href, p, hx, div , table , thead, tbody, th, tr, td หรือ อื่น ๆ มากมาย ที่ควรจะเป็น Style เดียวกัน
การที่เราใช้ Inline CSS มันทำให้เราสะดวกเวลาต้องการจะแก้อะไรตรงนั้น แต่ทว่า เมื่อใดก็ตามที่สิ่งที่เราทำนั้น มันต้องใช้ในหลาย ๆ หน้า ยิ่งถ้าเกิดมีเพื่อนในทีมอีกหลายคน แล้วแต่ละคนไม่มีการใช้ External CSS แต่ทุกคนต่างทำ Inline CSS ความพังพินาศก็จะบังเกิด เพราะเราอาจจะ Copy ผิด หรือ ลืม หรือ ใด ๆ ก็ตาม ทำให้แต่ละหน้า button มันควรจะเหมือนกัน กลับไม่เหมือนกัน ผมเชื่อว่าหลายคนเคยเจอ เคยเป็น และ เคยทำ!!!
ก็ยังดีที่ถ้าทำ Web สมัยใหม่ ๆ หน่อยใช้ React, Angular หรือ Vue ที่ทำการแยก Component ทำให้ค่อนข้างสบายใจได้ว่า ใช้ button เดียวกัน แต่อย่างไรก็ดี อย่าไป Inline เลย…
How should we do?
ในกรณีที่คุณมั่นใจว่า Element ตรงนี้จะไม่มีใครเหมือนแน่ ๆ มีที่นี่ที่เดียวแน่นอน คุณอาจจะใส่ Inline CSS ลงไปก็ได้ แต่อย่างไรก็ดี ผมแนะนำให้คุณนำ Style ที่ต้องการ ไปใส่ใน External CSS ดีกว่าอ่านง่ายกว่า
ในกรณีที่คุณใช้ Stylesheet ที่เป็น Framework อย่างเช่น Bootstrap ที่เป็นที่นิยม แต่ว่าก็ยังมีหลายอย่างที่คุณต้องการจะทำให้เป็นเฉพาะของคุณ คุณอาจจะ Inline CSS ก็ได้ แต่อย่างไรก็ดี เราควรที่จะ Override CSS ด้วยการสร้าง Stylesheet file ขึ้นมาใหม่แล้วทำเป็น External CSS แทน
Conclusion
จากบทความข้างต้น จะเห็นได้ว่าการยัด CSS นั้นสามารถทำได้หลายวิธี ซึ่งเราควรเลือกใช้ให้เหมาะกับงาน เวลาจะใช้ Inline อยากให้คิดถึงอนาคตบ้าง คิดถึงเพื่อนบ้าง คิดถึงลูกค้าบ้าง คิดถึงทีมงานบ้าง เพราะการเขียน Web frontend นั้นมีการหยิบยกของเดิม ๆ มาใช้ ถ้าเราไป Inline หน้านึง แล้วอีกหน้าไม่ได้ทำ สิ่งที่เกิดขึ้นคือ ปุ่ม หรือ กรอบ หรือ เลย์เอ้า หรือ อื่น ๆ มันจะไม่เหมือนกัน เสียเวลานั่งตามแก้เยอะมาก เสียเวลาชีวิต…
ก็หวังว่าผู้อ่านที่อาจจะไม่ค่อยเข้าใจ CSS ได้รู้อะไรกับมันมากขึ้นนิดนึงนะครับ…
ถ้าหากใครอยากเรียนรู้มากขึ้น แนะนำ style-components กับ getbem
