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

BEM: การตั้งชื่อบล็อก องค์ประกอบ และตัวปรับแต่ง

ใช้ระเบียบวิธี Block-Element-Modifier เพื่อสร้างชื่อคลาสที่คาดเดาได้และนำกลับมาใช้ใหม่ได้

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

BEM คืออะไร

BEM (บล็อก–องค์ประกอบ–ตัวปรับแต่ง) เป็นแบบแผนการตั้งชื่อที่สร้างชื่อคลาสซึ่งอธิบายตัวเองได้ ทำให้คอมโพเนนต์ CSS คาดเดาได้และมีเอกสารกำกับในตัว

บล็อก

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

  <div class="card">Card block</div>
  <nav class="nav">Nav block</nav>
  <button class="button">Button block</button>
  <form class="search-form">Search form block</form>

องค์ประกอบ

องค์ประกอบคือลูกของบล็อกที่ไม่มีความหมายนอกบล็อกนั้น องค์ประกอบใช้ขีดล่างสองตัว: .block__element

  <div class="card">
    <div class="card__image">Image</div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
    </div>
  </div>
  <nav class="nav">
    <div class="nav__item"><a class="nav__link" href="#">Link</a></div>
  </nav>

ตัวปรับแต่ง

ตัวปรับแต่ง คือรูปแบบย่อยหรือสถานะของบล็อกหรือองค์ประกอบ ตัวปรับแต่งใช้ขีดกลางสองตัว: .block--modifier

  <button class="button button--primary">Primary</button>
  <button class="button button--large">Large</button>
  <div class="card card--featured">Featured Card</div>
  <nav class="nav">
    <div class="nav__item nav__item--active">Active Item</div>
  </nav>

ตัวอย่าง BEM ฉบับสมบูรณ์

คอมโพเนนต์การ์ดที่ใช้การตั้งชื่อแบบ BEM:

  <div class="card card--featured">
    <div class="card__image" role="img" aria-label="Card image"></div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
      <p class="card__text">Content</p>
      <a class="button button--primary card__action" href="#">Read More</a>
    </div>
  </div>

โครงสร้าง CSS แบบ BEM

CSS ที่สอดคล้องกันสำหรับการ์ดแบบ BEM:

  <div class="card card--featured">
    <div class="card__image" role="img" aria-label="Card image"></div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
      <p class="card__text">Content</p>
      <a class="button card__action" href="#">Read More</a>
    </div>
  </div>

ประโยชน์ด้านความจำเพาะของ BEM

คลาส BEM ล้วนเป็นคลาสเดียว (ความจำเพาะ 0,1,0) ไม่มีตัวเลือกใดมีความจำเพาะมากกว่าตัวเลือกอื่น ดังนั้นการเขียนทับจึงทำได้ง่าย เพียงเพิ่มคลาสตัวปรับแต่งที่เหมาะสม

ข้อผิดพลาดที่พบบ่อยใน BEM

ควรหลีกเลี่ยงจุดที่ควรระวังเหล่านี้ใน BEM:

  • องค์ประกอบหลายระดับ: .card__body__title — เปลี่ยนเป็นโครงสร้างแบนด้วย .card__title
  • องค์ประกอบอยู่นอกบล็อกของตนใน HTML
  • การใช้ตัวเลือกองค์ประกอบ เช่น .nav__link a ซึ่งเพิ่มความจำเพาะโดยไม่จำเป็น

BEM กับพร็อพเพอร์ตีแบบกำหนดเองของ CSS

BEM กับตัวแปร CSS ทำงานร่วมกันได้อย่างเป็นธรรมชาติ ให้กำหนดโทเค็นระดับบล็อกที่ตัวปรับแต่งสามารถเขียนทับได้:

  <button class="button">Default</button>
  <button class="button button--danger">Danger</button>

เมื่อใดไม่ควรใช้ BEM

BEM ใช้ชื่อค่อนข้างยาวและไม่เหมาะกับคลาสยูทิลิตีหรือสไตล์ที่ใช้เพียงครั้งเดียว เฟรมเวิร์กแบบยูทิลิตีเป็นอันดับแรก เช่น เทลวินด์ สามารถใช้แทน BEM ได้ทั้งหมด ควรใช้ BEM กับไลบรารีคอมโพเนนต์ที่สร้างขึ้นเองเมื่อการตั้งชื่อเชิงความหมายมีความสำคัญ

BEM ในการใช้งานจริง

ระบบการออกแบบจำนวนมากใช้รูปแบบย่อยของ BEM หรือแบบแผนการตั้งชื่อที่คล้ายกัน ไวยากรณ์เฉพาะมีความสำคัญน้อยกว่าหลักการที่สอดคล้องกัน นั่นคือ บล็อก → องค์ประกอบ → ตัวปรับแต่ง ไม่มีการซ้อนลึก และมีความจำเพาะแบบแบน

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

ใน BEM ไวยากรณ์ใดใช้แทนองค์ประกอบที่ชื่อ "title" ภายในบล็อก "card"

สรุปทบทวน

BEM ใช้การตั้งชื่อแบบบล็อก องค์ประกอบ และตัวปรับแต่ง: .block__element--modifier คลาสทั้งหมดเป็นคลาสเดียว จึงมีความจำเพาะแบบแบนและเท่ากัน องค์ประกอบ (__) ต้องอยู่ภายในบล็อกของตน ตัวปรับแต่ง (--) ใช้สร้างรูปแบบย่อย ควรหลีกเลี่ยงการซ้อนลึก เช่น .card__body__title และเปลี่ยนเป็นโครงสร้างแบนด้วย .card__title

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

บทเรียน “BEM: การตั้งชื่อบล็อก องค์ประกอบ และตัวปรับแต่ง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “BEM: การตั้งชื่อบล็อก องค์ประกอบ และตัวปรับแต่ง”

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

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

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

บทเรียน “BEM: การตั้งชื่อบล็อก องค์ประกอบ และตัวปรับแต่ง” ใช้เวลานานแค่ไหน

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

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

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

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

  1. เหตุใดสถาปัตยกรรม CSS จึงสำคัญ
  2. BEM: การตั้งชื่อบล็อก องค์ประกอบ และตัวปรับแต่ง
  3. การจัดระเบียบไฟล์: ITCSS และรูปแบบ 7-1
  4. การหลีกเลี่ยงสงครามความจำเพาะ
← กลับไปที่ CSS Academy