บทความ IT เจ๋งๆ

ปัจจุบันการพัฒนา Frontend เติบโตขึ้นอย่างมาก การเริ่มทำ CSS ตั้งแต่ต้นในแต่ละ Project รวมทั้งการเลือก CSS Frameworks ที่เหมาะสม ไม่ใช่เรื่องง่ายและใช้เวลานาน Junior Frontend หรือ Backend Developers อาจมีคำถามเกี่ยวกับ CSS Frameworks ที่ดีที่สุด และบทความนี้จะมาแนะนำถึง CSS Frameworks ที่ดีที่สุดในปี 2021 ซึ่งเป็นความเห็นส่วนตัวของคุณ @maisonfutari

CSS Frameworks มีอยู่ 3 ประเภท

ก่อนที่เราจะลงลึกในรายละเอียด คุณต้องเข้าใจถึง CSS Framework 3 ประเภทที่แตกต่างกัน สิ่งสำคัญก็คือ การตัดสินใจเพื่อเลือกใช้ให้เหมาะสมกับงาน

1. Preprocessors & CSS Transformers

Build-Time Frameworks เหล่านี้ โดยทั่วไปแล้วมันไม่ได้แสดงผล CSS แต่พวกมันจะเพิ่ม Features อื่นเข้าไปและใช้งานเพื่อเขียน CSS ได้เร็วขึ้น

Frameworks ที่ได้รับความนิยม ได้แก่ SASS, Less, Stylus และ PostCSS

แต่ละ Framework เองก็มี Frameworks หรือ Plugins อื่น ๆ ที่รองรับอยู่เช่นกัน อย่างเช่น “Susy” ที่เขียนใน SASS เพื่อใช้สร้าง Grid Layouts ได้รวดเร็วขึ้น คุณมักจะเห็นพวกมันรวมอยู่ใน Frontend Frameworks หรือ Boilerplates

แต่จะว่าไป พวกมันก็ไม่ใช่ CSS UI Frameworks อย่างแท้จริง ซะทีเดียว

2. UI Kit & Component-based CSS Frameworks

นี่คือ CSS Frameworks ที่ถูกใช้งานมากที่สุดตัวหนึ่ง 

พวกมันมาพร้อมกับ Prebuilt และ UI ที่โดดเด่น นี่เป็นวิธีที่เร็วที่สุดที่คุณสามารถใช้ในการสร้าง Interface ด้วย CSS

แต่พวกมันก็มีข้อเสียด้วยเช่นกัน HTML Structure ส่วนใหญ่มักถูกกำหนดไว้ล่วงหน้าและ การ Design ก็ไม่ได้ถูก Customize ได้ง่ายเสมอไป

โดยสรุป ก็คือ พวกมันมีความยอดเยี่ยม

ตัวอย่างของ Frameworks เช่น Bootstrap, Foundation, Skeleton, Materialize, Milligram และ Bulma

3. Atomic / Utility-First CSS Frameworks

Atomic CSS และ Utility-First CSS ก็มี Concept ที่คล้ายกันมาก พวกมันได้รับความนิยมอย่างมากในช่วงไม่กี่ปีที่ผ่านมา ด้วยเหตุผลหลัก 2 ประการก็คือ React ที่มาพร้อมกับ Styled-Components และ Tailwind CSS

โดยสรุปแล้ว ก็คือ Concepts ทั้งคู่ ประกอบด้วย การเขียน CSS Classes หรือ Properties ได้โดยตรงบน HTML

นั่นคือ มันมีความยืดหยุ่นอย่างมาก คุณสามารถสร้าง HTML Structure  ได้ตามที่คุณต้องการ แต่หากจะใช้มันสร้าง UI ก็ดูจะเป็นวิธีที่ช้ากว่าการใช้ Component-Based CSS Frameworks

แล้ว CSS Framework ที่ดีที่สุดคืออะไร?

Framework ที่ดีที่สุด ขึ้นอยู่กับ 3 ปัจจัย คือ DESIGN, TIME, TEAM

• ถ้าการ Design เป็นแบบง่าย ๆ หรือไม่มีการ Design ก็ใช้ Bulma หรือ Bootstrap
• ถ้าการ Design มีความซับซ้อน และคุณมีเวลาทำ ก็ใช้ Tailwind CSS
• ถ้าการ Design มีความซับซ้อน แต่คุณไม่มีเวลาทำมากนัก ก็ใช้ Bulma + Custom CSS ที่มีให้ใช้อยู่มากมาย
• หากต้องการสร้าง Design System ก็ใช้ Tailwind CSS

นั่นคือ มันขึ้นอยู่กับขนาดของทีม และทักษะของคนใน Team ด้วย ซึ่งหมายความว่า ไม่มี Framework ใด ที่สมบูรณ์แบบในทุกสถานการณ์

สำหรับ Scenarios ส่วนใหญ่อย่าง Webapps, Admin Dashboards และ Landing Pages ทั่วไปแล้ว Component-Based Framework อย่าง Bulma นั้นดูน่าจะเหมาะสมที่สุด

สำหรับ Landing Page เฉพาะทาง หรือ Pages/Webapps ที่เน้นการ Design เป็นอย่างมาก Utility-First Framework อย่าง Tailwind ดูจะเหมาะสมที่สุด

ทำไม Bulma ถึงดูน่าใช้งานมากกว่า Bootstrap และ Frameworks อื่น ๆ

• Foundation ค่อนข้างจะเก่าและ Default Design นั้นยากต่อการ Customize
• ส่วนของ JavaScript ของ Bootstrap 4 ยังต้องพึ่งพา jQuery แต่ใน v5 ดูเหมือนจะใช้ Pure JavaScript
• Skeleton และ Milligram ดูค่อนข้างจะพื้นฐานเกินไปสำหรับ Project ส่วนใหญ่
• Materialize ปรับแต่งไม่ง่ายนัก และค่อนข้างจะล้าสมัยไปหน่อย

จุดเด่นของ Bulma:

• มี Components มากมายให้เลือกใช้
• โดย Default แล้วมัน Clean และ Customize ได้ง่ายด้วย SASS
• มันมี Set ของ Utility-Classes เป็นของตัวเอง
• คุณสามารถ Load เฉพาะสิ่งที่คุณต้องการและสามารถ Expand ได้ง่าย
• Document ค่อนข้างชัดเจนและอ่านง่าย (ซึ่งถือว่าเป็นเรื่องสำคัญอย่างมาก)

จุดด้อยของ Bulma:

• ไม่สามารถ Customize ทุกอย่างได้ และในบางสถานการณ์คุณต้องทำการ Override CSS

ทำไม Tailwind ถึงเหนือว่า Frameworks อื่น ๆ (เช่น ในเรื่องของ Styled-Components)

• Tailwind CSS มี Document ที่ยอดเยี่ยมและได้รับการปรับปรุงให้ดีขึ้นอยู่เสมอ
• มีการเพิ่ม CSS Gradients, Native Grids & Transforms ไปยัง Utility Classes
• Tailwind CSS ยังมี Prebuilt Templates เป็นจำนวนมาก อย่าง Official Tailwind UI
• CSS-in-JS หรือ Atomic CSS Frameworks อย่าง Styled-Components และ ACSS.io ดูจะไม่เหมือน CSS เอาซะเลย Performance ก็ค่อนข้างดีกว่า เนื่องจากมันสร้าง Stylesheet ได้ทันทีตามสิ่งที่คุณเขียน
• ในประเด็นของ Separation of Concerns (SOC) ก็ค่อนข้างมีประสิทธิภาพ
• หากเทียบกับ Utility-First Frameworks อย่าง Tachyons ดูเหมือน Tailwind จะมีความ Friendly กับ Developer มากกว่า

จุดด้อยของ Tailwind:

• อาจมีการ Compile ที่ช้าลงเมื่อ Project ของคุณมีขนาดใหญ่ขึ้น แต่ JIT Compiler ใหม่จะสามารถแก้ไขเรื่องนี้ได้
• มันจะไม่ถูกปรับเปลี่ยนเลย หากคุณสร้าง Apps ที่ต้องสร้าง Custom CSS อย่าง Canva หรือ Template Builders อย่าง Webflow

สรุป

Bulma ดูจะเป็น Component-Based CSS Framework ที่ดีที่สุด แต่มันอาจไม่เหมาะสำหรับการ Design ที่เป็นเฉพาะทางบางอย่าง หรือสำหรับสร้าง UI-Kit หรือ Design System ที่เป็นของคุณเอง

Tailwind ดูจะเป็น Atomic/Utility-First CSS Framework ที่ดีที่สุด หากคุณต้องการ UI-Kit, Design System หรือการ Design Pages เฉพาะทางเป็นของคุณเอง

สำหรับทั้ง 2 กรณีนี้ คุณอาจต้องเขียน CSS เพิ่มเติมอีกเล็กน้อยสำหรับ Projects ที่มีขนาดกลาง-ใหญ่

Bootstrap v5 จะมีการสร้าง Set ของ SVG Icons เป็นของตัวเอง

ที่มา:  https://itnext.io/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

• 9 Web Apps ที่มีประโยชน์สำหรับ Web Developers
• 4 วิธี ที่ช่วยยกระดับ Python Code ให้มีประสิทธิภาพมากขึ้น
• 6 HTML Features ที่ไม่ค่อยมีใครสนใจ แต่มีประสิทธิภาพมาก