🗂 SCSSファイルのディレクトリ構成

ファイル名はプレフィックスを付ける

scss/
├── foundation/     # 変数・ミックスイン・リセット等
│   └── global.scss
├── layout/         # ページレイアウト（.l- で始まる）
│   └── l-container.scss
├── component/      # パーツ単位（.c- で始まる）
│   └── c-card.scss
├── utility/        # 汎用クラス（.u- で始まる）
│   └── u-margin.scss
├── js/             # 汎用クラス（.js- で始まる）
│   └── js-header.scss
├── plugin/         # WordPressなどのプラグイン用のクラス（.plugin- で始まる）
│   └── plugin-cf7.scss
└── style.scss      # メインファイル（@useで読み込み）

📛 命名規則（BEM + FLOCSS）

プレフィックス

種類	プレフィックス	説明
Layout	`.l-`	レイアウト用のコンポネント
Component	`.c-`	UIの最小構成単位
Utility	`.u-`	汎用ユーティリティ
JavaScript	`.js-`	JS制御専用（DOM操作用）
Plugin	`.plugin-`	WordPressなどのプラグイン制御専用

<aside> 💡

FROCSSにはp-もあるが、TOKOSルールでは用いていないです!

</aside>

BEM

.c-card {               // Block
  .c-card__title { }    // Element
  .c-card__content { }  // Element
  &.--is-active { }      // Modifier
}

命名規則

class名はローマ字ではなく英単語

.c-haikei {} // ❌️NG
.c-bg {}     // ✅OK

英単語の省略は可　例:information → info

.c-information {} // ✅OK
.c-info {}        // ✅OK

名前をつなげるときは-（ハイフン）でつなげる（block-name__element）
```
.c-simplecard {}  // ❌️NG
.c-simple-card {} // ✅OK
```

element__elementはNG（＊-block__element__elementはNG）

.c-card__title__wrapper {}  // ❌️NG
.c-card__title-wrapper {}   // ✅OK

見た目や位置ではなく、意味を大事にする

.c-text-red {}     // ❌️NG
.c-text-caution {} // ✅OK

Blockの中にBlockをいれるのはOK

<div class="c-card-list">
	<div class="c-card"></div>
	<div class="c-card"></div>
	<div class="c-card"></div>
	<div class="c-card"></div>
</div>

Modifireはプレフィックスとして—-をつけ、次に属性(color)と値(blue)を入れる
```
--color-blue {}
```

Modifireはelementの階層で使用しない

.c-card__title.--color-blue {} // ❌️NG
.c-card.--color-blue {}        // ✅OK