ファイル名とクラス名の関係について
- 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
}