「いまさら聞けないSCSSとSASSの違い」完全初心者向け完全ガイド

SCSS設計パターン（結論）

SCSSで実務レベルの設計を行うには、以下の組み合わせが最重要です。

• BEM（命名規則）
• コンポーネント設計（部品化）
• ファイル分割（責務分離）

この3つをセットで使うことで、壊れにくく・再利用しやすいCSS設計になります。

BEMとは（基本概念）

BEMはCSSクラスの命名ルールです。

構造

• Block（ブロック）：独立した部品
• Element（要素）：ブロックの中の要素
• Modifier（修飾子）：状態・バリエーション

命名ルール

.block {}
.block__element {}
.block--modifier {}

例

<div class="card card--primary">
  <h2 class="card__title">タイトル</h2>
  <p class="card__text">本文</p>
</div>

<div class="card card--primary">
  <h2 class="card__title">タイトル</h2>
  <p class="card__text">本文</p>
</div>

SCSS × BEM の書き方

ネストで整理する

.card {
  padding: 16px;
  border: 1px solid #ccc;

  &__title {
    font-size: 20px;
  }

  &__text {
    font-size: 14px;
  }

  &--primary {
    background: blue;
    color: white;
  }
}

.card {
  padding: 16px;
  border: 1px solid #ccc;

  &__title {
    font-size: 20px;
  }

  &__text {
    font-size: 14px;
  }

  &--primary {
    background: blue;
    color: white;
  }
}

ポイント（重要）

• & は親セレクタを指す
• ネストは2〜3階層までに抑える
• 深くしすぎると崩壊する

コンポーネント設計とは

コンポーネント設計とは、UIを部品単位で管理する考え方です。

例（部品分解）

• ボタン
• カード
• ナビゲーション
• モーダル

ディレクトリ構成（実務レベル）

scss/
  foundation/
    _reset.scss
    _base.scss

  layout/
    _header.scss
    _footer.scss

  component/
    _button.scss
    _card.scss
    _modal.scss

  project/
    _home.scss
    _about.scss

  utility/
    _margin.scss
    _display.scss

  style.scss

各レイヤーの役割

foundation（基礎）

• リセットCSS
• ベーススタイル

layout（レイアウト）

• ページ全体構造
• header / footer など

component（部品）

• 再利用可能なUI
• BEMと最も相性が良い

project（ページ固有）

• 特定ページ専用CSS

utility（補助）

• .mt-10 などの単機能クラス

実務で使うSCSSコンポーネント例

ボタンコンポーネント

.button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  &--primary {
    background: blue;
    color: white;
  }

  &--secondary {
    background: gray;
    color: white;
  }

  &--large {
    padding: 12px 24px;
  }
}

.button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  &--primary {
    background: blue;
    color: white;
  }

  &--secondary {
    background: gray;
    color: white;
  }

  &--large {
    padding: 12px 24px;
  }
}

HTML使用例

<button class="button button--primary">送信</button>
<button class="button button--secondary button--large">キャンセル</button>

設計のNGパターン（重要）

① ネストしすぎ

.header {
  .nav {
    .list {
      .item {
        .link {

.header {
  .nav {
    .list {
      .item {
        .link {

→ 可読性崩壊・再利用不可

② 要素依存セレクタ

div ul li a {}

div ul li a {}

→ HTML変更で崩壊

③ ID依存

#main {}

#main {}

→ 再利用できない

SCSS設計のベストプラクティス

ルール（実務基準）

• クラスベース設計（ID禁止）
• BEM命名
• ネストは浅く
• コンポーネント単位で分割
• 1ファイル1責務

さらに強い設計にする（上級）

Mixinで再利用

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  @include flex-center;
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  @include flex-center;
}

変数管理

$primary-color: blue;
$spacing: 16px;

.button {
  background: $primary-color;
  padding: $spacing;
}

$primary-color: blue;
$spacing: 16px;

.button {
  background: $primary-color;
  padding: $spacing;
}

関数化

@function rem($px) {
  @return $px / 16 * 1rem;
}

.text {
  font-size: rem(16);
}

@function rem($px) {
  @return $px / 16 * 1rem;
}

.text {
  font-size: rem(16);
}

まとめ（最重要）

• BEMで命名 → 構造が明確になる
• コンポーネント設計 → 再利用性UP
• SCSSで効率化 → 保守性UP

最終結論

初心者〜実務までの最適解はこれです。

• 記法 → SCSS
• 命名 → BEM
• 設計 → コンポーネント分割