SASS と BEM

この記事ではSASS と BEMについて説明します。

SASS と BEM を使って、CSS が大規模化した際に起こりがちな分かりにくさや壊れやすさを防ぐための考え方と実装方法を、具体的なサンプルを交えて解説します。

YouTube Video

SASS と BEM

CSS は、ファイルや画面が増えてくるにつれて、「このスタイルはどこで定義されているのか分からない」、「少し修正しただけなのに、別の画面の見た目が崩れた」といった問題が起きやすくなります。

これは、CSS が本来 設計のルールを強制しない言語であるためです。そのまま書き続けると、意図しない依存関係が増えていきます。

SASS と BEM は、こうした問題を防ぐために、CSS を「場当たり的に書くもの」から「設計して管理するもの」へ変える実践的な手法です。両者を組み合わせることで、スタイルの意味が明確になり、可読性、再利用性、保守性を同時に高めることができます。

CSS が破綻しやすい理由

次のような CSS は、後からコードを見返したときに 挙動を理解しづらくなる ことがあります。

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• この例では、.title という同じクラスが置かれている場所によって見た目が変わる ため、「この .title はどのスタイルが適用されるのか」を即座に判断できません。
• このように、セレクタが深くなり、親要素に依存する書き方が増えるほど、CSS は影響範囲を予測しにくくなり、修正時に壊れやすくなります。

BEM とは「役割を名前で表現する」命名規則

BEM は Block / Element / Modifier の略で、「このクラスは何の部品で、どんな状態か」を名前に含めます。

• Blockは、独立したコンポーネントです。
• Elementは、Block の内部要素です。
• Modifierは、状態やバリエーションです。

1.card {}
2.card__title {}
3.card--highlighted {}

この命名により、HTML を見ただけで構造と役割が推測可能になります。

BEM を使った HTML の基本形

次は、カード UI を BEM で表現した HTML です。

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

クラス名だけで、「card という部品」「その中の title」「強調状態」が分かります。これが BEM の最大の利点です。

しかし BEM 単体では CSS が冗長になりやすい

BEM をそのまま CSS に書くと、記述量が増えがちです。

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

ここで SASS を使うと、構造を保ったまま整理された記述が可能になります。

SASS のネストで BEM を自然に表現する

SASS のネスト機能を使うと、BEM の構造をそのままコードに反映できます。

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& は親セレクタを指し、BEM の命名と非常に相性が良いです。

この SASS から生成される CSS

上記の SASS は、次のような CSS に変換されます。

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

見た目は同じでも、書く側の認知負荷が大きく下がります。

Modifier を安全に使う設計

BEM の Modifier は「状態」を表すため、上書き用途に限定するのがコツです。

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

Modifier は「追加」ではなく「変化」として扱うと、設計が安定します。

Element のネストは 1 階層までにする

BEM では、Element の入れ子を深くしすぎないことが重要です。

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

.card__header__title のような多重 Element は、Block の分割を検討するサインと考えるのが実践的です。

SASS ファイル構成の一例

最後に、実務で使いやすい SASS 構成例を示します。

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

各コンポーネントを 1 Block = 1 ファイル で管理すると破綻しにくくなります。

card.scss の例

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

この単位で完結しているため、削除、移動、再利用が容易になります。

まとめ

SASS と BEM は流行りの技術ではなく、CSS を「設計可能なコード」に変えるための実践手法です。

• BEM は、意味と役割を名前にします。
• SASS は、構造を保ったまま書きやすくします。
• 両者を組み合わせることで CSS は壊れにくくなります。

今日書く CSS を、未来の自分が理解できる形にしていきましょう。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video