SCSS/CSSでファイル名に「_」や「__」をつけるのはなぜ？ プライベートメンバーの定義とメリット・デメリット

SCSS/CSS ファイル名に "_" または "__" を先頭につける理由

詳細な説明

• "__" で始まるメンバー
  プライベートメンバーの中でもさらに 特別なプライベートメンバー を定義できます。 特別なプライベートメンバーは、そのファイルをインポートした他のファイル内でも 名前の衝突を起こさずに 使用できます。 ただし、意図せずに使用してしまう可能性が高いため、慎重に使用する必要があります。
• "_" で始まるメンバー
  プライベートメンバーの中でさらに 非公開メンバー を定義できます。 非公開メンバーは、そのファイル内でも @import ディレクティブを使用してインポートした場合でも参照できません。

例

// _private.scss
$_private-variable: 10px;
.private-class {
  color: blue;
}

// main.scss
@import "_private.scss";

.public-class {
  font-size: 16px;
}

// 非公開メンバーは main.scss から参照できません:
.private-class {
  /* ... */
}

// 特別なプライベートメンバーは main.scss から参照できますが、意図せずに使用してしまう可能性があります:
.public-class {
  width: $_private-variable;
}

• SCSS だけでなく、CSS でも "_" や "__" を使ってプライベートメンバーを定義できます。
• @use ディレクティブを使用する場合は、ファイル名の "_" や "__" は考慮されません。 メンバーがプライベートかどうかは、@use ディレクティブ内でのみ定義されます。

メリット

• 意図しないスタイルの適用を防ぐことができます。
• コードをより読みやすく、理解しやすくすることができます。
• 名前空間の衝突を回避し、コードのモジュール性を向上させることができます。

• "_" や "__" の使い方を誤ると、予期しない動作を引き起こす可能性があります。
• プライベートメンバーは他のファイルからは参照できないため、コードの再利用が難しくなる場合があります。

// プライベート変数
$_private-variable: 10px;

// プライベートクラス
.private-class {
  color: blue;
}

main.scss

// `_private.scss` をインポート
@import "_private.scss";

// 公開クラス
.public-class {
  font-size: 16px;
}

// 非公開メンバーは参照できません
.private-class {
  /* ... */
}

// 特別なプライベートメンバーは参照できますが、意図せずに使用してしまう可能性があります
.public-class {
  width: $_private-variable;
}

説明

1. _private.scss ファイルには、$_private-variable というプライベート変数と、.private-class というプライベートクラスが定義されています。
2. main.scss ファイルでは、@import ディレクティブを使用して _private.scss ファイルをインポートします。
3. main.scss ファイルには、.public-class という公開クラスが定義されています。
4. .private-class はプライベートクラスなので、main.scss ファイルからは直接参照できません。
5. $_private-variable はプライベート変数なので、main.scss ファイルからは直接参照できません。 しかし、@import ディレクティブを使用してインポートしたファイル内では使用できます。 ただし、意図せずに使用してしまう可能性が高いため、慎重に使用する必要があります。

ネストルールを使う

ネストルールを使用すると、プライベートメンバーを他のセレクタの中にカプセル化することができます。

.container {
  /* 公開セレクタ */
  .public-class {
    color: red;
  }

  /* プライベートセレクタ */
  &_private {
    color: blue;
  }
}

この例では、.container&_private は .container セレクタのプライベートメンバーとなります。 これは、.container セレクタの子要素のみを対象とするため、他のセレクタから影響を受けません。

カスタムプロパティを使う

CSS カスタムプロパティを使用すると、プライベート変数を定義することができます。

:root {
  --private-variable: 10px;
}

.container {
  /* 公開クラス */
  .public-class {
    font-size: 16px;
  }

  /* プライベートクラス */
  .private-class {
    color: var(--private-variable);
  }
}

この例では、--private-variable は CSS カスタムプロパティであり、プライベート変数として使用できます。 .private-class は var(--private-variable) を使用してこの変数の値を参照します。

Sass ミックスインを使う

Sass ミックスインを使用すると、プライベートな CSS ルールセットを定義することができます。

// _private.scss
@mixin private-mixin {
  color: blue;
}

// main.scss
.container {
  /* 公開クラス */
  .public-class {
    font-size: 16px;
  }

  /* プライベートクラス */
  .private-class {
    @include private-mixin;
  }
}

この例では、private-mixin は Sass ミックスインであり、プライベートな CSS ルールセットを定義します。 .private-class は @include private-mixin を使用してこのミックスインを呼び出し、プライベートな CSS ルールを適用します。

どの方法を選択するべきか？

どの方法を選択するかは、状況によって異なります。

• より多くの制御が必要な場合は、ネストルール、カスタムプロパティ、または Sass ミックスインを使用する ことを検討してください。
• シンプルさを重視する場合は、ファイル名の "_" または "__" を使用する のがおすすめです。