こんにちは！Ryuseiです。
今回は、個人プロフィールサイトの制作を通して学んだ HTML/CSSの命名規則（特にBEM） と Emmet の使い方について、自分用の備忘録を兼ねてまとめておこうと思います。
前回の復習
前回、実際にサイトを作ってみて、HTMLでclassなどの命名を適当にしてしまうと、後から修正したり、CSSをあてる時に毎回、名前を確認するのが大変。
特にエラーが起きたやCSSがうまく機能していない時はとても苦労しました。
なので今回は、自分のコーディング効率のアップに加え、他の人との仕事時にも大切な命名規則
「BEM」と「Emmet」
について学んだことを簡単にまとめていきたいと思います。
CSSの命名規則が必要な理由
実際にサイトやページを作ってみると、クラスの命名を適当にしてしまうと、後から修正したり、他の人に引き継いだりするときにとても大変だと気づくと思います。
特に、レスポンシブ対応やグループ作業をする場合は、しっかり命名ルールを決めておくことで、作業の効率が上がり、頭のリソースも無駄に使わなくて済みます。
そこで便利なのが
「Emmet」と「BEM」です。
BEM（Block, Element, Modifier）の基本
BEMは、以下のように名前の付け方を分類することで、プロジェクトが成長してもメンテナンスしやすいコードを書けるようになる命名方法です。
- Block: コンポーネント全体（例:
.tab-menu） - Element: Block内の要素（例:
.tab-menu__head） - Modifier: 特定の状態やバリエーション（例:
.tab-menu__head--active）
例えば、プロフィールページで作った「タブメニュー」なら、以下のような名前をつけます。
activeに関してのルールも厳密なので、javascriptを記述する際も簡単にプロパティを指定できます。
<div class="tab-menu">
<div class="tab-menu__head"></div>
<div class="tab-menu__body"></div>
<div class="tab-menu__foot--active"></div>
</div>
また、以下のルールも大事です。
- idは使わず、クラスでスタイリング（idは上書きできず、崩壊しやすい）
- 英単語を省略しない（省略すると人によって解釈がズレる）
- キャメルケース・スネークケース・ケバブケースの統一
Emmetでコーディングを高速化
Emmetは、HTMLやCSSを素早く書くための拡張機能で、以下のようなショートカットがとても便利です。
| 入力 | 出力/結果 |
|---|---|
! + Tab | HTMLの雛形作成 |
h1.logo | <h1 class="logo"></h1> |
h1#logo | <h1 id="logo"></h1> |
ul>li*3 | 3つのリストを作成 |
p*3>Lorem | 3つのダミーテキストを作成 |
w:100 | width: 100%; |
lh:1.5 | line-height: 1.5; |
ta:c | text-align: center; |
a:0-a | margin: 0 auto; |
fz:16 | font-size: 16px;（※ fsはfont-styleになるので注意） |
これを覚えておくと、作業スピードがグッと上がり、階層構造も同時に記述できとても便利です。
Sassについても少し
CSSをより便利にするツールであるSassについても学びました。
Sassは「Emmet」と似たような機能で特定の方法で省略して名前を書くことで補完機能を使って素早く記述できるものです。
プロパティを「lh: 100」と記入することで「line-height: 100%」と自動補完をしてくれます。
- Node Sass, Ruby Sassは古い → Dart Sassに移行
- BEMとSassは相性が良い
- 機能追加や設計の変更時にもコーディング量を抑えられる
まとめ & 次回予告
今回は、CSSの命名規則（BEM）とEmmetの使い方を学びました。次回は、今回の学びを活かして、自分のプロフィールページのクラス名や構造をリファクタリングしていきます！
引き続き、学んだことをブログとしてまとめていくので、よろしくお願いします！