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（エレメント）: ブロックの一部で、ブロックと論理的に関連付けられています。
- Modifier（モディファイア）: ブロックまたはエレメントの見た目や動作を変えるものです。
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（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: 他のCSSフレームワークと併用できますか？
BEMは、他のCSSフレームワークと併用できます。たとえば、Tailwind CSSやBootstrapを使用する場合でも、カスタムコンポーネントにBEMを適用できます。
結論
BEMは、CSSをモジュール化して管理しやすくするための明確な命名規則を提供します。この手法を活用することで、スタイルの衝突を防ぎ、保守性や再利用性が飛躍的に向上します。適切な命名規則の設計は、プロジェクトの品質と生産性の向上につながります。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。