CSS และ BEM
บทความนี้อธิบายเกี่ยวกับ CSS และ BEM
YouTube Video
HTML สำหรับการแสดงตัวอย่าง
css-bem.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>BEM Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-bem.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS & BEM(Block Element Modifier)</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>BEM Example</h2>
20 </header>
21 <article>
22 <h3>BEM HTML Example</h3>
23 <section>
24 <header><h4>HTML</h4></header>
25<pre class="sample">
26<div class="button button--primary">
27 <span class="button__text">Click Me</span>
28</div>
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>BEM Example</h3>
34 <section>
35 <header><h4>HTML</h4></header>
36<pre class="sample">
37<header class="header">
38 <div class="header__logo">My Logo</div>
39 <nav class="header__nav">
40 <ul class="header__menu">
41 <li class="header__menu-item header__menu-item--active">Home</li>
42 <li class="header__menu-item">About</li>
43 <li class="header__menu-item">Contact</li>
44 </ul>
45 </nav>
46</header>
47</pre>
48 </section>
49 <header><h4>HTML+CSS</h4></header>
50 <section class="sample-view">
51 <header class="header">
52 <div class="header__logo">My Logo</div>
53 <nav class="header__nav">
54 <ul class="header__menu">
55 <li class="header__menu-item header__menu-item--active">Home</li>
56 <li class="header__menu-item">About</li>
57 <li class="header__menu-item">Contact</li>
58 </ul>
59 </nav>
60 </header>
61 </section>
62 </article>
63 <article>
64 <h3>BEM Example</h3>
65 <section>
66 <header><h4>HTML</h4></header>
67<pre class="sample">
68<header class="header">
69 <div class="header__logo">My Logo</div>
70 <nav class="header__nav">
71 <ul class="header__menu">
72 <li class="header__menu-item header__menu-item--active">Home</li>
73 <li class="header__menu-item">About</li>
74 <li class="header__menu-item">Contact</li>
75 <li class="header__menu-item header__menu-item--disabled">Disabled</li>
76 </ul>
77 </nav>
78</header>
79</pre>
80 </section>
81 <header><h4>HTML+CSS</h4></header>
82 <section class="sample-view">
83 <header class="header">
84 <div class="header__logo">My Logo</div>
85 <nav class="header__nav">
86 <ul class="header__menu">
87 <li class="header__menu-item header__menu-item--active">Home</li>
88 <li class="header__menu-item">About</li>
89 <li class="header__menu-item">Contact</li>
90 <li class="header__menu-item header__menu-item--disabled">Disabled</li>
91 </ul>
92 </nav>
93 </header>
94 </section>
95 </article>
96 </main>
97</body>
98</html>CSS และ BEM: แนวทางสำหรับการจัดการสไตล์อย่างมีประสิทธิภาพ
CSS เป็นภาษาพื้นฐานที่ใช้ในการกำหนดลักษณะของเว็บไซต์ อย่างไรก็ตาม การจัดการ CSS อย่างมีประสิทธิภาพอาจเป็นเรื่องที่ท้าทาย โดยเฉพาะสำหรับโปรเจ็กต์ขนาดใหญ่ BEM (Block Element Modifier) เป็นแนวทางการตั้งชื่อใน CSS ที่ออกแบบมาเพื่อแก้ไขปัญหาเหล่านี้และเพิ่มความสามารถในการนำกลับมาใช้ซ้ำและการดูแลรักษา
ความท้าทายของ CSS และความจำเป็นที่ต้องใช้ BEM
ความท้าทายของ CSS รวมถึงปัญหาดังต่อไปนี้:
- ชื่อในพื้นที่โกลบอลที่ชนกัน: ใน CSS ชื่อคลาสเป็นโกลบอล ซึ่งเสี่ยงต่อการชนกันระหว่างคอมโพเนนต์ต่างๆ
- การใช้ตัวเลือกที่ซับซ้อนมากเกินไป: ตัวเลือกลูกหลานหรือ ID ที่ซับซ้อนเกินไปจะเพิ่มความจำเพาะเจาะจง ทำให้การแก้ไขในอนาคตเป็นเรื่องยาก
- การลดลงของการนำกลับมาใช้ซ้ำ: สไตล์เฉพาะเจาะจงทำให้นำไปใช้ซ้ำในคอมโพเนนต์อื่นได้ยาก
BEM ถูกออกแบบมาเพื่อแก้ไขปัญหาเหล่านี้
แนวคิดพื้นฐานของ BEM
BEM ประกอบด้วย 3 องค์ประกอบหลัก:
- Block: คอมโพเนนต์ที่เป็นอิสระและมีความหมายในตัวเอง
- Element: ส่วนหนึ่งของ Block ที่เชื่อมโยงกับ Block นั้น
- Modifier: เปลี่ยนรูปลักษณ์หรือพฤติกรรมของ Block หรือ Element
รูปแบบการตั้งชื่อใน BEM เป็นดังนี้:
.block__element--modifierblock: ชื่อของคอมโพเนนต์ Blockelement: Element ที่เป็นส่วนหนึ่งของ Blockmodifier: แสดงสถานะหรือรูปแบบที่แตกต่างกัน
ตัวอย่างการใช้งานจริง
ด้านล่างนี้คือตัวอย่างที่ง่าย
1<div class="button button--primary">
2 <span class="button__text">Click Me</span>
3</div>buttonคือบล็อกbutton__textคือองค์ประกอบbutton--primaryคือการปรับแต่ง
ข้อดีของ BEM
ข้อดีของ BEM มีดังต่อไปนี้
- ความสม่ำเสมอ เนื่องจากการตั้งชื่อนั้นสม่ำเสมอ ทำให้โค้ดอ่านง่ายขึ้น
- การนำกลับมาใช้ซ้ำได้ ง่ายต่อการนำคอมโพเนนต์กลับมาใช้ซ้ำ
- การดูแลรักษา นักพัฒนาคนอื่นสามารถเข้าใจโค้ดได้ง่ายขึ้น จึงแก้ไขหรือปรับปรุงได้สะดวกกว่าเดิม
การสร้างโปรเจคด้วย BEM
การออกแบบ HTML
นี่คือตัวอย่าง HTML ที่ใช้แนวคิด BEM
1<header class="header">
2 <div class="header__logo">My Logo</div>
3 <nav class="header__nav">
4 <ul class="header__menu">
5 <li class="header__menu-item header__menu-item--active">Home</li>
6 <li class="header__menu-item">About</li>
7 <li class="header__menu-item">Contact</li>
8 </ul>
9 </nav>
10</header>การออกแบบ CSS
เขียน CSS ที่สอดคล้องกับ HTML ดังต่อไปนี้
1.header {
2 background-color: #333;
3 color: #fff;
4 padding: 10px;
5}
6
7.header__logo {
8 font-size: 24px;
9}
10
11.header__nav {
12 display: flex;
13 justify-content: space-around;
14}
15
16.header__menu {
17 list-style: none;
18 margin: 0;
19 padding: 0;
20 display: flex;
21}
22
23.header__menu-item {
24 margin: 0 10px;
25 padding: 5px 10px;
26}
27
28.header__menu-item--active {
29 font-weight: bold;
30 border-bottom: 2px solid #fff;
31}- CSS นี้กำหนดสไตล์แบบโมดูลาร์โดยใช้แนวคิด BEM (Block Element Modifier) เพื่อเพิ่มประสิทธิภาพในการนำกลับมาใช้ซ้ำและดูแลรักษา
การเพิ่มการออกแบบ
ขอดูวิธีการเพิ่มมอดิไฟเออร์ใหม่เพื่อทำให้เมนูรายการใดรายการหนึ่งไม่ใช้งาน
HTML ที่สอดคล้องกันจะมีลักษณะดังนี้
1<li class="header__menu-item header__menu-item--disabled">Disabled</li>1.header__menu-item--disabled {
2 opacity: 0.5;
3 pointer-events: none;
4}- CSS นี้กำหนดมอดิไฟเออร์เพื่อทำให้รายการเมนูที่ไม่ถูกใช้งานดูจางลงและป้องกันการคลิก
คำถามที่พบบ่อย
เมื่อใช้ BEM สามารถคำนึงถึงประเด็นต่อไปนี้ได้
Q1: ฉันจำเป็นต้องปฏิบัติตามการตั้งชื่อของ BEM อย่างเคร่งครัดหรือไม่?
ไม่จำเป็นต้องทำตามกฎการตั้งชื่อของ BEM อย่างเคร่งครัด แต่ควรรักษาความสม่ำเสมอไว้ กำหนดกฎที่เป็นหนึ่งเดียวในโครงการและให้แน่ใจว่าทีมทั้งหมดปฏิบัติตาม
Q2: การใช้ BEM จะทำให้ CSS มีความยืดยาวมากขึ้นหรือไม่?
การนำ BEM มาใช้อาจทำให้ชื่อคลาส CSS ยาวขึ้น แต่จะช่วยให้บทบาทของคอมโพเนนต์ชัดเจนยิ่งขึ้น ผลลัพธ์ก็คือ การบำรุงรักษาดีขึ้น และข้อดีมีมากกว่าความซ้ำซ้อน
Q3: สามารถใช้ BEM ควบคู่กับเฟรมเวิร์ก CSS อื่น ๆ ได้หรือไม่?
BEM สามารถใช้ร่วมกับเฟรมเวิร์ก CSS อื่น ๆ ได้ ตัวอย่างเช่น แม้จะใช้ Tailwind CSS หรือ Bootstrap คุณก็สามารถนำ BEM ไปใช้กับคอมโพเนนต์ที่กำหนดเองได้
สรุป
BEM ให้แนวทางการตั้งชื่อที่ชัดเจนเพื่อจัดระเบียบและทำให้ CSS จัดการได้ง่ายขึ้น การใช้วิธีนี้สามารถป้องกันความขัดแย้งของสไตล์ และเพิ่มประสิทธิภาพในการดูแลรักษาและการนำกลับมาใช้ซ้ำอย่างมาก การออกแบบแนวทางการตั้งชื่อที่เหมาะสมจะช่วยยกระดับคุณภาพและประสิทธิภาพของโครงการ
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย