0Pricing
CSS Academy · บทเรียน

Vanilla Extract: CSS-in-JS แบบไม่ใช้ขณะทำงาน

เขียน CSS ที่ปลอดภัยด้านชนิดข้อมูลด้วย Vanilla Extract ซึ่งสร้างไฟล์ CSS แบบคงที่ขณะสร้างโปรแกรม

Vanilla Extract: CSS-in-JS แบบไม่ใช้ขณะทำงาน เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

Vanilla Extract คืออะไร

Vanilla Extract เป็นไลบรารี CSS-in-JS ที่ไม่เพิ่ม ต้นทุนขณะรันไทม์ เลย CSS จะถูกกำหนดใน TypeScript และคอมไพล์เป็นไฟล์ CSS แบบคงที่ในเวลาสร้าง ทำให้ได้ความปลอดภัยด้านชนิดโดยไม่ต้องแทรกสไตล์ขณะรันไทม์

หลักการสำคัญ

Vanilla Extract แตกต่างจาก styled-components หรือ Emotion ตรงที่ทำงานทั้งหมดในเวลาสร้าง การนำเข้า JavaScript เป็น API สำหรับเขียนสไตล์ ส่วนผลลัพธ์คือไฟล์ CSS ธรรมดา ไม่มี JavaScript ทำงานบนไคลเอนต์เพื่อใช้สไตล์

รูปแบบการตั้งชื่อไฟล์

ไฟล์ Vanilla Extract ใช้นามสกุล .css.ts:

// button.css.ts
import { style } from '@vanilla-extract/css';

export const button = style({
  background: 'royalblue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '4px',
  cursor: 'pointer',
  ':hover': {
    background: '#2563eb'
  }
});

การใช้งานในคอมโพเนนต์

นำเข้าชื่อคลาสที่ส่งออกมาแล้วนำไปใช้:

import { button } from './button.css.ts';

function Button({ children }) {
  return <button className={button}>{children}</button>;
}

สัญญาธีม

ฟีเจอร์ที่ทรงพลังที่สุดของ Vanilla Extract คือการกำหนดสัญญาธีม (รูปร่างของโทเค็น) แล้วสร้างหลายธีมที่ทำตามสัญญานั้น:

import { createTheme, createThemeContract } from '@vanilla-extract/css';

const contract = createThemeContract({
  color: { primary: null, bg: null }
});

export const lightTheme = createTheme(contract, {
  color: { primary: '#3b82f6', bg: '#ffffff' }
});

export const darkTheme = createTheme(contract, {
  color: { primary: '#60a5fa', bg: '#111827' }
});

styleVariants

สร้างรูปแบบต่าง ๆ ของสไตล์โดยไม่ต้องเขียนซ้ำ:

import { styleVariants } from '@vanilla-extract/css';

export const variants = styleVariants({
  primary: { background: 'royalblue' },
  danger:  { background: 'crimson' },
  ghost:   { background: 'transparent', border: '1px solid royalblue' }
});

// <Button className={variants[variant]}>

สูตรด้วย @vanilla-extract/recipes

ฟังก์ชัน recipe จากแพ็กเกจ recipes ช่วยรวมสไตล์พื้นฐานและรูปแบบต่าง ๆ ได้อย่างเป็นระเบียบ:

import { recipe } from '@vanilla-extract/recipes';

export const button = recipe({
  base: { padding: '10px 20px', borderRadius: '4px' },
  variants: {
    color: {
      primary: { background: 'royalblue', color: 'white' },
      danger:  { background: 'crimson', color: 'white' }
    },
    size: {
      sm: { fontSize: '0.875rem' },
      lg: { fontSize: '1.25rem' }
    }
  }
});

Sprinkles สำหรับคลาสยูทิลิตี

@vanilla-extract/sprinkles จะสร้างคลาสยูทิลิตีจากชุดโทเค็น คล้าย Tailwind ที่ปลอดภัยตามชนิดและไม่มีต้นทุนขณะรันไทม์:

ความปลอดภัยด้านชนิด

เนื่องจากสไตล์เป็นออบเจ็กต์ TypeScript คุณจึงได้รับการเติมโค้ดอัตโนมัติใน IDE และการตรวจสอบชนิดสำหรับชื่อและค่าพร็อพเพอร์ตี CSS อย่างเต็มรูปแบบ การพิมพ์ชื่อพร็อพเพอร์ตีผิดจะถูกตรวจพบในเวลาสร้าง ไม่ใช่ขณะรันไทม์

การทำงานร่วมกับเครื่องมือสร้าง

Vanilla Extract ทำงานร่วมกับ Vite, webpack, esbuild และ Next.js ผ่านอะแดปเตอร์เฉพาะ ไฟล์ CSS ที่แยกออกมาจะถูกให้บริการเป็นไฟล์คงที่

เมื่อใดควรเลือก Vanilla Extract

เลือก Vanilla Extract เมื่อคุณต้องการ:

  • ความปลอดภัยด้านชนิดของ TypeScript อย่างเต็มรูปแบบสำหรับสไตล์
  • ไม่มีต้นทุนส่วนเกินขณะรันไทม์ของ CSS-in-JS
  • ผลลัพธ์เป็น CSS แบบคงที่เพื่อประสิทธิภาพสูงสุด
  • ระบบจัดการธีมที่แข็งแกร่งพร้อมสัญญาโทเค็นที่ตรวจสอบชนิดได้

ตรวจสอบความเข้าใจ

ข้อได้เปรียบด้านประสิทธิภาพที่สำคัญของ Vanilla Extract เมื่อเทียบกับ CSS-in-JS ขณะรันไทม์อย่าง styled-components คืออะไร

ทบทวน

Vanilla Extract เป็นไลบรารี CSS-in-JS ที่เน้น TypeScript เป็นหลักและไม่มีต้นทุนขณะรันไทม์ กำหนดสไตล์ในไฟล์ .css.ts โดยใช้ออบเจ็กต์ JavaScript ที่ปลอดภัยตามชนิด เวลาสร้างจะสร้างไฟล์ CSS แบบคงที่ สัญญาธีมช่วยรองรับหลายธีมพร้อมการตรวจสอบชนิด ส่วน styleVariants และ recipe ช่วยจัดการรูปแบบต่าง ๆ ของคอมโพเนนต์ได้อย่างเป็นระเบียบ การไม่มีต้นทุนขณะรันไทม์ทำให้เหมาะสำหรับแอปพลิเคชันที่ให้ความสำคัญกับประสิทธิภาพเป็นพิเศษ

คำถามที่พบบ่อย

บทเรียน “Vanilla Extract: CSS-in-JS แบบไม่ใช้ขณะทำงาน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Vanilla Extract: CSS-in-JS แบบไม่ใช้ขณะทำงาน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Vanilla Extract: CSS-in-JS แบบไม่ใช้ขณะทำงาน”

เขียน CSS ที่ปลอดภัยด้านชนิดข้อมูลด้วย Vanilla Extract ซึ่งสร้างไฟล์ CSS แบบคงที่ขณะสร้างโปรแกรม คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “Vanilla Extract: CSS-in-JS แบบไม่ใช้ขณะทำงาน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. Styled-components: ลิเทอรัลแม่แบบแบบติดป้าย
  2. Emotion: css() และ styled()
  3. CSS Modules: รูปแบบตามขอบเขต
  4. Vanilla Extract: CSS-in-JS แบบไม่ใช้ขณะทำงาน
← กลับไปที่ CSS Academy