Modifierだけのクラスは作らないこと

"Modifier"は一つのクラスとして使用することはできません。必ずComponentと併用するようにしてください。なぜなら、"Modifier"はComponentの異なる状態を示すモノに使うためのモノとなるためです。

事例

BAD

"Modifier"が一つのクラスとして宣言されているため良くありません。

.c-component {
    .is-child {
        // something style
    }
}

GOOD

"Component"として指定してください。

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

Modifierが必要になる事例

例えば下記のようなボタンを実装する場合、

違いは背景と線の色しかありません。その為、この場合はModifierを利用する様にしてください。

SCSS

// `.c-button` は元となるComponentです
.c-button {
    color: #fff;
    appearance: none;
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    padding: 1rem 2rem;
    border: 1px solid #999;
    background: #333;
    border-radius: .25rem;

    // 赤色のボタン用のModifier
    &.is-red {
        border: 1px solid #f00;
        background: #c00;
    }

    // 青色のボタン用のModifier
    &.is-blue {
        border: 1px solid #00f;
        background: #333;
    }
}

HTML

<button class="c-button">Base Button</button>
<button class="c-button is-red">Red Button</button>
<button class="c-button is-blue">Blue Button</button>