สวัสดีครับพี่น้อง
วั้นนี้จะยกตัวอย่าง เรื่องที่น่าสนใจของ Frontend มาให้อธิบายให้ฟังกันสักหนึ่งยก นะครับ ฮ่าๆ โดยเรื่องที่จะนำมาเสนอ เกี่ยวกับ คำถามที่ใครหลายๆคน อาจจะเป็นมือใหม่ที่กำลังสงสัยว่าในยุคที่ css framework หรือ tool ที่ช่วยเหลือทางด้าน css มีตั้งมากมาย ทำให้อดสงสัยไม่ได้จริงๆว่า ยังต้องเรียนรู้ pure css ไหม (pure css คือการเขียน css แบบดัังเดิมโดยไม่ได้ ลงแพคเกจหรือเครื่องมือช่วยเหลือเช่น css framework)

ตอบแบบสั้นๆเลย ก็คือ “จำเป็นครับ”

เกริ่น

แน่นอนอยู่แล้วครับพวก css preprocessor , css framework อะไรก็แล้วต่างๆนาๆนั้นล้วนเกิดขึ้นมาจากการประยุคของ css (pure cs) ลองนึกดูนะครับสมมุติว่าเรา ใช่เจ้า css framework เช่น bootstrap โดยที่ไม่มีฐาน แต่เราก็ค่อยๆ เรียนรู้เรื่อง html class ของ bootstrap ปเรื่อยๆ ถ้าทำแบบนั้นกรอบเราจะอยู่แค่ bootstrap ครับ ทำให้ความสามรถในการใช้ pure css ในการแก้ไขบางจุดหรือปรับแต่งแก้ไข อาจทำได้ไม่ดีพอแต่ถ้าหากเรามีความสามรถพื้นฐานด้าน css อยู่บ้างหละ
แต่เป็นแบบนั้นก็ดีครับเพราะ ถ้าฐานเราแน่นพอการไปต่อยอดกับ css framework ก็จะไม่ใช่เรื่องยากครับ

ภาพรวม pure css

จากประสบการณ์ของผมเองที่เรียกได้ว่าชื่นชอบหลงไหลพวกหน้าตาของเว็บไซต์อยู่แล้วทำให้ผมค่อนข้างศึกษาเรียนรู้พื้นฐาน css ไปเยอะมากเรียกได้ว่าจะลงลึกเลยหละ ทำให้รู้ว่าความจริงแล้ว pure css ทำอะไรได้เยอะแยะ จนบางทีอาจจะยังไม่ต้องพึ่ง css framework นบางส่วนซะด้วยซ้ำ ตามที่กล่าวมาด้านบนถ้า pure css มันทำได้เยอะแยะเราก็ไม่ต้องใช้ css framework ก็ได้สิ

จะตอบว่าใช่ก็ไม่ผิด pure css ทำได้หลายอย่างจริงแต่ผลสุดท้ายแล้วบางอย่างยังไม่ค่อยโอเค กับการจัดการกับบางเรื่องเช่น

1.เรื่องของการรองรับบนเว็บไซต์แต่ละรุ่น บางกรณี style อาจไม่สามารถใช้ได้บน chrome ทำให้เราต้องมานั่ง เพิ่มนั่งแก้ style ให้กับหน้าตาเว็บเราโดยเสียเวลาในส่วนนี้ไปสะมาก

2.เรื่องของการที่จะต้องมานั่งทำให้หน้าตาเว็บไซต์แสดงผลให้เข้ากับขนาดหน้าจอของ แต่ละอุปกรณ์

3.ระบบโครงสรา้งที่ไม่แน่นอนเพราะเป็นการกำหนด style ที่มาจากตัวเราเองแต่ตรงนี้อาจแก้ได้ภายหลัง

โดยภาพรวมแล้วอาจพูดได้ว่าบางส่วนั้น เขียนโค้ดกันหนักมากไปเพื่อให้ได้ผลลัพธ์หน้ตาสักอัน ( too hard code :/ )

Css Framework คืออะไรหละ

เนื่องจาก pure css ยังตอบโจทย์ไม่มากพอทำให้ css framework เข้ามามีบทบาทโดยเจ้า css framework ความสามรถหรืออะไรก็แล้วแต่ที่เรานำมาใช้ได้เลย
เช่น guitar framework (css framework แบบสมมุติ )โดยมไม่จำเป็นต้องรู้เยอะว่า guitar framework นั้นภายในทำงานอย่างไร ผมเพียงแค่ต้องรู้ว่าเขาวางกรอบการทำงานมาอย่างไร ยกตัวอย่าง guitar framework จะต่งหน้าเว็บไซต์ด้วบการใช้class name ที่ guitar framework กำหนดมาโดยเฉพาะ เช่น ต้องการสร้าง การ์ดที่สวยงามรองรับหลายหน้าจอ บนหน้าเว็บไซต์สักหนึ่งอัน ใน pure css อาจต้องใช้การกำหนด style ไปมาหลายตัวซึ่งเราต้องมานั่งเขียนเองแต่ใน guitar framework ที่ใช่ class นั้น อาจกำหนดได้ว่า

<div class"gt-card gt-xl gr-sm gt-blink"></div>

ซึ่งตรงนี้จะเห็นได้ว่าเราเพียงแค่ใส่ class ที่ guitar framework มีมาให้ก็ทำให้เว็บของเราได้หน้าตามาอันหนึ่งละ

css framework ยังเข้ามาช่วยในหลายๆเรื่อง เช่น

1.มีโครงสรา้งการใช้งานจะอยู่ในกรอบเดียวกับ css framework ซึ่งตรงนี้ทำให้คนในทีมเข้าใจว่าเวลาจะปรับแก้ไข ต้องทำยังไง

2.รวดเร็วในการ style หน้าตาเว็บไซต์ เพียงแค่เรียกใช้ของที่เขาได้สรา้งมาไว้ก่อนแล้ว

3.มีการรองรับ style ในหลายๆหน้าเว็บไซต (cross browser)

4.สะดวกในเรื่องของ ปรับขนาดหน้าเว็บไซต์ตามอุปกรณ์

แต่ก็มีข้อด้อยตามมานะเช่นเรื่องของขนาดของ css framework
อาจมีขนาดมากไปหรือบางทีงานเรามีหน้าเพจไม่กี่หน้าเองไม่ใช่เว็บใหญ่โตซึ่ง(ตรงนี้ผมก็ไม่แน่ชัดเหมือนกันว่าเรื่องขนาดนั้นมีผลร้ายแรงอะไรมากไหมซึ่งเรื่องตรงนี้ต้องขออ๓ัยด้วยครับที่ยังไม่ชัดเจน)

เอ้าถ้า css framework มันดีขนาดี้ไม่ต้องเรียนรู้ pure css แล้วใช่ไหม อย่าลืมครับ pure css เป็นฐานครับ

จำไว้นะครับยิ่งร ู้css ฐานเยอะยิ่งมีความสามารถในการแก้ไขและต่อยอดได้ดีมากครับ