ทำไมต้อง UnoCSS?
แรงจูงใจ
เราแนะนำให้คุณอ่านบล็อกโพสต์ Reimagine Atomic CSS ที่เขียนโดยผู้สร้าง UnoCSS Anthony Fu เพื่อเข้าใจแรงจูงใจเบื้องหลัง UnoCSS ได้ดีขึ้น
UnoCSS แตกต่างจาก X อย่างไร?
Windi CSS
UnoCSS ถูกเริ่มต้นโดยหนึ่งในสมาชิกทีม Windi CSS โดยได้รับแรงบันดาลใจมากมายจากงานที่เราทำใน Windi CSS ในขณะที่ Windi CSS ไม่ได้รับการดูแลรักษาอย่างแข็งขันแล้ว (ตั้งแต่มีนาคม 2023) คุณอาจพิจารณา UnoCSS เป็น "ผู้สืบทายจิตวิญญาณ" ของ Windi CSS
UnoCSS สืบทอดธรรมชาติแบบ on-demand ของ Windi CSS attributify mode, shortcuts, variant groups, compilation mode และอื่นๆ อีกมากมาย นอกจากนี้ UnoCSS ยังสร้างขึ้นจากศูนย์ด้วยความสามารถในการขยายและประสิทธิภาพสูงสุด ทำให้เราสามารถแนะนำฟีเจอร์ใหม่ๆ เช่น pure CSS icons, valueless attributify, tagify, web fonts ฯลฯ
ที่สำคัญที่สุด UnoCSS ถูกแยกออกมาเป็นเครื่องยนต์ atomic CSS โดยที่ฟีเจอร์ทั้งหมดเป็นตัวเลือก และทำให้ง่ายต่อการสร้าง conventions ของคุณเอง design system ของคุณเอง และ presets ของคุณเอง - ด้วยการรวมกันของฟีเจอร์ที่คุณต้องการ
Tailwind CSS
ทั้ง Windi CSS และ UnoCSS ได้รับแรงบันดาลใจมากมายจาก Tailwind CSS เนื่องจาก UnoCSS ถูกสร้างขึ้นจากศูนย์ เราจึงสามารถมีภาพรวมที่ดีว่า atomic CSS ถูกออกแบบอย่างไรด้วยศิลปะก่อนหน้านี้ และถูกสร้างเป็น API ที่สง่างามและทรงพลัง ด้วยเป้าหมายการออกแบบที่ค่อนข้างแตกต่างกัน มันไม่ใช่การเปรียบเทียบแอปเปิ้ลกับแอปเปิ้ลกับ Tailwind CSS แต่เราจะพยายามระบุความแตกต่างบางประการ
Tailwind CSS เป็น PostCSS plugin ในขณะที่ UnoCSS เป็นเครื่องยนต์แบบ isomorphic พร้อมการผสานรวมระดับสูงกับเครื่องมือสร้าง (รวมถึง PostCSS plugin) ซึ่งหมายความว่า UnoCSS สามารถยืดหยุ่นได้มากกว่าในการใช้ในสถานที่ต่างๆ (ตัวอย่างเช่น CDN Runtime ซึ่งสร้าง CSS แบบ on-the-fly) และมีการผสานรวมลึกกับเครื่องมือสร้างเพื่อให้ HMR ประสิทธิภาพ และประสบการณ์นักพัฒนาที่ดีขึ้น (ตัวอย่างเช่น Inspector)
นอกเหนือจากการแลกเปลี่ยนทางเทคนิค UnoCSS ยังออกแบบมาเพื่อขยายและปรับแต่งได้อย่างเต็มที่ ในขณะที่ Tailwind CSS มีความเห็นมากกว่า การสร้าง design system แบบกำหนดเอง (หรือ design tokens) บน Tailwind CSS อาจเป็นเรื่องยาก และคุณไม่สามารถออกจาก conventions ของ Tailwind CSS ได้จริงๆ ด้วย UnoCSS คุณสามารถสร้างอะไรก็ได้ที่คุณต้องการด้วยการควบคุมเต็มรูปแบบ ตัวอย่างเช่น เราได้ใช้ utilities ที่เข้ากันได้กับ Tailwind CSS ทั้งหมดภายใน preset เดียว และมี community presets ที่ยอดเยี่ยม มากมายที่ใช้ปรัชญาที่น่าสนใจอื่นๆ
ขอบคุณความยืดหยุ่นที่ UnoCSS จัดหาให้ เราสามารถทดลองกับฟีเจอร์ที่เป็นนวัตกรรมใหม่ๆ ได้มากมาย เช่น:
เนื่องจากเป้าหมายการออกแบบที่แตกต่างจาก Tailwind CSS UnoCSS ไม่รองรับระบบ plugin หรือการกำหนดค่าของ Tailwind CSS ซึ่งหมายความว่าอาจทำให้ยากต่อการย้ายจากโปรเจกต์ Tailwind CSS ที่ปรับแต่งอย่างหนัก นี่เป็นการตัดสินใจที่ตั้งใจเพื่อทำให้ UnoCSS มีประสิทธิภาพสูงและขยายได้ และเราเชื่อว่าการแลกเปลี่ยนนี้คุ้มค่า