Component

再利用できるパターンとして、小さな単位のモジュールを定義します。

一般的によく使われるパターンであり、例えばBootstrapのComponentカテゴリなどに見られるbuttonなどが該当します。

出来る限り、最低限の機能を持ったものとして定義されるべきであり、それ自体が固有の幅や色などの特色を持つことは避けるのが望ましいです。

本来のFLOCSSでは小さな単位で分割を推奨していますが、再利用する要素についてはすべてComponentに含めるようにし、大きなパーツでも許可します。

また、モディファイアについてはSMACSSのStateパターン（.is-接頭辞）を利用します。

接頭辞は.c-を利用します。

小さなComponentの例

<button class="c-button">ボタン</button>
<button class="c-button is-primary">プライマリボタン</button>
<button class="c-button is-secondary">セカンダリボタン</button>

scss/object/component/_button.scss

.c-button {
    // something style

    &.is-primary {
        // something style
    }
    &.is-secondary {
        // something style
    }
}

大きなComponentの例

<div class="c-contact-banner">
    <h2 class="c-contact-banner__head">お問い合わせはこちら</h2>
    <div class="c-contact-banner__inner">
        <div class="c-contact-banner__tel">
            <p class="c-contact-banner__label">お電話でのお問い合わせ</p>
            <a class="tel:0000000000" class="c-contact-banner__tel__anchor u-anchor-tel">000-000-0000</a>
        </div>
        <div class="c-contact-banner__form">
            <p class="c-contact-banner__label">メールでのお問い合わせ</p>
            <a href="/contact/" class="c-contact-banner__form__button c-button">お問い合わせフォーム</a>
        </div>
    </div>
</div>

scss/object/component/_contact-banner.scss

.c-contact-banner {
    &__head {
    }
    &__inner {
    }
    &__label {
    }
    &__tel {
        &__anchor {
        }
    }
    &__form {
        &__button {
        }
    }
}

TIPS

Utility（.u-anchor-tel）や別のComponent（.c-button）を含んでいますが、.c-contact-banner内で上書きするのではなく、.c-contact-banner__tel__anchorや.c-contact-banner__form__buttonを用意して、このComponent内でスタイルを定義します。

参考 : 別Componentを含めない