別Componentを含めない

Componentの中に別のComponentを含めないようにしてください。また、子Componentを単独で利用しないようにしてください。

REASON

Componentの組み合わせで意図しないレイアウトが発生しないように、Component内で完結するようにします。

事例 (1)

BAD

含めないようにしてください。

<div class="c-foo">
    <div class="c-bar"></div>
</div>

scss/object/component/_foo.scss

.c-foo {
    // something style
    .c-bar {
        // something style
    }
}

GOOD

上記例の解決作の一つとして、例えばc-barに並列でc-fooの子Componentを追加します。

<div class="c-foo">
    <div class="c-foo__child c-bar"></div>
</div>

scss/object/component/_foo.scss

.c-foo {
    // something style
    &__child {
        // something style
    }
}

事例 (2)

BAD

子Component.c-barを親Component.c-bar__child無しで利用しないようにしてください。

<div class="c-foo">
    <div class="c-bar__child"></div>
</div>

GOOD

子Component.c-bar__childは必ず親Component.c-bar内に含まれる様に構築してください。

<div class="c-foo">
    <div class="c-bar">
        <div class="c-bar__child"></div>
    </div>
</div>

または

<div class="c-foo c-bar">
    <div class="c-bar__child"></div>
</div>