WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： furuhashi
カテゴリー： マークアップ >CSS

CSSを書いていて「このスタイル、どこで使ってたっけ…？」と迷ったことはありませんか？
私もそんな経験があり、自分でメンテしやすく、チームで共有しやすいCSS設計はないかと試行錯誤してきました。
そんな悩みを解決してくれたのが「Sass×BEM」の組み合わせです。この記事では、その実践方法をご紹介します。
個人制作はもちろん、チーム開発や大規模案件でも役立つ内容になっています。

Sassの振り返り

Sass（Syntactically Awesome Style Sheets）は、CSSに「変数」「ネスト」「演算」「ミックスイン（mixin）」などの機能を追加する拡張言語です。
主な特徴は以下のとおりです。

• 変数
  色やフォントサイズなどを$primary-color: #3498db;のように定義し、使い回しが簡単
• ネスト
  セレクタを入れ子で書くことで階層構造を視覚的に表現
• 演算
  width: 100% / 3;などで値を計算
• ミックスイン
  よく使うスタイルをまとめて再利用

書いたSassはコンパイル時に自動でプレフィックス付与や不要なコメント除去なども行い、最終的にブラウザで読み込める標準CSSを生成します。

BEMとSassの関係性

BEM(Block–Element–Modifier)は「命名規則」のひとつであるのに対し、Sassは「書き方を拡張する仕組み」です。

両者を組み合わせることで…
命名の一貫性を保ちつつ、容易に書けます。

Sassのネストと&演算子で、BEMのブロック／要素／修飾子を効率的に定義できます。

大規模開発での可読性向上
BEMの独立性により、コンポーネント単位でのスタイル管理が容易に。Sassで構造を整理するとさらに分かりやすくなります。

変数やミックスインでBEM命名を自動化
よく使う命名パターンをミックスイン化し、手入力ミスを減らせます。

BEMとは

BEMは、以下の３つの概念から成る命名規則です。

Block（ブロック）：独立した再利用可能なコンポーネント

<div class="card">…</div>

Element（要素）：ブロックの一部で、単独では意味を持たない

<div class="card">
  <h2 class="card__title">タイトル</h2>
</div>

Modifier（修飾子）：ブロックや要素のバリエーションを表す

<div class="card card--featured">…</div>

命名規則の書式

.block {}              /* ブロック */
.block__element {}     /* 要素 */
.block--modifier {}    /* ブロックの修飾子 */
.block__element--modifier {} /* 要素の修飾子 */

BEMの利点

スコープが明確
クラス名から「どのコンポーネントの何の要素か」が一目でわかるため、他のスタイルと衝突しにくい。

メンテナンス性の向上
命名ルールが統一されていると、数か月後やチームメンバーが変わったあとでもコードが読みやすい。

再利用性
ひとつのブロックを別のページやプロジェクトで流用しやすい。

階層的なCSSを避けられる
深いセレクタによるパフォーマンス低下や specificity 地獄を防げる。

BEMの使い方

以下はSassでBEMを実装する際のポイントとサンプルになります。

1. ネストと&を活用する

.card {
  padding: 1rem;
  background: $white;
  &__title {
    font-size: 1.5rem;
    margin-bottom: .5rem;
  }
  &__body {
    font-size: 1rem;
    color: $text-color;
  }
  &--featured {
    border: 2px solid $primary-color;
  }
  &__title--highlight {
    color: $primary-color;
  }
}

2. ミックスインで命名を自動化する

// mixins/_bem.scss
@mixin b($block) {
  .#{$block} { @content; }
}
@mixin e($element) {
  &__#{$element} { @content; }
}
@mixin m($modifier) {
  &--#{$modifier} { @content; }
}
// 実際の使用例
@include b('card') {
  padding: 1rem;
  @include e('title') { font-weight: bold; }
  @include m('featured') { background: $highlight-bg; }
}

3. 変数で共通化

$card-padding: 1rem;
$card-bg: #fff;

.card {
  padding: $card-padding;
  background: $card-bg;
}

4. コンポーネント単位でファイル分割

/styles
├─ components
│  ├─ _card.scss   // cardコンポーネント
│  ├─ _button.scss // buttonコンポーネント
│  └─ ...
└─ main.scss       // すべてをimport

まとめ

SassとBEMを組み合わせることで、CSSを効率的に整理し、保守しやすい設計ができることをご紹介しました。
実際に使ってみると、その効果をすぐに実感できると思います。

ネストやミックスイン、変数を取り入れてBEMを自動化することで、
大規模な開発でも安心してCSSを管理できるのが大きな特長です。

「コードをもっと見やすく、扱いやすくしたい」という方は、ぜひ試してみてはいかがでしょうか。