ระเบียบวิธี BEM: Block, Element และ Modifier
ตั้งชื่อคลาส CSS ตามรูปแบบ Block__Element--Modifier เพื่อสร้างสไตล์คอมโพเนนต์ที่อธิบายตัวเองได้ มีความจำเพาะต่ำ และนำกลับมาใช้ซ้ำได้
ระเบียบวิธี BEM: Block, Element และ Modifier เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
BEM คืออะไร
BEM (บล็อก, องค์ประกอบ, ตัวปรับแต่ง) คือแบบแผนการตั้งชื่อ CSS ที่ทำให้สไตล์คาดเดาได้ นำกลับมาใช้ซ้ำได้ และไม่ขัดแย้งกัน การเข้ารหัสโครงสร้างคอมโพเนนต์ไว้ในชื่อคลาสช่วยกำจัดปัญหาการแย่งความสำคัญของตัวเลือกและการชนกันของสไตล์โดยไม่ตั้งใจ
บล็อก — คอมโพเนนต์แบบเอกเทศ
บล็อกคือคอมโพเนนต์อิสระที่นำกลับมาใช้ซ้ำได้ เช่น card, button และ nav ชื่อคลาสคือชื่อบล็อก ซึ่งเขียนด้วยตัวพิมพ์เล็กและใช้ยัติภังค์คั่น
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>องค์ประกอบ — ส่วนต่าง ๆ ของบล็อก
องค์ประกอบคือส่วนหนึ่งของบล็อกที่ไม่มีความหมายได้ด้วยตัวเอง ให้ใช้ขีดล่างคู่ในรูปแบบ block__element
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>ตัวปรับแต่ง — รูปแบบและสถานะ
ตัวปรับแต่งจะเปลี่ยนรูปลักษณ์หรือพฤติกรรมของบล็อกหรือองค์ประกอบ ให้ใช้ยัติภังคู่ในรูปแบบ block--modifier หรือ block__element--modifier
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>กฎ CSS ของ BEM
คลาส BEM มีความจำเพาะต่ำและเท่ากัน โดยแต่ละคลาสมีตัวเลือกเพียงหนึ่งรายการ จึงทำให้เขียนสไตล์ทับได้ง่าย ห้ามใช้ ID หรือตัวเลือกองค์ประกอบแบบซ้อนกัน เพราะจะเพิ่มความจำเพาะอย่างคาดเดาได้ยาก
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }BEM กับ Sass
ตัวเลือกแม่ & ของ Sass ช่วยให้เขียน BEM ได้กระชับขึ้น โดย CSS ที่คอมไพล์แล้วจะเหมือนกับ BEM แบบปกติทุกประการ
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}เมื่อใดควรสร้างบล็อกใหม่
ให้สร้างบล็อกใหม่เมื่อคอมโพเนนต์สามารถทำงานได้โดยลำพังและนำกลับมาใช้ซ้ำในบริบทต่าง ๆ ได้ ให้สร้างองค์ประกอบเมื่อส่วนนั้นมีความหมายเฉพาะภายในบล็อกใดบล็อกหนึ่งเท่านั้น
BEM หลีกเลี่ยงการซ้อนกัน
BEM ไม่สนับสนุนการซ้อนกันหลายชั้นใน HTML และ CSS องค์ประกอบที่อยู่ภายในองค์ประกอบอื่นยังคงเป็น block__element ไม่ใช่ block__element__subelement
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM กับ JavaScript
ให้ใช้คลาสแยกสำหรับการทำงานเฉพาะของ JavaScript เพื่อเป็นจุดเชื่อมพฤติกรรม โดยใช้คำนำหน้า js- วิธีนี้แยกสไตล์ออกจากสคริปต์ การเปลี่ยนชื่อคลาส BEM จึงไม่ทำให้พฤติกรรมของ JavaScript เสียหาย
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);การผสมบล็อก BEM
องค์ประกอบหนึ่งรายการสามารถมีคลาสของหลายบล็อกได้ เพื่อกำหนดสไตล์ตามบริบทโดยไม่ทำให้บล็อกเหล่านั้นผูกติดกัน
<button class="btn btn--primary form__submit">Submit</button>ข้อจำกัดของ BEM
ชื่อคลาสอาจยาวได้ BEM เหมาะที่สุดสำหรับทีมขนาดใหญ่และระบบการออกแบบที่ให้ความสำคัญกับความสอดคล้องของสไตล์ทั่วทั้งระบบ สำหรับเฟรมเวิร์กคอมโพเนนต์อย่าง React หรือ Vue ที่ใช้สไตล์จำกัดขอบเขต ประโยชน์ด้านเนมสเปซของ BEM จะมีความสำคัญน้อยลง
ตรวจสอบอย่างรวดเร็ว
ใน BEM card__title--truncated แทนสิ่งใด
ทบทวน: BEM
บล็อก: คอมโพเนนต์แบบเอกเทศ องค์ประกอบ (ขีดล่างคู่ __): ส่วนหนึ่งของบล็อก ตัวปรับแต่ง (ยัติภังคู่ --): รูปแบบหรือสถานะ ความจำเพาะต่ำและเท่ากัน หลีกเลี่ยงตัวเลือก ID และการซ้อนกันหลายชั้น ใช้คำนำหน้า js- สำหรับจุดเชื่อมกับ JavaScript เครื่องหมาย & ของ Sass ช่วยให้เขียน BEM ได้กระชับขึ้น เหมาะอย่างยิ่งสำหรับทีมขนาดใหญ่และระบบการออกแบบ
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “ระเบียบวิธี BEM: Block, Element และ Modifier” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ระเบียบวิธี BEM: Block, Element และ Modifier” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ระเบียบวิธี BEM: Block, Element และ Modifier”
ตั้งชื่อคลาส CSS ตามรูปแบบ Block__Element--Modifier เพื่อสร้างสไตล์คอมโพเนนต์ที่อธิบายตัวเองได้ มีความจำเพาะต่ำ และนำกลับมาใช้ซ้ำได้ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ระเบียบวิธี BEM: Block, Element และ Modifier” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ระเบียบวิธี BEM: Block, Element และ Modifier
- CSS Modules: ชื่อคลาสที่จำกัดขอบเขต
- CSS-in-JS: Styled-components และ Emotion
- Tailwind CSS: แนวทาง Utility-First