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

CSS Modules: ชื่อคลาสที่จำกัดขอบเขต

เปิดใช้ CSS Modules ในโปรเจกต์ Vite หรือ webpack เพื่อจำกัดขอบเขตชื่อคลาสให้อยู่ในไฟล์คอมโพเนนต์โดยอัตโนมัติ และป้องกันสไตล์ส่วนกลางรั่วไหล

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

CSS Modules คืออะไร

CSS Modules จะเปลี่ยนชื่อคลาสขณะสร้างโปรแกรมโดยเพิ่มแฮชที่ไม่ซ้ำกัน ทำให้คลาสเหล่านั้นมีขอบเขตอยู่ภายในไฟล์คอมโพเนนต์ ชื่อคลาสอย่าง .card จะกลายเป็น .card_a1b2c3 จึงไม่มีทางชนกับสไตล์ของคอมโพเนนต์อื่นโดยไม่ตั้งใจ

CSS Modules ทำงานอย่างไร

นำเข้าไฟล์ CSS เป็นออบเจ็กต์ แล้วใช้พร็อพเพอร์ตีของออบเจ็กต์เป็นชื่อคลาส ตัวรวมโปรแกรมอย่าง Vite และ webpack จะจัดการการแปลงให้

// Button.module.css
.button {
  background: #6366f1;
  color: white;
  padding: 8px 16px;
}
.button--large {
  padding: 12px 24px;
}

// Button.tsx
import styles from './Button.module.css';

function Button({ large }: { large?: boolean }) {
  return (
    <button className={`${styles.button} ${large ? styles['button--large'] : ''}`}>
      Click me
    </button>
  );
}

ชื่อคลาสแบบไดนามิกด้วย clsx

ไลบรารี clsx ช่วยให้การประกอบชื่อคลาสแบบมีเงื่อนไขร่วมกับ CSS Modules ง่ายขึ้น

import clsx from 'clsx';
import styles from './Button.module.css';

function Button({ variant, disabled }: ButtonProps) {
  return (
    <button className={clsx(
      styles.button,
      styles[`button--${variant}`],
      disabled && styles['button--disabled']
    )}>
      ...
    </button>
  );
}

CSS แบบโกลบอลใน CSS Modules

ใช้ :global เพื่อประกาศคลาสที่ไม่ควรมีขอบเขตจำกัด เหมาะสำหรับเขียนทับคลาสของไลบรารีภายนอก

/* Scoped: */
.container { padding: 16px; }

/* Global (not scoped): */
:global(.react-datepicker) {
  font-family: inherit;
}

การประกอบ — การขยายคลาส

CSS Modules รองรับ composes เพื่อสืบทอดสไตล์จากคลาสอื่น รวมถึงคลาสจากโมดูลอื่นด้วย

/* utilities.module.css */
.flexRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Button.module.css */
.button {
  composes: flexRow from './utilities.module.css';
  background: #6366f1;
}

CSS Modules เทียบกับสไตล์จำกัดขอบเขตของ Vue

สไตล์จำกัดขอบเขตของ Vue และ CSS Modules ต่างก็ป้องกันสไตล์รั่วไหลไปทั่วทั้งระบบ แต่ทำงานต่างกัน โดยสไตล์จำกัดขอบเขตจะเพิ่มแอตทริบิวต์ข้อมูล ส่วน CSS Modules จะเปลี่ยนชื่อคลาส ทั้งสองแนวทางใช้ได้ดี และ CSS Modules ยังใช้กับ React ได้ด้วย

CSS Modules ใน Vite

Vite รองรับ CSS Modules มาให้พร้อมใช้งานสำหรับไฟล์ที่ลงท้ายด้วย .module.css ไม่จำเป็นต้องตั้งค่าเพิ่มเติม

TypeScript สำหรับ CSS Modules

ติดตั้ง typescript-plugin-css-modules หรือสร้างไฟล์ .d.ts สำหรับ CSS Modules ด้วยเครื่องมือ typed-css-modules เพื่อรับคำแนะนำการเติมชื่อคลาสโดยอัตโนมัติ

หลักการตั้งชื่อใน CSS Modules

เนื่องจากชื่อคลาสจะกลายเป็นพร็อพเพอร์ตีของ JavaScript จึงควรใช้ camelCase สำหรับชื่อคลาสใน CSS Modules เช่น .buttonPrimary แทน .button-primary เพราะยัติภังค์จำเป็นต้องเข้าถึงพร็อพเพอร์ตีด้วยวงเล็บเหลี่ยม

เมื่อใดควรใช้ CSS Modules

CSS Modules เหมาะอย่างยิ่งกับแอปพลิเคชัน React ที่ต้องการสไตล์จำกัดขอบเขตตามคอมโพเนนต์ แต่ไม่จำเป็นต้องใช้โซลูชัน CSS-in-JS แบบเต็มรูปแบบ Vite ร่วมกับ CSS Modules เป็นโซลูชันจัดการสไตล์ที่มีน้ำหนักเบาและไม่ต้องเสียค่าใช้จ่ายขณะทำงาน

CSS Modules เทียบกับ CSS-in-JS

CSS Modules: ไม่มีค่าใช้จ่ายขณะทำงาน ใช้ CSS ปกติ และมีประสิทธิภาพดีกว่า CSS-in-JS (styled-components): สไตล์แบบไดนามิกขณะทำงานและให้ JavaScript เป็นหลัก สำหรับแอปส่วนใหญ่ CSS Modules เรียบง่ายและรวดเร็วกว่า

ตรวจสอบอย่างรวดเร็ว

เมื่อใช้ CSS Modules ชื่อคลาส CSS จะเกิดอะไรขึ้น

ทบทวน: CSS Modules

นำเข้าไฟล์ .module.css เป็นออบเจ็กต์ ชื่อคลาสจะถูกกำหนดขอบเขตโดยอัตโนมัติด้วยแฮชที่ไม่ซ้ำกัน ใช้ :global() สำหรับสไตล์โกลบอลโดยตั้งใจ ใช้ composes เพื่อสืบทอดระหว่างโมดูล ใช้ clsx สำหรับชื่อคลาสแบบมีเงื่อนไข Vite รองรับ CSS Modules ในตัว และไม่มีค่าใช้จ่ายขณะทำงานเมื่อเทียบกับ CSS-in-JS

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

บทเรียน “CSS Modules: ชื่อคลาสที่จำกัดขอบเขต” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “CSS Modules: ชื่อคลาสที่จำกัดขอบเขต”

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

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

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

บทเรียน “CSS Modules: ชื่อคลาสที่จำกัดขอบเขต” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ระเบียบวิธี BEM: Block, Element และ Modifier
  2. CSS Modules: ชื่อคลาสที่จำกัดขอบเขต
  3. CSS-in-JS: Styled-components และ Emotion
  4. Tailwind CSS: แนวทาง Utility-First
← กลับไปที่ Frontend Academy