メインコンテンツまでスキップ

ファイル名とクラス名の関係について

  • Foundationを除き、各Layout, Project, Component, Utilityを作成する際は、クラス名の接頭辞がファイル名と同じになるように作成してください。
  • また、UtilityのPC/SP振り分け処理(.u-pc-***, .u-sp-***)などの特別な場合を除き、1つのファイルに複数の接頭辞を含めないようにしてください。
REASON

ファイル名とクラス名の接頭辞を同じにすることで、クラス名が衝突されないようにします。

事例

BAD

似た接頭辞だとしても、同じファイル内に含めないようにしてください。

scss/object/component/_foo.scss
.c-foo {
// something style
}
.c-foo-bar {
// something style
}
GOOD

こちらの用に接頭辞とファイル名を合わせるようにしてください。

scss/object/component/_foo.scss
.c-foo {
// something style
}
scss/object/component/_foo-bar.scss
.c-foo-bar {
// something style
}