มือใหม่หัดลอง styled-components

การเรียนพื้นฐาน css นั้น ใช้เวลาแค่ 15 นาทีก็สามารถเขียนได้ 
แต่มันอาจจะใช้เวลาเป็นปีๆ กว่าที่เราจะหาวิธีดีๆ จัดการกับ style

credit: https://medium.freecodecamp.org/a-5-minute-intro-to-styled-components-41f40eb7cd55

front-end developer ที่เขียน css มา จะทราบดีว่า css เป็นภาษาที่มีคำสั่งค่อนข้างจำกัด ไม่มีตัวแปร loop หรือ function ใดๆ เป็นภาษาที่เราแค่เขียน style ไปที่ element ที่เรากำหนดเท่านั้น

แม้ว่าหลายปีผ่านมานี้มีตัวช่วยที่เข้ามาทำให้การเขียนและจัดการ css ง่ายขึ้นอย่าง sass หรือ less กระทั่งการเขียน class แบบ BEM แต่ก็ไม่ได้แก้ปัญหาได้เต็ม 100% จนกระทั่งเร็วๆ นี้ JavaScript-based tools ก็ได้เริ่มเข้ามาช่วยแก้ปัญหาการจัดการกับ css ด้วยการปรับวิธีเขียน css นั่นเองค่ะ

styled-components เป็นหนึ่งใน js library ที่ช่วยให้เราสร้าง component จาก html element ต่างๆ เช่น div, span, a, p หรืออื่นๆ และใส่ styleให้กับเรา และเอาผลลัพธ์ที่ได้ไปใช้เสมือนเป็น component

แนวคิดของ styled-components คือการใส่ style ให้กับ component เล็กๆ ที่สามารถ reuse เพื่อนำไปใช้และแก้ไขได้อย่างมีประสิทธิภาพ อีกทั้งยังเอา css มาเขียนในรูปแบบของ programming ทำให้เพิ่มวิธีการจัดการคำสั่ง css ได้มากขึ้นอีกด้วยค่ะ แต่ถ้ายังไม่เห็นภาพ เรามาลองดูตัวอย่าง code กันดีกว่าค่ะ

เริ่มจาก project React ที่ได้มีการลง styled-components มาแล้ว 
(เราจะขอข้ามขั้นตอน install ไปนะคะ เนื่องจากสามารถดูได้ที่ https://www.styled-components.com/docs/basics#installation ค่ะ)

ที่ component react เราจะต้อง import styled-components เข้ามาก่อนค่ะ

ใส่ import styled-components

เขียน style โดยประกาศ const MainSection โดยที่ให้เท่ากับ styled ที่มี tag html เป็น section แล้วจึงใส่ค่า css ใน ` … ` ค่ะ

เวลาเรียกใช้ก็เหมือนกับเราเรียก tag html เลยค่ะ โดยจะต้องเปิดและปิด tag ให้เรียบร้อย

เวลา compile code ออกมาเราจะได้ <section class=.. ที่มีพื้นหลังสีแดงค่ะ 
แล้วเราจะสามารถใส่ style ให้ child element ได้โดยประกาศไว้ด้านใน const MainSection ได้เลยค่ะ

การเขียนแบบนี้เมื่อ compile ออกมาแล้วระบบจะทำการ generate class มาให้เองเลยค่ะ เพราะงั้นจึงอาจจะมีข้อเสียตรงที่เวลาเราจะ detect class หรือ element ต่างๆ อาจจะลำบากและก็ต้องปรับแนวการเขียนจากเดิมเล็กน้อยค่ะ เรามาดูการประยุกต์ใช้ของมันดีกว่าค่ะว่าอะไรบ้างที่แจ่ม..

component ปุ่มพื้นหลังขาว

ตอนนี้เรามี component ชื่อ MainBtn ที่มี html element คือ button อยู่ แล้วถ้าเราต้องการเพิ่มทางเลือกให้กับปุ่มนี้หละ เช่น ปุ่มขนาดเท่าเดิมเพิ่มเติมแค่เปลี่ยนสี text ตอบว่าทำได้โดยไม่ต้องเขียน class ใหม่เลยจ้า ดังนี้ค่ะ

extend css หลักการจะคล้ายกับการ extend ใน sass นะคะ เขียน code ตามภาพ

เพิ่มปุ่มเดิมที่ต่างกันแค่สี โดยการ extend css อีก component มา
ผลลัพธ์จากการ run code

แค่นี้เราก็จะได้ปุ่มอีกอันที่ถ้าเราปรับขนาดความกว้างความสูงที่ MainBtn แล้ว TomatoButton ก็จะเปลี่ยนตามด้วยค่ะ แต่ถ้าหากใครไม่ชอบท่า extend เราแนะนำให้ใช้การส่งค่า props แทน

ประกาศ PropTypes ก่อน
ประกาศ props ชื่อ primary หาก true จะให้ทำ style ที่ด้านล่างค่ะ
ส่ง props primary เป็น true สำหรับปุ่มที่ต้องการเรียกใช้

แค่นี้เราก็จะได้ปุ่มสองแบบ ดังนี้ค่ะ

ผลลัพธ์จากการ run code

ถ้าคิดว่ายังไม่ยืดหยุ่นมากพอ เรายังสามารถส่งล้างค่าเดิมกันไปเลยก็ยังได้

ตรงนี้เราจะเพิ่มการรับค่า props btnHeight มาด้วย ซึ่งเราจะเขียนไว้ว่าถ้าไม่ได้รับค่ามาให้มีค่าเดิม 30px ส่วน MainBtn ที่รับค่า btnHeight=”40 px” ปุ่มนั้นความสูงจะถูกแทนค่าด้วย 40 px ไปค่ะ

ผลลัพธ์จากการ run code

จะเห็นได้ว่าปุ่มสีน้ำเงินจะสูงกว่าปุ่มเดิมแล้ว! แบบนี้ก็ประหยัดการเขียน css ของเราไปได้อีก

ท้ายแต่ยังไม่สุด ถ้าเราต้องการ reuse style ทำท่าคล้ายๆ mixin นั้นก็ย่อมได้ค่ะ

ก่อนอื่นเพิ่ม css function จาก style-components แล้วสร้าง const border มา แล้วนำไปแปะไว้ที่ MainBtn ค่ะ ผลที่ได้คือ

ผลลัพธ์จากการ run code

ปุ่มเดิมของเรา ได้รับ style เส้นและขอบมนค่ะ แล้วถ้าเราเพิ่ม component อีกโดยที่จะใช้ style const border ก็จะได้ดังนี้ค่ะ

code ด้านบนคือเราสร้าง component อีกอันคือ SecondarySection ค่ะ แล้วใส่ style border เข้าไป

ผลลัพธ์จากการ run code

จะเห็นได้ว่าค่อนข้างคล้ายกับ mixin เลยใช่ไหมคะ แต่ว่าการประยุกต์ยังมีอีกหลายท่านะ ลองอ่านต่อได้ที่ https://www.styled-components.com/docs/advanced ค่ะ

จริงๆ ไม่นานมานี้เรามีโอกาสได้ลองเขียน styled-components อยู่บ้าง ต้องบอกเลยว่าทำไปแล้วจะต้องปรับลำดับความคิดเล็กน้อยค่ะ แต่โดยรวมในระยะยาวแล้วการปรับแก้ไขหรือเพิ่มเติมนั้นจะเพิ่มความเพลิดเพลินให้ developer อย่างแน่นอนค่ะ

หากใครสนใจตัวอย่างผลที่ได้จากการเขียน styled-components เชิญชมได้ที่นี่เลย!

https://www.noozup.me/writers/

สุดท้ายนี้ขอสรุปอีกทีว่าทำไมเราถึงควรใช้ Styled-Components

  1. ไม่ต้องมีไฟล์ style.css อีก เพราะ styled-components จะทำการพ่น css inline ไปที่หน้านั้นๆ เลยทำให้เราไม่ต้องโหลด css ของที่ไม่ได้ใช้ไปไปด้วย
  2. ใช้การส่ง props แทนใช้ class ถ้าเป็นการเขียน css ทั่วไปเราจะต้องเขียน class เพิ่มเพื่อเป็นการ override css หากต้องการใช้อะไรที่เหมือนกันแต่ปรับแค่บางจุด ซึ่งส่วนนี้ถ้าเราเขียน class เพิ่ม ก็จะทำให้เกิดคำสั่งที่มาทับ แต่ถ้าเป็น styled-components เท่ากับแค่เราส่งค่าไปจัดการกับ css นั่นเองค่ะ
  3. ปรับการเขียน tag html ให้ไม่ซับซ้อนและอ่านง่ายกว่าเดิม ไม่ต้องหา tag จนตาลายหรือกลัวที่จะปิด tag ผิดอีกต่อไป
  4. การเขียนแบบ components ทำให้เราหา css เจอง่ายมากขึ้น

เห็นแบบนี้แล้วจะไม่ใช้ styled-components คงจะไม่ได้แล้วสินะ 😊