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 包括三個主要元素：。
- 區塊：具有自身意義的獨立組件。
- 元素：區塊的一部分，邏輯上與其相關聯。
- 修飾符：改變區塊或元素的外觀或行為。
BEM 的命名規範如下所示：。
.block__element--modifierblock：區塊的元件名稱。element：屬於區塊的元素。modifier：表示特定狀態或樣式的變化。
實際範例
以下是一個簡單的範例。
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 設計
以下是應用 BEM 的 HTML 範例。
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 設計
為該 HTML 編寫對應的 CSS，如下所示。
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（區塊、元素、修飾符）命名規範定義模組化樣式，以提升可重用性及可維護性。
擴展樣式
讓我們來看看如何新增一個修飾符，使特定的選單項目變為非啟用狀態。
相應的 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 模組化並更易管理。透過這種方式，可以避免樣式衝突，並大幅提升可維護性與可重用性。設計合適的命名規範有助於提升專案品質與生產力。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。