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

CSS Modules: รูปแบบตามขอบเขต

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

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

CSS Modules คืออะไร

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

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

ตั้งชื่อไฟล์ CSS โดยใช้ .module.css (หรือ .module.scss สำหรับ Sass):

/* Button.module.css */
.button {
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

การนำเข้า CSS Modules

นำเข้าโมดูลเป็นออบเจ็กต์ JavaScript ชื่อคลาสจะกลายเป็นพร็อพเพอร์ตี:

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

function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)

คลาสที่ประกอบกัน

ใช้ composes เพื่อขยายคลาสจากอีกโมดูลหนึ่ง:

/* Button.module.css */
.primary {
  composes: base from "./Base.module.css";
  background: royalblue;
}

คลาสทั่วโลก

ใช้ :global() เพื่อยกเลิกการกำหนดขอบเขตเฉพาะที่สำหรับคลาสที่ระบุ:

/* styles.module.css */
.container :global(.third-party-class) {
  /* targets third-party className without scoping */
  color: red;
}

CSS Modules ใน Vite

Vite มีการรองรับ CSS Modules ในตัว ไฟล์ที่ตรงกับรูปแบบ *.module.css จะถูกประมวลผลโดยอัตโนมัติ:

// vite.config.js
export default {
  css: {
    modules: {
      localsConvention: 'camelCase' // .my-class → styles.myClass
    }
  }
}

CSS Modules ใน webpack

เปิดใช้โมดูลในการตั้งค่า css-loader:

{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]__[local]--[hash:base64:5]'
    }
  }
}

การประกอบชื่อคลาส

รวมคลาสจากหลายโมดูลโดยใช้เทมเพลตลิเทอรัลหรือไลบรารี clsx/classnames:

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

function Card({ featured }) {
  return (
    <div className={clsx(styles.card, featured && styles.featured)}>
      Content
    </div>
  );
}

ไม่มีต้นทุนขณะรันไทม์

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

การรองรับ TypeScript

สร้างคำจำกัดความชนิด TypeScript สำหรับ CSS Modules ได้โดยใช้ typed-css-modules หรือการตั้งค่า cssModuleTypes ของ Vite เพื่อเข้าถึงชื่อคลาสอย่างปลอดภัยตามชนิด

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

การเปรียบเทียบ CSS Modules:

  • ทำงานเฉพาะในเวลาสร้าง — ไม่มีต้นทุน JS ขณะรันไทม์
  • ทำงานร่วมกับ CSS/Sass มาตรฐาน — ใช้ไวยากรณ์ที่คุ้นเคย
  • ไม่รองรับสไตล์แบบไดนามิกผ่านการแทรกค่าด้วย JS
  • ยืดหยุ่นน้อยกว่าสำหรับสไตล์แบบไดนามิกที่ขับเคลื่อนด้วยธีม เมื่อเทียบกับ styled-components/Emotion

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

CSS Module ป้องกันชื่อคลาสชนกันระหว่างไฟล์คอมโพเนนต์สองไฟล์ที่แตกต่างกันได้อย่างไร

ทบทวน

CSS Modules จะกำหนดขอบเขตชื่อคลาสโดยอัตโนมัติด้วยการเปลี่ยนชื่อเหล่านั้นเป็นตัวระบุที่ไม่ซ้ำกันในเวลาสร้าง นำเข้าเป็นออบเจ็กต์ JavaScript แล้วเข้าถึงคลาสในฐานะพร็อพเพอร์ตี ใช้ :global() สำหรับตัวเลือกทั่วโลกที่ต้องการยกเว้นจากการกำหนดขอบเขต และใช้ composes สำหรับการประกอบคลาส การไม่มีต้นทุนขณะรันไทม์และการรองรับไวยากรณ์ CSS/Sass อย่างเต็มรูปแบบทำให้ CSS Modules เป็นทางเลือกที่มีน้ำหนักเบาสำหรับ CSS-in-JS เมื่อใช้กับสไตล์แบบคงที่

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

บทเรียน “CSS Modules: รูปแบบตามขอบเขต” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “CSS Modules: รูปแบบตามขอบเขต”

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

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

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

บทเรียน “CSS Modules: รูปแบบตามขอบเขต” ใช้เวลานานแค่ไหน

บทเรียน 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